2：Simple Animations
译者注：从这一章开始，我们开学习一些简单的动画。
让我们打开Framer试着创建一些简单的动画。
创建图层
这段时间我们会先从一个小的矩形开始。
使用 new layer 在屏幕中创建一个新的元素。这是一个很特殊的用于创建对象的函数。如果我们赋予 new layer 一个结果变量，我们就可以通过引用这个结果来操作元素。
square = new Layer
你会在屏幕上看见一个蓝色的矩形。
定制这个矩形这样他就不只是一个扁平的蓝块了，我们可以给 new layer() 赋予一些参数。这个参数是可配置对象，你可以使用不同的属性配置元素，比如宽度、高度、位置和外观。
square = new layer (
width : 200
height : 200
x : 100
y : 100
)
为了让代码可读性更强，我们可以去掉括号。
square = new layer
width : 200
height : 200
CoffeeScript 中有很多例子中我们都可以去掉括号，就像上面这样，有时候这会使代码看起来更简洁。
操作图层
现在我们定义了变量 square 来表示图层，我们可以继续操作它。在我们创建完图层之后，我们可以随时修改：
square.backgroundColor = "red"
square.x = 200
点的句法规则：这是因为 square 是一个对象。它具有 background 属性及许多我们可以操作的其他属性。
你可以操作一个图层的坐标（x,y），还有通过使用大多数CSS属性的camel-cased （camelCased)写法来操作图层外观，也包括一些framer内建属性。例如，color就用color表示，不过border-radius就写成borderRadius。如果你想要旋转一个元素，你可以操作framer提供的rotation属性。FramerStudio会帮你自动创建大多数这样的属性名，你也可以在 docs 中查看他们。
动态图层
让我们来添加第一个动画。为了让一个图层动起来，我们使用animate方法。
square.animate()
.animate() 本身并不会做任何事情。我们需要配置对象（configuration object）来告诉它让什么动起来，并且如何执行动画。一个配置对象会遵循这样的形式：
configObject =
properties :
property : value
property : value
time : 1
curve : "ease"
delay : 2
time、curve 和 delay属性都是可选的，但是你需要指定一个甚至更多属性给嵌套在properties（属性）对象（它是一个嵌套在对象中的对象）中的动画。
例如，如果我们想要一个矩形逐渐消失，我们就可以运用opacity属性。默认情况下，opacity属性会置1，所以我们将其设置为0。
square.animate
properties:
opacity : 0
我们可以很容易一次性转变多种属性：
square.animate
properties:
opacity : 0
x : 400
y : 400
rotation : 180
配置动画
时间相关性的属性（延时和时长）是精确到秒的。默认状态下，动画耗时1秒：
square.animate
properties:
opacity : 0
time : .2
备注：缩进在这里非常重要。opacity（不透明度）是一种属性，所以他需要在properties基础上缩进用以表示从属关系。而time则与properties缩进同样的程度，因为它是动画的一个属性，而不是动画对象的属性。
为了让你的动画更生动，你可以设置曲线运动方式。为了学习更多的运动轨迹（curve），你可以查看easiness.net 和 framer docs。你可以使用内建的渐变字符串例如ease-in（渐入），ease-out（渐出）或者是ease-in-out（渐入渐出），亦或使用docs中更高级的函数，比如bezier-curve（贝塞尔曲线）、spring-dho（弹性曲线，坦白讲这个我不确定更好的翻译是什么，有建议欢迎评论区留言，感谢）。
square.animate
properties :
x : 500
curve : "ease-in"
其他动画示例
你可以运用repeat来让任何动画循环多次，delay可以是你的动画产生延迟，delay是以秒为单位的。
square.animate
properties :
opacity : 0
repeat : 4
delay : 2
截止这篇文章写好后，我看到framer官网已经更新，不过这些基础的知识是不变的，framer官网上也有很多语法或动效设计教程，你可以参阅framer API。下一篇，我们将继续介绍事件。
