[教程翻译]创建一个Inbox无邮件提示动画

本教程翻译自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的。谢谢！※

[教程翻译]创建一个Inbox无邮件提示动画

你可能感兴趣的:([教程翻译]创建一个Inbox无邮件提示动画)