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

square.animate
  properties :
    x : 500
  curve : "ease-in"

其他动画示例

你可以运用repeat来让任何动画循环多次，delay可以是你的动画产生延迟，delay是以秒为单位的。

square.animate
  properties :
    opacity : 0
  repeat : 4
  delay : 2