CurvedAnimation非线性动画
CurvedAnimation继承Animation,它将动画过程定义为一个非线性曲线,属于Animation<double>类型。构建其对象的方式如下所示:
CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
构造函数中传入控制器和要执行的曲线方式。Curves类定义了许多常用的曲线,也可以创建自己的,
//设置动画曲线 _curvedAnimation=CurvedAnimation(parent:_animationController,curve: Curves.bounceOut );
Flutter定义了一系列的插值器,封装在Curves类中,有下面13种效果:
linear decelerate ease easeIn easeOut easeInOut fastOutSlowIn bounceIn bounceOut bounceInOut elasticIn elasticOut elasticInOut
示例
import 'package:flutter/material.dart'; class AnimateDemo extends StatelessWidget { @override Widget build(BuildContext context) { return AnimateDemoHome(); } } class AnimateDemoHome extends StatefulWidget { @override _AnimateDemoHomeState createState() => _AnimateDemoHomeState(); } class _AnimateDemoHomeState extends State<AnimateDemoHome> with TickerProviderStateMixin { //定义动画控制器变量类型 AnimationController _animationController; Animation _animation; Animation _animationColor; CurvedAnimation _curvedAnimation; @override void initState() { // TODO: implement initState super.initState(); //创建动画控制器 _animationController = AnimationController( duration: Duration(milliseconds: 3000), vsync: this, ); //设置动画曲线 _curvedAnimation=CurvedAnimation(parent:_animationController,curve: Curves.bounceOut ); //创建Tween设置动画运动的值,会返回一个Animation,通过这个变量可以控制动画 _animation= Tween(begin:200.0,end:400.0).animate(_curvedAnimation); //生成颜色 _animationColor=ColorTween(begin: Colors.red[100],end: Colors.red[900]).animate(_curvedAnimation); //监听控制器的动画 _animationController.addListener(() { //这里的值取决于设置的动画值 setState(() {}); }); //监听动画的状态 _animationController.addStatusListener((AnimationStatus status) { print(status); }); _animationController.forward(); } @override void dispose() { // TODO: implement dispose //销毁动画 _animationController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Animate案例'), ), body: Center( child: Container( width: _animation.value, height: _animation.value, color: _animationColor.value, ), ), ); } }
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站,联系方式11523518。
热评文章
标签列表
热门文章
友情链接