动画

newcar 动画的基本原理是在每一帧中不断改变对象的属性。在快速入门中，您已经掌握了 newcar 动画的基本用法。现在让我们深入研究更多细节。

我们都支持哪些动画？我们之前已经了解了内置动画 create，除此之外，newcar 还有许多其他内置动画。以下是常用动画的列表：

• create
• destroy
• rotate
• move
• scale
• zoomIn
• zoomOut
• fadeIn
• fadeOut
• ...

在接下来的内容中，我将带您深入了解动画系统。

步进动画

当您调用 Widget.animate 函数时，它会将您的动画推入一个 等待数组，然后逐步运行所创建的动画。

最简单的动画是 延迟，就像它的名字一样-在某个时间单位内什么都不做。例如，如果您想等待3秒然后运行 创建 动画，您可以编写如下代码：

new Circle(100)
  .animate(delay(3))
  .animate(create().withAttr({ duration: 1 }))

同步动画

如果您想在同一时间轴上同时运行两个以上动画，您可以使用 parallel() 来实现。该函数允许您输入两个以上动画，并同时运行它们。

例如，如果您想让一个圆形运行 创建 动画并且变色，您可以：

new Circle(100)
  .animate(
    parallel(
      create().withAttr({ duration: 1 }),
      discolorate().withAttr({ duration: 1, to: Color.parse('skyblue') })
    )
  )

如果您想插入逐步动画，可以使用 sequence 来制作。

new Circle(100)
  .animate(
    parallel(
      sequence(
        create().withAttr({ duration: 0.5 }),
        fadeIn().withAttr({ duration: 0.5 })
      ),
      discolorate().withAttr({ duration: 1, to: Color.parse('skyblue') })
    )
  )

更改属性

尽管newcar提供了各种可以使用的动画，但它仍旧无法涵盖所有属性，因此 changeProperty API是您的最佳选择。

用法:

circle.animate(
  changeProperty((w) => w.radius).withAttr({
    duration: 1,
    from: 100,
    to: 300
  })
)

缓动函数

在Newcar中，一些功能以 ease 开头拼写，可以控制您的动画速度，我们称之为 缓动。

请使用 by 参数来接收一个缓动函数。

circle.animate(
  create.withAttr({
    duration: 1,
    by: easeBounce
  })
)

缓动函数的曲线图地址: https://www.desmos.com/calculator/yasltaa9um