Flutter动画效果插件animatecon的使用

AnimateCon 是一个轻量且易于使用的 Flutter 动画容器，它使开发者能够轻松实现缩放、平移和旋转动画。通过使用 AnimateCon，开发者可以在 Flutter 应用程序中无缝创建复杂且吸引人的动画，从而提升整体用户体验，并使界面更加动态和互动。

安装

确保在您的 Flutter 项目中添加以下依赖：

dependencies:
  animatecon: ^1.1.0

然后从命令行安装包：

flutter packages get

使用

导入类

首先，在您的 Dart 文件中导入 animatecon 包：

import 'package:animatecon/animatecon.dart';

使用 AnimateCon

接下来，您可以使用 AnimateCon 来创建动画容器。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:animatecon/animatecon.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<AnimateConState> _key = GlobalKey<AnimateConState>();
  bool _btnEnabled = true;

  void _animate() {
    if (!_btnEnabled) return;

    // 执行动画
    _key.currentState!.animate(
      {"y": 100, "alpha": 0.0}, // 初始属性
      {"y": 0.0, "alpha": 1.0}, // 结束属性
      time: 500, // 动画时长（毫秒）
      ease: animateEase.back.easeOut, // 缓动函数
      onComplete: () {
        _btnEnabled = true;
      },
    );
    _btnEnabled = false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimateCon(
          key: _key,
          initProp: const {"alpha": 0}, // 初始化属性
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _animate,
        tooltip: 'Animate',
        child: Icon(Icons.animation),
      ),
    );
  }
}

控制动画

您可以通过调用 _animate 方法来触发动画。此外，您还可以停止当前动画：

// 停止动画
_key.currentState!.stop();

更多关于Flutter动画效果插件animatecon的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼

更多关于Flutter动画效果插件animatecon的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

animate_do 是一个用于 Flutter 的动画插件，它提供了多种预定义的动画效果，可以轻松地将动画应用到你的 Flutter 应用中。这个插件的灵感来源于 Animate.css，它使得添加动画效果变得非常简单。

安装 `animate_do`

首先，你需要在 pubspec.yaml 文件中添加 animate_do 依赖：

dependencies:
  flutter:
    sdk: flutter
  animate_do: ^3.0.2

然后运行 flutter pub get 来安装依赖。

使用 `animate_do`

animate_do 提供了多种动画效果，例如 FadeIn, FadeInUp, FadeInDown, FadeInLeft, FadeInRight, BounceIn, ZoomIn, 等等。

基本用法

以下是一个简单的例子，展示如何使用 FadeIn 动画：

import 'package:flutter/material.dart';
import 'package:animate_do/animate_do.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Animate_do Example')),
        body: Center(
          child: FadeIn(
            duration: Duration(seconds: 2),
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}

在这个例子中，FadeIn 动画会在 2 秒内将文本从透明渐变到不透明。

自定义动画

你可以通过传递参数来自定义动画效果，例如 delay, duration, curve, 等等。以下是一个自定义 FadeIn 动画的例子：

import 'package:flutter/material.dart';
import 'package:animate_do/animate_do.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Animate_do Example')),
        body: Center(
          child: FadeIn(
            delay: Duration(seconds: 1),
            duration: Duration(seconds: 2),
            curve: Curves.easeInOut,
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}

Flutter动画效果插件animatecon的使用