Priniciple 教程二：爱心点赞效果

这次的动画是一个展现细节的微交互动效，在社交、内容阅读等应用领域广泛出现——点赞效果。

看上去很简单，我们分析下动画过程：

1. 点击灰色爱心，心被点亮为红色并从中心扩张，同时紫色圆圈出现，彩色圆点从中心爆出；

2. 圆圈和彩点消失，红心恢复为第一帧大小，动效完成。

我想从每一帧artboard来分析动画效果，这样可以更好地拆分动画，清晰地展示过渡和实现的过程。

第一帧：灰色爱心

由于第一个“点亮”动画中，外层紫色圆圈和彩点有渐入和扩张效果，因此在第一帧中就已经存在。将其透明度设为0%, 为隐藏图层。

彩色圆点的扩张效果，其实就是隐藏的圆点在X, Y 上产生的变化，从画板的中心移动到了边缘。因此，在第一帧中拖动这些圆，聚集在灰色爱心以内。

第二帧：点亮的爱心

第三帧：还原的红色爱心

二、三两帧都比较简单，第二帧中将爱心体积扩大，第三帧中还原大小，其它图层隐藏即可。

注意，为了使视线放在爱心上，周围用作渲染的彩电和圆圈的动效时间比较短，消失较快，而爱心的时间长，还原较慢：

爱心点赞动效就做好了。

原型请见：https://pan.baidu.com/s/1pL19E4r

密码：j7r8