Flutter动画实例——4缸发动机动画

原文链接:https://juejin.im/post/5bbf0cc25188255c520d36c9

今天中午无意中看到了奔驰的一个发动机的宣传视频,一时手痒,想自己做一个动画来实现一下发动机的动画,当然做出来肯定和奔驰的效果差很多:

不过这个动画对于app来说,也算是稍微些复杂的了,具体代码就不介绍了,大家可以去GitHub看源码,下面给大家介绍一下原理吧

结构拆分

根据动画的内容,需要把它分成几部分:

  • 发动机上盖(灰色)
  • 气缸和连杆(红色)
  • 曲轴(下面的灰色)

其中的动画,其实只涉及气缸,左侧的发动机主视图是气缸上下运动,右侧的发动机侧视图是气缸的上下运动外加连杆的左右旋转

布局

拆分了结构,下面就来布局,这里面大量使用了Container

这么多部件叠在一起,所以很直观的就想到了Stack Widget,创建一个容器Container,然后child是Stack,上面说的各个部件,都放在Stack里,并通过Position来指定位置

发动机上盖

发动机上盖是个长方形Container,通过decoration设置了上部的两个圆角,以及灰色的背景色。还有就是需要在上盖上,掏出四个空间,来放置气缸。

气缸和连杆

气缸和连杆,使用的是一个Column来封起来几个Container,气缸用了5个Container来实现活塞环的效果,连杆细长,并且底部有圆角 动画我们下一节说

曲轴

曲轴分成几部分:曲轴主轴,每个活塞拉杆的连接部分,连接部分包括两个片状Container和中间的掏空部分(掏空其实就是设置成背景颜色,看起来是掏空的)

动画

这里只有气缸和连杆需要有动画,实现了一个气缸的动画,那四个气缸也差不多了

活塞的上下运动很简单,运用补间动画Tween,让他的值从0~2*PI之间变化,通过sin函数,就可以实现活塞的往复运动

top: ShellHeight -
          CylinderHeight -
          CrankshaftRadius -
          CrankshaftRadius * sin(positionTween.evaluate(animation)),
复制代码

而且使用sin函数,因为不是线性的,所以也实现了类似ease in out的效果。

右侧发动机侧视图的连杆旋转着实费了些脑筋,倒不是动画困难,而是曲轴往复运动,与连杆的旋转角度之间的关系,最后通过测试,发现从0~pi的时候,线性旋转,pi~2*pi的时候,三角函数旋转,拟合度比较高,至于旋转的方法,使用Transform Widget

 Transform(
            transform:
                Matrix4.rotationZ(connectRodAngle(maxAngle, positionTween.evaluate(animation))),//旋转角度
            alignment: Alignment.topCenter,
            child: Container(
              height: ConnectRodHeight,
              width: ConnectRodWidth,
              decoration: BoxDecoration(
                  color: CylinderColor,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(ConnectRodWidth / 2),
                      bottomRight: Radius.circular(ConnectRodWidth / 2))),
            ),
          )
复制代码

总结

整个实现其实很简单,想实现一个复杂动画,思路整理很重要,不要被动画的表象绕进去,另外,发动机的各个尺寸和颜色,我都通过全局声明,提高代码的可维护性,所以现在如果我想把发动机变成8缸,体积也变大,几乎是10s以内就能完成。

const EngineHeight = 170.0;
const ShellWidth = 200.0;
const ShellWidthLeft = 70.0;
const ShellHeight = 100.0;
const ShellPadding = 12.0;
const CylinderHeight = 18.0;
const CylinderWidth = 35.0;
const ConnectRodHeight = 60.0;
const ConnectRodWidth = 6.0;
const CrankshaftRadius = 20.0;
const CrankshaftRadiusWithBorder = CrankshaftRadius + 3;
const CrankshaftRodRadius = 5.0;
const CrankshaftFlatWidth = 4.0;
const CylinderCount = 4;
const ShellColor = Colors.grey;
const BackgroundColor = Colors.yellow;
const CylinderColor = Colors.red;
const CrankshaftColor = Colors.grey;
复制代码
展开阅读全文

没有更多推荐了,返回首页