本教程翻译自prototypingwithframer，作者Kenny Chen，用户体验设计师。prototypingwithframer是Kenny的博客，会不定期的分享他使用Framer的教程和心得。
当我看见谷歌动效设计师John Schlemmer设计的Inbox无邮件提示动画时，我非常喜欢它的简洁优雅，以及带给我的愉悦感受。我决定用Framer重新设计一个，现在就跟着我一起完成它吧！
下面是我们要做到的实际效果：
我们先尽量使用Framer的layers来画这些元素。
首先，设置背景为天蓝色。
# Set background to sky color
new BackgroundLayer
backgroundColor: "#669CF5"
接着创建一个白色的圆形layer，把它置于屏幕中间，设置0.5的透明度。为了把它变成圆形，要设置它的“borderRadius”即半径为50%。
# Create background circle layer
circleBg = new Layer
width: 480, height: 480
borderRadius: "50%"
opacity: .5
backgroundColor: "#FFFFFF"
circleBg.center()
创建另一个略微小一些的圆，这一次是黄色的，同样把它放在正中间作为太阳。
# Create sun layer
sun = new Layer
width: 360, height: 360
borderRadius: "50%"
backgroundColor: "#fbe450"
sun.center()
现在开始画云朵，创建一个长方形的layer，把它的起始位置放在太阳的中心点。
# Create cloud layer
cloud = new Layer
x: sun.midX, y: sun.midY
width: 204, height: 122
backgroundColor: "#ffffff"
目前为止，我们的成果是这样的：
现在我们就有了最基本的元素设定，接下来就开始做动画效果啦。这个白色圆盘的动效是不断扩大直到消失，我们回到创建白色圆盘代码处，设置它的初始scale为0。
circleBg = new Layer
width: 480, height: 480
borderRadius: "50%"
opacity: .5
scale: 0
backgroundColor: "#FFFFFF"
接下来创建一个animation对象，让这个白色圆盘的scale属性变大两倍，同时透明度变到0。我给这个动画设置运动时间为0.5，运动曲线为linear，但是我建议你去尝试不同的运动曲线和运动时间，去发现你自己喜欢的属性设置。
animateBg = new Animation
layer: circleBg
properties:
scale: 2
opacity: 0
curve: "linear"
time: .5
回到太阳的代码处，给它的初始属性的scale和opacity都设置为0。
sun = new Layer
width: 360, height: 360
borderRadius: "50%"
backgroundColor: "#fbe450"
scale: 0
opacity: 0
创建一个新的animation对象，把scale和opacity都设置为1。由于太阳现在还只是一个纯色的圆盘，我们还感受不到太阳的转动。
animateSun = new Animation
layer: sun
properties:
scale: 1
opacity: 1
就像作为背景的白色圆盘和太阳一样，把云朵的scale设置为0并创建一个新的animation对象使它的scale从0逐渐变到1。
cloud = new Layer
x: sun.midX, y: sun.midY
width: 204, height: 122
scale: 0
backgroundColor: "#ffffff"
animateCloudScale = new Animation
layer: cloud
properties:
scale: 1
我们还想让云朵移动一点，所以设置它的x坐标比现在向左偏移50像素，创建另外一个animation对象，使它移动到初始的点。
cloud = new Layer
x: sun.midX - 50, y: sun.midY
width: 204, height: 122
scale: 0
backgroundColor: "#ffffff"
这里我们新设置了一个animation对象，而不是继续使用云朵的scale动画，原因是云朵移动的动画有一点点延迟。
animateCloudMove = new Animation
layer: cloud
properties:
x: sun.midX
delay: 0.2
这里还有一个小细节——云朵的scale变化动画是从左下角开始变化的，所以我们要设置它的动画起始点的x、y坐标。在Framer里面，默认的动画起始点是layer的中心点，即其值皆为0.5。值为0代表变化起始点是顶部或左边，值为1代表变化起始点是底部或右边。把originX设置为0，originY设置为1，就可以让它以左下角为中心变化。
# Set origin to animate from to bottom left
cloud.originX = 0
cloud.originY = 1
为了让太阳和云朵出现时有一点弹性效果，我们给它们设置一个弹性曲线。简便起见，我们就在代码最上面给他们一个统一的弹性曲线。你可以尝试给它们设置不同的张力、摩擦和速度值，直到找到一个适合你的。在这里我把它们设为张力80、摩擦12、速度0。
# Set default curve
Framer.Defaults.Animation =
curve: "spring(80, 12, 0)"
为了让动画开始播放，我们需要调用所有创建对象的动画开始函数。
animateBg.start()
animateSun.start()
animateCloudScale.start()
animateCloudMove.start()
现在你的动画效果应该是像这样的：
此时，我们可以制作太阳和云朵的图片并调节它们的动画。
先使用Sketch或者Ps来制作太阳。创建两个同样大小的正方形，给他们设置一个渐变颜色，再把其中一个旋转45度。然后创建一个圆盘覆盖在上面，太阳就出来啦。
对于云朵，创建几个白色的圆盘并合并它们，然后创建一个长方形置于底部，使用减去选项，让云朵有一个笔直的底边。
导入图像之后，你的原型里就可以使用这些图片了。把它们拖放进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的简书。谢谢！※
