动画 Animate丨Framer 文档 Code

Code

几乎所有的图层属性都可以做动画，同一个动画中可以定义多个属性。完了还能定义动画的属性，事件、曲线、延迟等。

开始 Get Started

从定义图层的不透明度开始了解动画吧。先给图层加 animate 标签，表示我要给这个图层加动画啦，然后再设置动画要咋动。

# 图层layerA的动画是不透明度50%
layerA.animate
  opacity: 0.5

选项 Options

动画可以被完全按照你想要的定制，改变动画选项如时间、曲线和延迟。下边儿这个表里面有动画可以调节的选项：

• time（几秒内）
• curve（贝塞尔曲线、弹性）
• delay（几秒内）
• repeat（次数）
• colorModel（颜色模式rgb、hsl、husl）

Framer的动画持续时间以秒为单位。关键字 options 用来定义动画选项，在 options 下一行缩进，表示 “现在写的是动画选项哦～”

# 加了曲线的动画
layerA.animate
  rotation: 180
  borderRadius: 200
  options:
    curve: Bezier.ease
    time: 1

这段代码翻译过来就是：
layerA的动画
旋转：180度
描边：200pt
动画选项：
曲线：贝塞尔曲线的缓进缓出
持续时间： 1 秒

缓动曲线 Easing Curves

动画曲线还有挺多种可以选的，像线性Bezier.linear、缓进缓出Bezier.ease，缓进缓出Bezier.ease是Framer的默认曲线，不另外设置的话就是这个。查看去全部的曲线标签和用法查看这儿。

• Bezier.ease
• Bezier.easeIn
• Bezier.easeOut
• Bezier.easeInOut

# 使用 ease 曲线的动画
layerA.animate
 scale: 0.75
 options: 
   curve: Bezier.ease
   delay: 0
   time: 1

弹性曲线 Spring Curves

弹性曲线可以让动画看上去符合真实物理规律。弹性动画中的弹力可以用 damping 定义，仍然允许定义动画时长time。

layerA.animate
  scale: 0.75
  options: 
    curve: Spring(damping: 0.5)
    time: 0.5