Flutter 动画1

写代码就希望写出来的东西是可以动的，所以，最近分享一点动画的代码一起学习呀~

觉得有用的话，记得收藏一波~

以下所有的代码，可以直接复制进去main.dart文件里面，就可以运行出这个效果啦~

（一）效果图
这个效果是当你一开始运行，这个小方块就会开始从左上角沿着对角线运动到右下角

（一）代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("demo"),
      ),
      body: AnimateDemo(),
    ));
  }
}

class AnimateDemo extends StatefulWidget {
  @override
  _AnimateDemoState createState() => _AnimateDemoState();
}

class _AnimateDemoState extends State<AnimateDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;//初始化
  Animation _animation;
  
  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = Tween<AlignmentGeometry>(
            begin: Alignment.topLeft, end: Alignment.bottomRight)//动画运动的始末轨迹
        .animate(_animationController);
        
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            width: 200,
            height: 200,
            color: Colors.orange,
            child: AlignTransition(
                alignment: _animation,//调用的函数
                child: Container(
                  width: 30,
                  height: 30,
                  color: Colors.green,
      ))));
  }
}

（二）效果图
该效果是点击图标，再开始沿着运动轨迹运动

（二）代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("甜宠软妹"),
      ),
      body: AlignDemo(),
    ));
  }
}

class AlignDemo extends StatefulWidget {
  @override
  _AlignDemoState createState() => _AlignDemoState();
}

class _AlignDemoState extends State<AlignDemo> {
  var _aligmment = Alignment.topLeft;//初始化

  @override
  Widget build(BuildContext context) {
    return Align(
      child: Container(
        width: 200,
        height: 200,
        color: Colors.orange,
        child: AnimatedAlign(
          alignment: _aligmment,
          duration: Duration(seconds: 2),
          child: IconButton(
              icon: Icon(
                Icons.car_repair,
                color: Colors.white,
                size: 30,
              ),
              onPressed: () {
                setState(() {
                  _aligmment = Alignment.bottomRight;//给突变绑定事件
                });
              }),
        ),
      ),
    );
  }
}

总结：
效果1 是通过给container外层加一个AlignTransition，在初始化函数里面调用动画函数

效果2 是直接给图标绑定事件，在动画组件里面调用函数即可实现