Flutter中实现动画的基本方法答案

【问题标题】：basic way to implement of Animation in FlutterFlutter中实现动画的基本方法
【发布时间】：2018-11-12 08:57:12
【问题描述】：

在 Flutter 中实现动画的基本方法，基本的 Rotate，Fade-In，Scale，Translate 动画需要帮助。如何处理它，并应用这些动画的组合。 Flutter 文档没有帮助，找不到任何资源。需要基本的方法，如这里为 Android XML 解释的那样 https://www.androidhive.info/2013/06/android-working-with-xml-animations/

【问题讨论】：

Flutter 文档没有帮助 --> 真的吗？？

标签： android dart flutter

【解决方案1】：

这是 animation in Flutter 的最简单示例。

class Home extends StatefulWidget {
@override
HomeState createState() {
    return new HomeState();
}
}

class HomeState extends State<Home> with TickerProviderStateMixin {
AnimationController controller;

@override
void initState() {
    super.initState();
    controller = new AnimationController(
        vsync: this, duration: new Duration(milliseconds: 2000));
}

@override
Widget build(BuildContext context) {
    return new Scaffold(
    body: new Center(
        child: new Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
            new RotationTransition(
            turns: new Tween(begin: 0.0, end: 1.0).animate(controller),
            child: new Container(
                width: 150.0,
                height: 150.0,
                color: Colors.blue,
            ),
            ),
            new MaterialButton(
            child: new Text('Start Animation'),
            onPressed: () {
                setState(() {
                controller.forward().then((_) {
                    controller.reverse();
                });
                });
            },
            )
        ],
        ),
    ),
    );
}
}

我用过的只有RotationTransition和AnimationController

【讨论】：

【解决方案2】：

使用AnimationController Animation<double> 可以暂停、查找、停止和反转动画。它需要一个Ticker，它在 vsync 发生时发出信号，并在运行时在每一帧上产生一个介于 0 和 1 之间的线性插值。然后创建一个或多个Animations 并将它们附加到控制器。

在构建小部件树时，您将动画分配给小部件的动画属性，例如 FadeTransition 的不透明度，并告诉控制器启动动画。

以下示例显示了如何编写FadeTransition，当您按下 FloatingActionButton 时将小部件淡化为徽标：

import 'package:flutter/material.dart';

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

class FadeAppTest extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fade Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyFadeTest(title: 'Fade Demo'),
    );
  }
}

class MyFadeTest extends StatefulWidget {
  MyFadeTest({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyFadeTest createState() => _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    );
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
              child: FadeTransition(
                  opacity: curve,
                  child: FlutterLogo(
                    size: 100.0,
                  )))),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Fade',
        child: Icon(Icons.brush),
        onPressed: () {
          controller.forward();
        },
      ),
    );
  }
}

【讨论】：