Flutter 动画效果

在动画方面 Flutter 提供了 Animation 类提供使用。

动画

Flutter 中创建动画，请创建名为 controller 的 AnimationController 对象并指定持续时间。并且让 AnimationController 在给定的持续时间内线性生成范围从 0.0 到 1.0 的值。

class _LogoFadeState extends State<LogoFade> with TickerProviderStateMixin {
    Animation animation;
    AnimationController controller;

    initState() {
        super.initState();
        // 创建一个动画控制器
        this.controller = AnimationController(
            duration: const Duration(milliseconds: 3000),
            vsync: this
        );

        final CurvedAnimation curve = CurvedAnimation(
            parent: controller,
            curve: Curves.easeIn
        );

        // 变化的值
        animation = Tween(begin: 0.0, end: 1.0).animate(curve);
        controller.forward();
    }

    Widget build(BuildContext context) {
        return FadeTransition(          // 创建一个过渡的动画
            opacity: animation,         // 这是动画变化值
            child: Container(
                height: 300.0,
                width: 300.0,
                child: FlutterLogo(),
            ),
        );
    }

    dispose() {
        controller.dispose();
        super.dispose();
    }
}

Lottie 动画

在 Flutter 有一个第三方的插件：fluttie，它可以让你很简单的显示一些动画加载效果。并且动画效果可以在 lottiefiles里找得到。

先安装依赖：

dependencies:
  flutter_downloader: ^0.0.7

注意事项：

• 还没有 iOS 的支持。
• 由于 dart 代码和本机之间的延迟，控制多个动画可能有点滞后。渲染多个动画会降低应用的帧速率。
• 动画小部件现在需要固定大小。
• 不要重复使用动画，因为这可能会导致您的应用崩溃。相反，保存输出 loadAnimationFromAsset() 并在需要时构造新动画。

简单使用，首先在 lottiefiles 里下载一个动画的 json 文件，并添加到 assets 里。

import 'package:fluttie/fluttie.dart';

var eAnimation;

void main() async {
    // 先加载组件
    var instance = new Fluttie();
    var eComposition = await instance.loadAnimationFromAsset(
        'lib/animatd/print.json',
    );
    eAnimation = await instance.prepareAnimation(eComposition);

    // 加载完成后再启动应用
    runApp(new MyApp());
}

body: new Column(
    children: <Widget>[
        new FluttieAnimation(eAnimation),
    ],
),