之前的Framer教程都是按照个人喜好去写的，没有按照难易程度形成系列。为了让大家能更好地入门，我准备由易到难写一个系列教程，尽量保持在每周一篇的频率。

导读：状态和图层、动画一样也是一个对象，它包含了一个图层的位置、颜色、大小等信息。状态可以看做是动画的节点，而动画可以看做不同状态间的过渡。我们可以给一个图层定义不同的状态，当它在不同状态之间变换时就形成了动画。图层、动画和状态是Framer的三个基本要素。

六个月前，instagram更换了新logo。

这里我们不讨论这个变化的好坏，我想教大家的是如何用Framer动态演示这个logo的变换过程。它的思路很简单，就是通过Framer来绘制这些logo的元素，再将它们的一些元素一一对应，就可以通过状态之间的转换来展示动态变化。看图理解一下：

在教程之前，先简单介绍一下状态。状态可以看做动画的节点，图层在不同状态下会有不同的外观样式。

状态的定义包含了一系列属性和属性值，比如给图层lens定义一个新状态stateA，就可以这样写。下面的一系列属性和属性值对定义了它在stateA下所展现的样子。

Framer提供了三种切换状态的方法：

在这个教程里我们通过Framer来绘制instagram的logo，再将新旧logo的元素进行对应，我大概画了一下它们之间的对应关系。左边这个logo元素有点多，我们可以不用完全照着画出来，有些小细节可以不画。不能对应的部分，可以在变化过程中直接隐去，比如那个棕色的色块和彩虹条。右边的渐变背景用代码实现有点复杂，我们就直接做一张图贴上去。

我们先绘制新旧logo的背景，旧logo的背景是浅灰色的圆角方块，而新logo则是一个渐变色方块。我们把新logo背景放在旧logo背景下面，演变时只需要将旧logo背景逐渐隐去就可以显示出新logo的渐变色背景。

我们给新logo背景命名为newBg，而旧logo背景命名为instagram。instagram将会作为所有元素的父图层，方便它们一起移动。再通过 center( ) 方法将它们俩放置在屏幕正中央。需要注意的是instagram有一个特别的 clip 属性被设置为 true ，表示它会自动裁切超出区域部分。当它的某个子图层太大以至于超出这个圆角方块时超出部分将不会显示。

接下来绘制棕色的色块，并使用循环绘制出彩虹条。我们使用两个数组分别来存储四个彩虹条和四个彩虹色，使用 rainbow = [ ] 来表示 rainbow 是一个数组，为后面存储四个彩虹条图层做准备；而 rainbowColors 表示四个颜色，直接写在中括号中。 for i in [0..3] 表示i从0开始，循环4次到i变成3，i每次加1时通过 rainbow[i] = new Layer 来新建一个图层，并将该图层存储在数组 rainbow 中。比如循环第一遍时i就等于0，那么 rainbow[0] 就存储了第一个彩虹条图层。

我们通过观察彩虹条发现，他们的y坐标一致，x坐标是变的，因此x坐标可以通过i来进行变化， 8+i*8 表示每当i加1时，x坐标就要增加8，也就是它的宽度。这样四个彩虹条就可以并排排列在一起了。同时 backgroundColor 通过对应的 rainbowColors[i] 就可以让四个条的颜色不一致。

接着画出三个环，也就是旧logo上的几个镜头。调整他它们的背景颜色、圆角半径、描边宽度等，使其最终呈现为旧logo的样子。

接着给每一个图层添加新状态 whatGhost ，让它们在该状态下表现出新logo的样子。比如将 instagram 的背景变成 transparent （透明）， outerRing 变成方形等等。

最后，给 instagram 添加一个点击事件，使它被点击后所有元素在默认状态和 whatGhost 状态之间循环往复，就可以看到我们想要的效果啦。

最后我们总结一下Framer状态的几个要点：

1、状态可以看做动画的节点
2、一个新状态对应图层的新的样式外观
3、使用animate( )动画式切换状态，使用stateSwitch( )直接切换，使用stateCycle( )在状态间循环往复

点击这里，获取源文件。

转载请注明来自leadream的简书，不注明视为抄袭，追究到底