Priniciple 教程二:爱心点赞效果

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

看上去很简单,我们分析下动画过程:

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

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


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


第一帧:灰色爱心


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


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


第二帧:点亮的爱心


第三帧:还原的红色爱心



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


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


爱心点赞动效就做好了。

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

密码:j7r8

推荐阅读更多精彩内容

  • 【说明:本文是从Principle官网翻译过来的,因个人能力和水平有限,部分术语可能不准确,对软件功能的理解也可能...
    shea阅读 27,448评论 26 101
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 131,904评论 20 560
  • 这是一个真实的故事。在夏威夷莫纳罗亚火山山顶上一个孤立的网格穹顶形建筑里面,六名精选的研究人员生活在一起。...
    译嘉阅读 71评论 0 1
  • 认识Less 1.首先它是干嘛的 2.如何配置它 3.用sublime编辑器如何让它的代码高亮,提升编码质量 4....
    Alleyine阅读 126评论 0 1
  • by/木予 迪儿,我的发小,虽然好久没有见面聊天,但从小长大的情谊,让我们一直都在乎彼此。 她个性张扬,讨人喜爱,...
    不想被找到的大黄阅读 211评论 2 4