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

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

不过这个动画对于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;
复制代码