动画

newcar 动画的基本原理是在每一帧中持续改变对象的一个属性。在快速入门中，你已经掌握了 newcar 动画的基本用法。现在让我们更深入地了解。

如何定义一个动画？我们之前已经学习了内置动画 create，除此之外，newcar 还有很多其他内置动画。以下是一些常用动画的列表：

  • create（创建）
  • destroy（销毁）
  • rotate（旋转）
  • move（移动）
  • scale（缩放）
  • zoomIn（放大）
  • zoomOut（缩小）
  • transparency（透明度）
  • fadeIn（淡入）
  • fadeOut（淡出）
  • …

然而，这些动画并不能涵盖 Widget 的所有属性和样式。在 newcar 的古老版本中，我们为每个属性编写了相应的动画，这导致打包后的捆绑包大小异常庞大，这是得不偿失的。newcar 的新版本使用 changeProperty API 和 changeStyle API 来改变对象的属性或值。changeProperty 和 changeStyle 的使用方式相同，区别在于一个改变属性，另一个改变对象的样式。

  1. widget.animate(changeProperty("x", 0, 100));
  2. // 或者
  3. widget.animate(changeProperty("x"), {
  4.   from: 0,
  5.   to: 120
  6. });

changeProperty 和 changeStyle 也可以同时改变多个值：

  1. widget.animate(changeProperty(["x", "y"], [0, 0], [100, 200]));
  2. // 或者
  3. widget.animate(changeProperty("x"), {
  4.   from: [0, 0],
  5.   to: [100, 200]
  6. });

animate 的第四个参数可以包含一个 by 字段，用于设置动画的缓动曲线。

Newcar 标准库提供了多种缓动曲线，都以 ease 开头，你可以通过代码提示或查看函数的图形来选择。

缓动曲线图形地址：https://www.desmos.com/calculator/yasltaa9um（请注意，由于网络或其他原因，上述链接可能无法成功解析，如果需要该网页的内容，请检查网页链接的合法性并适当重试。）

关于缓动曲线，它们是动画中用于描述速度变化的函数，可以让动画看起来更自然。常见的缓动曲线有：

  • ease-in：开始时速度慢，然后加快
  • ease-out：开始时速度快，然后减慢
  • ease-in-out：开始和结束时速度慢，中间加快

通过使用不同的缓动曲线，你可以创造出更加丰富和逼真的动画效果。