首先，打开demo（官方网址：https://kiteapp.co/），如下图：

我们点击顶部“工具栏”中的“播放”按钮后，就可以在Mirror中运行了。通过操作我们知道该demo供有4个动效：

1、下雨

2、打雷

3、上下滑动至“65度”显示或消失

4、中间不同时间段温度条的左右滑动

下雨动效

我们在左侧layer菜单中，找到“Rain”这个图层，然后看到下面有个“Emitters（粒子发射器）”，之后点击就可以看到粒子发射器的属性：

左侧layer菜单

粒子发射器属性

下雨的动效果，就是这个粒子发射器实现的，怎么样？是不是觉得特别easy？粒子发射器的属性有好多，比如可以设置发射器的形状（Emitter Shape）、模式（Emitter Mode）、渲染模式（Render Mode ）等，以及设置粒子的贴图（Contents）、贴图缩放（Contents Scale）、Birthrate（粒子创建速率）、Lifetime（粒子存活时间）等，重点介绍几个属性如下：

1、Emitter Shape（发射器的形状）：选项有point、line、rectangle、circle、cuboid、sphere。

2、Emitter Mode（发射器模式）：选项有points（发射器XY平面中心点发出）、outline（发射器边缘发出）、surface（发射器表面发出）、volume（发射器立体中心点发出）。

3、Render Mode （渲染模式）：选项有unordered（粒子无序出现，多个发射源将混合）、oldestFirst（声明久的粒子会被渲染在最上层）、oldestLast（最新发射的粒子会被渲染在最上层 ）、backToFront（粒子的渲染按照Z轴的前后顺序进行）、Additive（进行粒子混合 ）。

打雷动效

我们还是在左侧layer菜单中，找到“Current Local Conditions”这个图层，之后找到这个层下的“Actions”-》“Mouse Up → Cycle Lightning Strikes”，Cycle Lightning Strikes就是触发打雷的动作

随后我们点击它，可以找到这个动作指向的打雷动作“Lightning Strike 1 -》 Strike”和“Lightning Strike 2 -》 Strike”，如下图：

随后，我们通过“Lightning Strike 1”和““Lightning Strike 2”两个图层下的“Actiions”找到“Strike”，然后可以看到打雷动效为“Show Bolt”。那这个打雷动效是怎样实现的呢？

首页，我们先看下“Lightning Strike 1”图层是什么样子的，如下图，选中的（深蓝色标注）的形状：

Lightning Strike 2与Lightning Strike 1类似，因为是两道闪电，实现方式都一样，就不再一一介绍了。看到这个形状，相信大家进本上已经猜出来打雷的动效是怎么实现的了……没错，就是通过描边实现的，如下图：

在0.05秒内，将strokeEnd由0变为1，此时闪电在0.05秒中显示出来，随后看下图：

pacity是控制闪电的消失，即在0.1459秒后，闪电开始消失，1.3891秒后，闪电消失完毕。第二道（Lightning Strike 1）闪电效果与第一道一样，就不在介绍了。

后续两个动效（上下滑动至“65度”显示或消失、中间不同时间段温度条的左右滑动）很简单就不再做介绍了。

demo源文件下载：
链接:https://pan.baidu.com/s/1ni_9AW8HL2_p_0r9v5snBg

密码:gw8y