android Flutter:动画
本节学习老孟《Flutter 实战入门》。问题：为什么我代码的动画，没有一个时动起来，问题出现哪里。
动画实现得基本原理是：将一定顺序得YUI界面连续显示出来，借助人得视觉暂留现象，从而达到连续运动得效果。动画与电影得原理是一样得，动画系统中一个重要得指标是帧率fps(Frame Per Second),即每秒得帧数。对于人眼来说，帧率超过24PS就会感觉比较顺滑；而Flutter中，理论上可以实现60FPS。
一、动画简介
1、Animation
Animation是一个抽象（abstract）类，它不能直接实例化，比较常用得Animation类是Animation。Animation对象再一段时间内生成一个区间值。Animation得输出可以是线性得，也可以是非线性得，因此Animation本身和UI渲染没有任何关系，它拥有动画当前值和状态。通过给Animation对象添加监听器，可以监听动画得每一帧及动画状态。添加监听得方法有：
addListener():每一帧都会调用，一般会在其中调用setState()来触发UI重建；
addStatusListener():添加动画状态改变监听器，当动画状态开始
结束、正向、反向发生变化时调用。
2、Curve
动画得过程时线性得还是非线性得是由Curve确定得，Curve得作用和android中得Interpolator(插值)时一样得，负责控制动画变化得速率，通俗地讲就是使动画得效果能够以匀速、加速、抛物线等各种速率变化。
使用CurvedAnimation来指定动画曲线，代码如下：
animation = CurvedAnimation(parent: animationController, curve: Curves.bounceIn),
3、AnmationController
AnmationController使动画控制器，控制动画得播放、停止等。AnmationController继承自Animation,是一个特殊得Animation对象，屏幕刷新得每一帧都会生成一个新得值，默认情况下它会线性地生成0.0~1.0的值。
AnimationController animationController;
animationController = AnimationController(
lowerBound: -widget.actionsWidth,
upperBound: 0,
vsync: this,
duration: Duration(milliseconds: 300)
)
4、Tween
AnimationController继承自Anmation,输出的值只能为double类型。如果要求动画的效果是颜色变化，这时候AnimationController并不能满足需求，而Tween继承自Animatable,它提供了evaluate方法以获取当前映射值。使用Tween对象需要调用animate方法传入控制器对象，并返回一个animation。
//从白色渐变到黑色
ColorTween(begin: Colors.white,end: Colors.black);
//控件大小变化
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: AnimationDemo(),
);
}
}
class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AnimationDemo();
}
}
class _AnimationDemo extends State<AnimationDemo> with SingleTickerProviderStateMixin{
AnimationController animationController;
Animation<double> animation;
@override
void initState() {
super.initState();
animationController = AnimationController(
duration: Duration(seconds: 1),
lowerBound: 0.0,
upperBound: 1.0,
vsync: this,
)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
animationController.reverse();
}else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
animationController.forward();
}
});
animation = CurvedAnimation(parent: animationController, curve: Curves.easeIn);
animation = Tween(begin: 80.0,end: 200.0,).animate(animationController);
animationController.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: animation.value,
width: animation.value,
color: Colors.green,
),
);
throw UnimplementedError();
}
@override
void dispose() {
super.dispose();
animationController.dispose();
}
}
三、AnimatedWidget
AnimatedWidget 封装了setState（）方法部分。修改后代码：
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: AnimationDemo(),
);
}
}
class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AnimationDemo();
}
}
class _AnimationDemo extends State<AnimationDemo> with SingleTickerProviderStateMixin{
AnimationController animationController;
Animation<double> animation;
@override
void initState() {
super.initState();
animationController = AnimationController(
duration: Duration(seconds: 1),
lowerBound: 0.0,
upperBound: 1.0,
vsync: this,
)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
animationController.reverse();
}else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
animationController.forward();
}
});
animation = CurvedAnimation(parent: animationController, curve: Curves.easeIn);
animation = Tween(begin: 0.0,end: 200.0,).animate(animationController);
animationController.forward();
}
@override
Widget build(BuildContext context) {
return AnimatedContainer(
animation : animation,
);
throw UnimplementedError();
}
@override
void dispose() {
super.dispose();
animationController.dispose();
}
}
class AnimatedContainer extends AnimatedWidget {
AnimatedContainer({Key key,Animation<double> this.animation} )
: super(key:key,listenable:animation);
final Animation<double> animation;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height:animation.value,
width: animation.value,
color: Colors.green,
),
);
throw UnimplementedError();
}
}
四、AnimatedBuilder
//改变其子控件大小
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: AnimationDemo(),
);
}
}
class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AnimationDemo();
}
}
class _AnimationDemo extends State<AnimationDemo> with SingleTickerProviderStateMixin{
AnimationController animationController;
Animation<double> animation;
@override
void initState() {
super.initState();
animationController = AnimationController(
duration: Duration(seconds: 1),
lowerBound: 0.0,
upperBound: 1.0,
vsync: this,
)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
animationController.reverse();
}else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
animationController.forward();
}
});
animation = CurvedAnimation(parent: animationController, curve: Curves.easeIn);
animation = Tween(begin: 0.0,end: 200.0,).animate(animationController);
animationController.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: _AnimatedBuilder (
animation: animation,
child : FlutterLogo(),
),
);
throw UnimplementedError();
}
@override
void dispose() {
super.dispose();
animationController.dispose();
}
}
class _AnimatedBuilder extends StatelessWidget {
_AnimatedBuilder({this.child,this.animation});
final Animation<double> animation;
final Widget child;
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: animation,
builder: (context,child) {
return Container(
height: animation.value,
width: animation.value,
child: child,
);
},
child: child,);
throw UnimplementedError();
}
}
AnimatedWidget 和 AnimatedBuilder的区别：
（1）AnimatedBuilder继承自AnimatedWidget，所以AnimatedWidget能实现的功能AnimatedBuilder也能实现，但AnimatedBuilder的功能更强大。
（2）AnimatedWidget可以认为是Animation的助手类，它封装了监听Animation对象的通知并调用了setState.
五、交错动画
交错动画是由多个动画组成，多个动画可以同时执行，也可以顺序执行。这些动画由一个AnimationController控制，动画是同时执行还是顺序执行由动画对象的Interval属性决定。
//控件大小和颜色同时变化
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: AnimationDemo(),
);
}
}
class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AnimationDemo();
}
}
class _AnimationDemo extends State<AnimationDemo> with SingleTickerProviderStateMixin{
AnimationController animationController;
Animation<double> animationSize;
Animation animationColor;
@override
void initState() {
super.initState();
animationController = AnimationController(
duration: Duration(seconds: 1),
lowerBound: 0.0,
upperBound: 1.0,
vsync: this,
) ..addListener(() { })
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
animationController.reverse();
}else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
animationController.forward();
}
});
// animationColor = animationSize = CurvedAnimation(parent: animationController, curve: Curves.easeIn);
animationSize = Tween(begin: 0.0,end: 1.0,).animate(animationController);
animationColor = ColorTween(begin: Colors.yellow,end: Colors.blue).animate(animationController);
animationController.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height:( animationSize.value+ 1) * 100,
width: ( animationSize.value + 1) * 100,
color: animationColor.value,
),
);
throw UnimplementedError();
}
@override
void dispose() {
super.dispose();
animationController.dispose();
}
}
//控件大小和颜色变化按照顺序执行
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: AnimationDemo(),
);
}
}
class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AnimationDemo();
}
}
class _AnimationDemo extends State<AnimationDemo> with SingleTickerProviderStateMixin{
AnimationController animationController;
Animation<double> animationSize;
Animation animationColor;
@override
void initState() {
super.initState();
animationController = AnimationController(
duration: Duration(seconds: 1),
lowerBound: 0.0,
upperBound: 1.0,
vsync: this,
) ..addListener(() { })
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
animationController.reverse();
}else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
animationController.forward();
}
});
// animationColor = animationSize = CurvedAnimation(parent: animationController, curve: Curves.easeIn);
animationSize = Tween(begin: 80.0,end: 100.0,).animate(CurvedAnimation(parent: animationController,curve: Interval(0.0,0.5)));
animationColor = ColorTween(begin: Colors.yellow,end: Colors.blue).animate(CurvedAnimation(parent: animationController,curve:Interval(0.5,1.0)) );
animationController.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height:animationSize.value,
width: animationSize.value,
color: animationColor.value,
),
);
throw UnimplementedError();
}
@override
void dispose() {
super.dispose();
animationController.dispose();
}
}
六、AnimatedList
AnimatedList:列表中数据发生变化时加入过渡动画。AnimatedList得构建首先需要itemBuilder，itemBuilder是一个函数，列表的每一个索引会调用，这个函数有一个animation参数，可以设置成任何一个动画。如果初始的时候数据不为空，AnimatedList的构建需要initialItemCount，initialItemCount表示数据的数量。当有数据添加或者删除时，调用AnimatedListState的对应的方法：
AnimatedListState.insertItem
AnimatedListState.removeItem
得到AnimatedListState有两个方法：
（1）AnimatedList.of(context)方法：
AnimatedList.of(context).insertItem(index)
AnimatedList.of(context).removeItem(index, (context, animation) => {})
（2）设置key，
final GlobalKey<AnimatedListState> _kiytKey = GlobalKey<AnimatedListState>();
AnimatedList(
key: _kiytKey,
initialItemCount:_list.length,
itemBuilder: (BuildContext context, int index, Animation animation) {
return _buildItem(_list[index].toString(),animation);
},
);
调用如下：
_listKey.currentState.insertItem(_index);
//左进右出动画效果
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: AnimationDemo(),
);
}
}
class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AnimationDemo();
}
}
class _AnimationDemo extends State<AnimationDemo> with SingleTickerProviderStateMixin{
List<int> _list = [];
final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
void _addItem() {
final int _index = _list.length;
_list.insert(_index, _index);
_listKey.currentState.insertItem(_index);
}
void _removeItem() {
final int _index = _list.length - 1;
var item =_list[_index].toString();
_listKey.currentState.removeItem((_index), (context, animation) => _buildItem(item,animation));
_list.removeAt(_index);
}
Widget _buildItem(String _item,Animation _animation) {
return SlideTransition(
position: _animation.drive(CurveTween(curve: Curves.easeIn)).drive(Tween<Offset>(begin: Offset(1,1),end: Offset(0,1))),
child: Card(
child: ListTile(
title: Text(_item),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedList(
key: _listKey,
initialItemCount: _list.length,
itemBuilder: (BuildContext context,int index,Animation animation) {
return _buildItem(_list[index].toString(), animation);
},
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
onPressed: ()=>_addItem(),
child: Icon(Icons.add),
),
SizedBox(width: 60,),
FloatingActionButton(
onPressed: ()=>_removeItem(),
child: Icon(Icons.remove),),
],
),
);
throw UnimplementedError();
}
@override
void dispose() {
super.dispose();
}
}
七、Hero
Hero是一种常见的动画效果，是可以再路由（页面）之间“飞行”的widget，可以从一个页面打开另一个页面时产生一个简单的过滤动画。构建Hero需要一个子控件，这里设置其为图片；还需要一个tag，第一个页面喝第二个页面的Hero控件的atg属性值要保持一致。
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HeroDemo(),
);
}
}
class HeroDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (context,index)=>_buildItem(context,index),
itemCount: 1,);
throw UnimplementedError();
}
_buildItem(context,index) {
return GestureDetector(
onTap: () {
print("lililililili");
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return HeroDetailDemo();
}));
},
child: Hero(
tag: 'chair',
child: Container(
height: 100,
width: 100,
child: Image.asset('assets/icons/ic_launcher_test.png'),
),
),
);
}
}
class HeroDetailDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: Hero(
tag: 'chair',
child: Image.asset('assets/icons/ic_launcher_test.png'),
),
);
throw UnimplementedError();
}
}