程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android Flutter交错动画

Android Flutter制作交错动画的示例代码

 更新时间：2022年06月28日 08:54:42   作者：岛上码农  
这篇文章我们将用Flutter实现一个交错动画的应用实例，我们让轮子在草地滚动着前进，而且还能粘上“绿色的草”，感兴趣的可以动手尝试一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

前言

之前一篇我们讲了 Flutter组合动画实现的方式 —— 交错动画。借助 GIF 和绘图技巧是可以做到类似 GIF 那种效果的。本篇我们来一个应用实例，我们让轮子在草地滚动着前进，而且还能粘上“绿色的草”，运行效果如下动画所示。

图片

动画解析

上面实现的效果实际上由三个动画组成：

  • 轮子前进的动画
  • 轮子滚动
  • 轮子的边缘颜色渐变（由黑色变成绿色）

这三个动画是同时进行的，因此需要使用到交错动画，即使用一个 AnimationController来控制三个 Tween 对象实现上述的动画组合。

编码实现

首先是轮子组件的定义，为了让轮子转动的效果能够看到，我们给轮子填充了线性的渐变色，然后轮子的尺寸、旋转速度（time）和边框颜色由上级组件来控制。整个实现很简单，就是一个加了装饰的 Container 而已。

class?Wheel?extends?StatelessWidget?{
??final?double?size;
??final?Color?color;
??final?double?time;
??const?Wheel({
????Key??key,
????required?this.size,
????required?this.time,
????required?this.color,
??})?:?super(key:?key);

??@override
??Widget?build(BuildContext?context)?{
????return?Container(
??????width:?size,
??????height:?size,
??????transform:?Matrix4.identity()..rotateZ(2?*?pi?*?time),
??????transformAlignment:?Alignment.center,
??????decoration:?BoxDecoration(
????????border:?Border.all(color:?color,?width:?10.0),
????????borderRadius:?BorderRadius.circular(size?/?2),
????????gradient:?LinearGradient(
??????????colors:?[
????????????Colors.white,
????????????Colors.orange[100]!,
????????????Colors.orange[400]!,
??????????],
????????),
??????),
????);
??}
}

然后是整个页面布局，整个页面布局其实就是一个 Stack，然后底部是绿色的 Container再加两个轮子，都是使用 Positioned 来确定各自的位置。然后就是通过受控的Tween 对象控制轮子的旋转速度，轮子外边沿颜色和移动的距离，代码如下，其中轮子移动距离通过控制边距实现。

Widget?build(BuildContext?context)?{
??final?bottomHeight?=?MediaQuery.of(context).size.height?/?3;
??return?Scaffold(
????appBar:?AppBar(
??????title:?const?Text('交错动画'),
????),
????body:?Stack(children:?[
??????Positioned(
????????child:?Container(
??????????width:?double.infinity,
??????????height:?bottomHeight,
??????????color:?Colors.green[400],
????????),
????????bottom:?0,
????????left:?0,
????????right:?0,
??????),
??????Positioned(
??????????child:?Wheel(
????????????size:?wheelSize,
????????????color:?_color.value!,
????????????time:?_time.value,
??????????),
??????????left:?_offset.value?*?MediaQuery.of(context).size.width,
??????????bottom:?bottomHeight),
??????Positioned(
??????????child:?Wheel(
????????????size:?wheelSize,
????????????color:?_color.value!,
????????????time:?-_time.value,
??????????),
??????????right:?_offset.value?*?MediaQuery.of(context).size.width,
??????????bottom:?bottomHeight)
????]),
????floatingActionButton:?FloatingActionButton(
??????child:?Icon(Icons.play_arrow),
??????onPressed:?()?{
????????if?(_controller.isCompleted)?{
??????????_controller.reverse();
????????}?else?if?(!_controller.isAnimating)?{
??????????_controller.forward();
????????}
??????},
????),
??);
}

最后就是构建受AnimationController 控制的 Tween 对象了，这个在Flutter 做出 GIF 动画效果已经介绍过了，代码如下：

late?AnimationController?_controller;
late?Animation<double>?_time;
late?Animation<double>?_offset;
late?Animation<Color?>?_color;

final?wheelSize?=?80.0;

@override
void?initState()?{
??_controller?=
??????AnimationController(duration:?Duration(seconds:?4),?vsync:?this)
????????..addListener(()?{
??????????setState(()?{});
????????});

??_time?=?Tween<double>(begin:?0,?end:?8.0).animate(
????CurvedAnimation(
??????parent:?_controller,
??????curve:?Interval(
????????0.0,
????????1.0,
????????curve:?Curves.linear,
??????),
????),
??);
??_offset?=?Tween<double>(begin:?0,?end:?1.0).animate(
????CurvedAnimation(
??????parent:?_controller,
??????curve:?Interval(
????????0.0,
????????1.0,
????????curve:?Curves.easeInCubic,
??????),
????),
??);
??_color?=?ColorTween(begin:?Colors.black87,?end:?Colors.green).animate(
????CurvedAnimation(
??????parent:?_controller,
??????curve:?Interval(
????????0.0,
????????0.8,
????????curve:?Curves.easeIn,
??????),
????),
??);
??super.initState();
}

就这样，一对奔向对方的轮子动画效果就完成了！

总结

交错动画实际上可以实现非常有创意的动效，只是这样会需要很高的绘图技巧，比如使用 CustomPaint 来做。接下来的几篇我们来介绍一下 CustomPaint相关的内容。

以上就是Android Flutter制作交错动画的示例代码的详细内容，更多关于Android Flutter交错动画的资料请关注程序员之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论

?


http://www.vxiaotou.com