我们在上一章回中介绍了转场动画相关的内容,本章回中将介绍如何实现动画.闲话休提,让我们一起Talk Flutter吧。
1 .概念介绍
提到动画相信大家都不陌生,在程序中使用动画可以增加程序酷炫的效果,因此我们有必要掌握动画相关的知识。其实在我们在上一章回中介绍转场动画时已经使用过动画,只是当时使用的是系统提供的动画,本章回中将详细介绍如何实现动画。
2. 实现方法
- 创建AnimationController类型对象,该类的构造方法中有一个必选参数:vsync表示屏幕刷新时是否通知当前界面,传递了当前对象(this)给它;
- 自定义Widget类,在类中混入了SingleTickerProviderStateMixin类,这样才能把当前对象传递给vsync参数;
- 创建CurvedAnimation类型对象,该类主要用来控制动画的插值,比如动画以线性方式播放;
- 创建Tween类型对象,该类主要用来控制动画的开始值和结束值;
- 在Tween对象中关联CurvedAnimation类型对象,这样就可以控制动画的播放效果;
- 创建动画widget类,主要用来更新动画,本质上是AnimatedWidget的子类,通过类的构造方法加入前面步骤中的动画参数;
- 创建动画Builder,主要用来更新动画,和自定义动画widget类的功能相同,通过类参数加入前面步骤中的动画参数;
- 通过AnimationController类型对象,释放动画相关的资源;
上面的步骤中包含两个6,不是写错了,是它们的功能相同,实现实现方式不同。我们在实际项目中选择其中一种就可以,常用的是动画Builder;步骤6中可以控制颜色,
大小,位置,角度。把它放到组件的color,size,transform等属性中就可以实现缩放,平移,旋转,渐变动画。上面的介绍的步骤比较抽象,不容易理解,而且步骤
中还包含了很多类,接下来我们通过示例代码来演示。
3. 示例代码
class _ExAnimationState extends State<ExAnimation> with SingleTickerProviderStateMixin{
late final AnimationController _animationController;
late final CurvedAnimation _animationCurve;
late final Animation _animationTween;
void initState() {
// TODO: implement initState
super.initState();
_animationController = AnimationController(vsync: this,duration: const Duration(seconds: 3),);
_animationCurve = CurvedAnimation(parent: _animationController, curve:Curves.linear);
_animationTween = Tween(begin: 100.0,end: 300.0).animate(_animationCurve);
}
void dispose() {
// TODO: implement dispose
super.dispose();
_animationController.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Example of Animation'),
backgroundColor: Colors.purpleAccent,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
///使用自定义的动画类
CustomerAnimatedWidget(animation: _animationTween),
///使用动画辅助类
AnimatedBuilder(
animation: _animationTween,
builder: (context,child){
return Icon(Icons.face,size: _animationTween.value,);},
///这个child和builder中child参数相同
// child: Icon(Icons.surround_sound,size: _animationTween.value,),
),
ElevatedButton(
onPressed: () {
_animationController.forward();
},
child: const Text('start animation'),
),
],
),
);
}
}
///自定义动画类是为了提高性能,当动画更新时只调用当前类的build方法,不会调用当前类外层的build方法
class CustomerAnimatedWidget extends AnimatedWidget {
///listenable是必选参数
CustomerAnimatedWidget({super.key, required this.animation}):super(listenable: animation);
Animation animation;
Widget build(BuildContext context) {
// TODO: implement build
return Icon(Icons.surround_sound,size: animation.value,);
}
}
上面的代码实现了一个缩放动画,编译并且运行上面的程序,点击播放动画的按钮时就会看到页面中的图标逐渐由小变大,我在这里就不演示程序的运行结果了,建议大家
自己动手去实践,这样可以加深对上面动画步骤的理解。
4. 经验分享
在Flutter中实现动画的原理和Android以及IOS相同,都是依靠移动图片的位置,渐变图片的颜色,缩放图片的大小,旋转图片的角度来实现动画效果。以Android中
的动画为例做个对比:Android通过配置xml的属性,或者使用Animation类中不同的方法来实现移动,渐变,缩放和旋转操作。而Flutter则是提供了不同的类来实现
移动,渐变,缩放和旋转操作。示例代码中只列出了缩放操作的类,其它操作的类遇到后再给大家分享。此外,Flutter提供的类是环环相扣,相互依赖,比如上面步骤
中用到的AnimationController类是动画操作的核心类,它嵌入到了动画效果类中,而动画效果类又和缩放操作类关联在了一起。这样环环相扣实现了一个缩放动画。
在实际项目中动画效果可能比较复杂,它会综合移动,缩放等多个操作在一起组成复合动画,类似Android中的动画集合。这个时候需要我们有立体思维,并且结合多个
动画操作才能创造出好看的动画效果。后续章回中,我会给大家分享一些具体的动画效果示例。
看官们,关于"如何实现动画"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!