04-Framer基础-States状态

Dosen原创

开始学习Framerjs，边学边翻译，也加了一些我学习过程中的理解。写下来留作以后查阅，看官如果发现有地方写的不对请指出。转载请联系作者。

---

Animation      动画

Properties of a layer can be animated, including x, y, width, height, scale, opacity, rotation and more. Multiple properties can be animated at once.

层的属性可以被动画，包括x，y，宽，高，缩放，透明度，旋转，等。多种属性的动画可以一起执行。

这段代码给layerA创建了一个透明度变为0.5的动画。

---

---

Timing      时间

You can define the duration of an animation, except when using spring curves. Animations can also be delayed and repeated. All durations in Framer are defined in seconds.

你可以定义一个动画的持续时间，除了当使用弹性曲线时。动画可以添加延迟和重复。在Framer中所有持续都用秒为单位。

这段代码给layerA创建了一个透明度变为0.5的动画。并且使用ease这个预置的动画曲线，动画重复1次，延迟2秒，持续1秒。

---

Curves      曲线

Animations optionally take a curve that describe the type of animation. You can use pre-defined curves like 'linear' or 'ease-in', custom bezier curves and spring animations. Below is an overview of different curves.

动画的类型用曲线来描述。你可以使用预定义曲线，比如“linear”，“ease-in”，自定义贝塞尔曲线和弹性动画。下面是不同曲线的预览。

---

Summary      概要

Multiple properties can be animated at once

多种属性动画可以一起执行。

Animations can be timed, delayed and repeated

动画可以被定义时间，延迟，重复次数。

Framer contains various animation curves, including spring curves

Framer包含多种动画曲线，包含弹性曲线。