写点什么

【自学 Flutter】32 交错动画的使用,掌握这个提升路径,

用户头像
Android架构
关注
发布于: 刚刚

St


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


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


height = Tween<double>(


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<EdgeInsets>(


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<MyApp> with TickerProviderStateMixin {


AnimationController controller;


@override


void initState() {


super.initState();


controller = AnimationController(


duration: const Duration(milliseconds: 2000),


vsync: this


);


}


Future<Null> 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<double> controller;


Animation<double> height;


Animation<EdgeInsets> padding;


Animation<Color> color;


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


//高度动画


height = Tween<double>(


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,


).animate(


CurvedAnimation(


parent: controller,


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


curve: Interval(


0.0, 0.6,

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
【自学Flutter】32 交错动画的使用,掌握这个提升路径,