今天中午无意中看到了奔驰的一个发动机的宣传视频，一时手痒，想自己做一个动画来实现一下发动机的动画，当然做出来肯定和奔驰的效果差很多：
不过这个动画对于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;
作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：923910776，不管你是小白还是大牛欢迎入驻 ，讨论技术， 大家一起交流学习成长！
网友评论