Flutter小案例-Animation动画点赞

直接进入正题：

第一步：搭建项目，在main.dart中引入自己新建的AnimationDemo类，也可以直接在main.dart中新建，但不建议

import 'package:flutter/material.dart';
import 'AnimationDemo.dart';
void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme:ThemeData(
        primaryColor:Colors.red[700]
      ),
      home:Scaffold(
        appBar:AppBar(
          title:Text("动画案例"),
          elevation: 0,
        ),
        body:AnimationDemo(),//引入我们新建的AnimationDemo类
      )
    );
  }
}

第二步：开始设置我们的AnimationDemo，使用StatefulWidget，涉及到页面变化,具体操作步骤见代码，代码中标有步骤注释，看不懂应该是不可能的，哈哈哈，记住步骤顺序，可以加入我们的技术讨论群一起交流哈，都是小白，哈哈哈QQ群864837144

import 'package:flutter/material.dart';

class AnimationDemo extends StatefulWidget{
  @override
  _AnimationDemoState createState()=>_AnimationDemoState();
}

class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin{//设置动画的垂直同步，具体干嘛的不知道，硬性要求吧，后面会用到
//1、声明需要用到的animationCongtroller和animation
  AnimationController animationController;//动画控制器
  Animation animation;//动画类，数值方面
  Animation animationColor;//动画类，颜色方面
  CurvedAnimation curved;//变化类，控制动画的变化种类，默认是匀速变化
  @override
//2、在initState方法中设置动画控制器的参数，initState为该控件初始化的方法
  void initState() {
    // TODO: implement initState
    super.initState();
    animationController=AnimationController(
      duration:Duration(milliseconds: 500),//设置动画的持续时间，这里是500毫秒
      vsync: this//开启垂直同步，这里需要事先引入TickerProviderStateMixin，前面提到过
    );
    //这里设置的是动画的变化效果，parent和curve为必选参数
    curved=CurvedAnimation(parent: animationController,curve: Curves.bounceOut);
    //设置动画的数值变化，最后要使用.animate执行动画，参数可为animationController，默认为匀速变化
    animation=Tween(begin: 32.0,end: 40.0).animate(curved);
    //同上方的数值变化，这里设置的是颜色的变化，最后也要加上aniamte才能执行该动画
    animationColor=ColorTween(begin: Colors.redAccent,end: Colors.blue[800]).animate(curved);
  }
    //3、设置资源释放
  @override3
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    //在控件消失的时候释放资源
    animationController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: AnimationHeart(//6、刚新建号了AnimationHeart类，现在引入，传入动画和控制器即可，美滋滋
        animations: [
          animation,
          animationColor
        ],
        controller: animationController,
      ),
    );
  }
}
//4、新建需要使用动画的控件AnimationHeart，集成AnimatedWidget类
class AnimationHeart extends AnimatedWidget{
//5、设置AnimationHeart的构造参数，使用该控件时需要传入的参数
  final List animations;//需要传入的动画list，list中为需要执行的动画，例如数值和颜色的变化
  final AnimationController controller;//需要传入的控制器
  AnimationHeart({
    this.animations,
    this.controller
  }):super(listenable:controller);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return IconButton(
      icon: Icon(Icons.favorite),
      iconSize: animations[0].value,//使用动画list中第一个动画的值，也就是数值
      color: animations[1].value,//使用动画list中第二个动画的值，也就是颜色
      onPressed: (){
        switch(controller.status){//根据控制器中的状态来switch动作
          case AnimationStatus.completed://状态为完成，点击就反向执行动画
            controller.reverse();
            break;
          default:
            controller.forward();//默认是顺序执行
        }
      },
    );
  }
}