【自学Flutter】32 交错动画的使用(2)

playAnimation();

},

child: Center(

child: Container(

width: 300.0,

height: 300.0,

decoration: BoxDecoration(

color: Colors.black.withOpacity(0.1),

border: Border.all(

color: Colors.black.withOpacity(0.5),

),

),

child: StaggerAnimation(

controller: controller

),

),

),

),

),

);

}

}

class StaggerAnimation extends StatelessWidget {

final Animation controller;

Animation height;

Animation padding;

Animation color;

StaggerAnimation({ Key key, this.controller }): super(key: key){

height = Tween(

begin:.0 ,

end: 300.0,

).animate(

CurvedAnimation(

parent: controller,

curve: Interval(

0.0, 0.6,

curve: Curves.ease,

),

),

);

color = ColorTween(

begin:Colors.green ,

end:Colors.red,

).animate(

CurvedAnimation(

parent: controller,

curve: Interval(

0.0, 0.6,

curve: Curves.ease,

),

),

);

padding = Tween(

begin:EdgeInsets.only(left: 0.0),

end:EdgeInsets.only(left: 300),

).animate(

CurvedAnimation(

parent: controller,

curve: Interval(

0.6, 1.0,

curve: Curves.ease,

),

),

);

}

@override

Widget build(BuildContext context) {

return AnimatedBuilder(

builder: (context,child){

return Container(

alignment: Alignment.bottomLeft,

padding: padding.value ,

child: Container(

color: color.value,

width: 30.0,

height: height.value,

),

);

},

animation: controller,

);

}

}

2.解释源代码

import ‘package:flutter/material.dart’;

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

class MyApp extends StatefulWidget {

@override

_MyAppState createState() => _MyAppState();

}

class _MyAppState extends State with TickerProviderStateMixin {

AnimationController controller;

@override

void initState() {

super.initState();

controller = AnimationController(

duration: const Duration(milliseconds: 2000),

vsync: this

);

}

Future playAnimation() async {

//先正向执行动画

await controller.forward().orCancel;

//再反向执行动画

await controller.reverse().orCancel;

}

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: GestureDetector(

//自己处理事件

behavior: HitTestBehavior.opaque,

onTap: () {

//播放动画

playAnimation();

},

child: Center(

child: Container(

width: 300.0,

height: 300.0,

decoration: BoxDecoration(

color: Colors.black.withOpacity(0.1),

border: Border.all(

color: Colors.black.withOpacity(0.5),

),

),

//调用我们定义的交错动画Widget

child: StaggerAnimation(

controller: controller

),

),

),

),

),

);

}

}

//定义交错动画Widget

class StaggerAnimation extends StatelessWidget {

final Animation controller;

Animation height;

Animation padding;

Animation color;

StaggerAnimation({ Key key, this.controller }): super(key: key){

//高度动画

height = Tween(

begin:.0 ,

end: 300.0,

).animate(

CurvedAnimation(

parent: controller,

//间隔，前60%的动画时间

curve: Interval(

0.0, 0.6,

curve: Curves.ease,

),

),

);

color = ColorTween(

begin:Colors.green ,

end:Colors.red,

最后

现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水！

为什么某些人会一直比你优秀，是因为他本身就很优秀还一直在持续努力变得更优秀，而你是不是还在满足于现状内心在窃喜！

Android架构师之路很漫长，一起共勉吧！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！