本教程翻译自prototypingwithframer，作者Kenny Chen，用户体验设计师。prototypingwithframer是Kenny的博客，会不定期的分享他使用Framer的教程和心得。
当我看见谷歌动效设计师John Schlemmer设计的Inbox无邮件提示动画时，我非常喜欢它的简洁优雅，以及带给我的愉悦感受。我决定用Framer重新设计一个，现在就跟着我一起完成它吧！
下面是我们要做到的实际效果：
对于云朵，创建几个白色的圆盘并合并它们，然后创建一个长方形置于底部，使用减去选项，让云朵有一个笔直的底边。
导入图像之后，你的原型里就可以使用这些图片了。把它们拖放进Framer然后更新一下layers信息，很容易把它们放进来，但你可能要针对图片的尺寸以及动画设置做一些轻微的调整。
sun = new Layer
width: 360, height: 360
opacity: 0
scale: 0
image:"images/sun.png"
cloud = new Layer
x: sun.midX - 50, y: sun.midY
width: 204, height: 122
scale: 0
image:"images/cloud.png"
为了让太阳旋转，我们再次创建一个animation对象。我们可以很简单的改变之前设置的太阳动画属性，但是我们要给他设置一个不一样的动画曲线——缓慢结束（ease-out），动画时间设置为2秒。
animateSunRotate = new Animation
layer: sun
properties:
rotation: 315
curve: "ease-out"
time: 2
把旋转动画加入其他动画开始序列。
animateBg.start()
animateSun.start()
animateSunRotate.start()
animateCloudScale.start()
animateCloudMove.start()
在太阳和云朵显现之后，我们还要创建一个动画，让它们全部逐渐变大并消失。为了达到这个效果，创建一个layer作为容器包含所有layer。
# Hold all layers
container = new Layer
width: 1000, height: 1000
backgroundColor: "transparent"
container.center()
给太阳、云朵和圆盘背景设置父图层。
# Create background circle layer
circleBg = new Layer
width: 480, height: 480
borderRadius: "50%"
opacity: 0.5
scale: 0
backgroundColor: "#FFFFFF"
superLayer: container
circleBg.center()
# Create sun layer
sun = new Layer
width: 360, height: 360
opacity: 0
scale: 0
image:"images/sun.png"
superLayer: container
sun.center()
# Create cloud layer
cloud = new Layer
x: sun.midX - 50, y: sun.midY
width: 204, height: 122
scale: 0
image:"images/cloud.png"
superLayer: container
另一种相反的方式就是我们给这个容器图层设置三个子图层。
一旦太阳转动停止，就要让容器图层的scale逐渐变成0。为了让整体先弹性的放大一点点，我慢慢地尝试，以给它们设置一个合适的动画曲线值。
# Hide container when done
animateSunRotate.on "end", ->
container.animate
properties:
scale: 0
curve: "cubic-bezier(0.6, -0.28, 0.735, 0.045)"
time: .6
这是在Framer中最终的动画效果:
但这不是最完美的，还有很多细节诸如云朵的阴影和移动的方式，但是Framer是为了交互原型而生的，并非制作这种交互动画的。但是对于整个制作过程我很开心，你可以在这里看见原型和全部的代码：http://share.framerjs.com/l1g3n5geop0t。
如果你还没有安装Inbox，那就把它下载下来并清空邮箱来体验一下这个令人愉悦的小动画（你的所有邮件都会被清空哦！还是不要做这么大的牺牲）。如果你善于发现，这个APP中还有很多其他好玩有趣的交互动效。如果你对谷歌的动效和设计理念感兴趣，还可以仔细研读一下材料设计指导。
※本文系原创文章，转载请务必注明：转载自leadream的简书。谢谢！※
网友评论