Skip to content

动画

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

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

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

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

步进动画

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

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

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

同步动画

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

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

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

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

ts
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是您的最佳选择。

用法:

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

缓动函数

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

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

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

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

Released under the Apache-2.0 license