- AnimationController实现单项放大
1.创建AnimationController对象，其默认动画效果为匀速：
AnimationController _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
lowerBound: 50.0,
upperBound: 150.0,
duration: Duration(seconds: 2)
);
super.initState();
}
其中该对应的State类要实现混入SingleTickerProviderStateMixin，因为vsync要求类型是TickerProvider
2.修改需要变化的组件：
body: Center(
child: Icon(Icons.favorite,color:Colors.red,size: _controller.value,),
),
3.执行动画：
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: (){
_controller.forward();
},
),
- 实现放大、缩小功能以及暂停恢复以后可以按照原先的状态继续动画
1.创建AnimationController对象：
AnimationController _controller
Animation _animation
Animation _animationSize
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2)
)
2.自定义动画效果曲线：
_animation = CurvedAnimation(parent: _controller,curve: Curves.easeInOut)
3.自定义变化的数值：
_animationSize = Tween(begin: 50.0,end: 150.0).animate(_animation)
4.监听动画的改变：
_controller.addListener(() {
setState(() {})
})
5.监听动画的状态改变，实现可以反转放大缩小的效果：
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse()
} else if (status == AnimationStatus.dismissed) {
_controller.forward()
}
})
6.实现暂停恢复之后可以回到原来的状态。
body: Center(
child: Icon(Icons.favorite,color:Colors.red,size: _animationSize.value,),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: (){
if (_controller.isAnimating) {
_controller.stop()
} else if (_controller.status == AnimationStatus.forward) {
_controller.forward()
} else if (_controller.status == AnimationStatus.reverse) {
_controller.reverse()
} else {
_controller.forward()
}
},
),
- AnimationWidget优化每次刷新都会执行build方法，浪费性能
1.去掉监听动画的操作_controller.addListener((){});
2.新建类继承自AnimateWidget；
class HYAnimation extends AnimatedWidget {
HYAnimation(Animation animation): super(listenable: animation);
@override
Widget build(BuildContext context) {
Animation animation = listenable;
return Icon(Icons.favorite,color:Colors.red,size: animation.value,);
}
}
3.使用该类：
body: Center(
child:HYAnimation(_animationSize)
),
- AnimationBuilder优化AnimationWidget创建类
1.去掉新创建类操作；
2.用AnimatedBuilder包裹有动画的组件：
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (context,child){
return Icon(Icons.favorite,color:Colors.red,size: _animationSize.value,);
},
),
),
- 复合动画包括大小、颜色、旋转效果
1.创建多个Animation对象：
AnimationController _controller;
Animation _animation;
Animation _animationSize;
Animation _animationColor;
Animation _animationOpacity;
Animation _animationRadius;
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2)
);
2.CurvedAnimation自定义动画效果：
3.Tween自定义变化的数值：
_animationSize = Tween(begin: 10.0,end: 100.0).animate(_controller);
_animationColor = ColorTween(begin:Colors.orange,end: Colors.red).animate(_controller);
_animationOpacity = Tween(begin: 0.0,end: 1.0).animate(_controller);
_animationRadius = Tween(begin: 0.0,end: pi).animate(_controller);
以上动画并不是都支持Curves的所有属性，故animate里面的parent属性只能是_controller,而不是_animation。
4.放大缩小和暂停恢复可以回到原来效果的操作和上面保持一致；
5.发生动画的组件部分：
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (context,child){
return Opacity(
opacity: _animationOpacity.value,
child: Transform(
transform: Matrix4.rotationZ(_animationRadius.value),
alignment: Alignment.center,
child: Container(
width: _animationSize.value,
height: _animationSize.value,
color: _animationColor.value,
alignment: Alignment.center,
),
),
);
},
),
),
- 页面跳转补间动画（没有视觉上push的效果）
1.要跳转的页面
Navigator.of(context).push(PageRouteBuilder(
pageBuilder: (context,animation1,animation2){
return FadeTransition(
opacity: animation1,
child: HYPage(),
);
}
));
- Hero动画实现从原位置放大图片后恢复，且采用补间动画的效果
1.图片页（点击图片放大）
final String imageUrl = "https:
return GestureDetector(
onTap: (){
Navigator.of(context).push(PageRouteBuilder(
pageBuilder: (context,animation1,animation2){
return FadeTransition(opacity: animation1,child: HYImagePage(imageUrl));
}
));
},
child: Hero(
tag: imageUrl,
child: Image.network(imageUrl,fit: BoxFit.cover,)
),
);
2.放大的图片
class HYImagePage extends StatelessWidget {
final String _imageUrl;
HYImagePage(this._imageUrl);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: GestureDetector(
onTap: (){
Navigator.of(context).pop();
},
child: Hero(
tag:_imageUrl,
child: Image.network(_imageUrl)
),
),
),
);
}
}
