Flutter 动画使用
16lz
2021-01-24
效果预览、
旋转动画
透明度变换动画
在Android中,可以通过View.animate()对视图进行动画处理,那在Flutter中怎样才能对Widget进行处理
在Flutter中,可以通过动画库给widget添加动画。
在Android中,您可以通过XML创建动画或在视图上调用.animate()。在Flutter中,您可以将widget包装到Animation中。
与Android相似,在Flutter中,您有一个AnimationController和一个Interpolator, 它是Animation类的扩展,例如CurvedAnimation。您将控制器和动画传递到AnimationWidget中,并告诉控制器启动动画。
import 'package:flutter/material.dart';void main() { runApp(new FadeAppTest());}class FadeAppTest extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Fade Demo', theme: new ThemeData( primarySwatch: Colors.green, ), home: new MyFadeTest(title: 'Fade Demo'), ); }}class MyFadeTest extends StatefulWidget { MyFadeTest({Key key, this.title}) : super(key: key); final String title; @override State createState() => new _MyFadeTest();}class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin { AnimationController controller;//动画控制器 CurvedAnimation curved;//曲线动画,动画插值, bool forward = true; @override void initState() {//初始化,当当前widget被插入到树中时调用 super.initState(); controller = new AnimationController( vsync: this, duration: const Duration(seconds: 3)); curved = new CurvedAnimation(parent: controller, curve: Curves.bounceOut);//模仿小球自由落体运动轨迹// controller.forward();//放在这里开启动画 ,打开页面就播放动画 } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('FadeTest'), ), body: new Center(// child: new FadeTransition(//透明度动画// opacity: curved,//将动画传入不同的动画widget// child: new FlutterLogo(//创建一个小部件,用于绘制Flutter徽标// size: 200.0,// ),// ), child: new RotationTransition(//旋转动画 turns: curved, child: new FlutterLogo( size: 200.0, ), ), ), floatingActionButton: new FloatingActionButton( onPressed: () { if (forward) controller.forward();//向前播放动画 else controller.reverse();//向后播放动画 forward = !forward; }, tooltip: 'fade', child: new Icon(Icons.track_changes), ), ); }}
更多相关文章
- ARGB,RGB颜色值表示
- 【转】Android(安卓)动画框架详解,第 1 部分
- Android(安卓)各版本新特性介绍
- Android艺术开发探索第三章——View的事件体系(上)
- Android手机游戏开发知识点总结
- android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K
- Android(安卓)UI开发第十九篇——介绍一个开源的gifview——Andr
- Android自定义动画学习,实现左右摇摆动画
- 为手机定制ROM