使用 Web 动画独立动画转换属性 api

Question

是否可以在一个动画中独立地对变换的不同部分属性进行动画处理？

例如：

const lineAnimation = [
  { transform: 'scaleX(0)', offset: 0 },
  { transform: 'translateX(0%)', offset: 0 },

  { transform: 'translateX(0%)', offset: .25 },
  { transform: 'scaleX(1)', offset: .5 },

  { transform: 'translateX(100%)', offset: 1 },
]

// Timing object also defined...

loadLine1.animate(
  lineAnimation,
  loadLine1Timing
);

我想在同一动画中为同一元素设置缩放和平移动画，但时间不同。

这个特定示例不起作用，似乎只影响 translateX 而不是比例。

我如何修改它以同时转换两者？

Answer 1

不幸的是，这还不可能。您需要在 loadLine1 元素周围创建一个额外的包装器（例如，如果它是 SVG 元素，则为 <g> 元素，或者如果它是 HTML，则为 <div> 或 <span> 元素），那么你需要在 loadLine1 上对 scale 进行动画处理，在包装器上对 translate 进行动画处理，反之亦然，具体取决于所需的效果。

或者，您可以这样写：

const lineAnimation = [
  { transform: 'scaleX(0) translateX(0%)', offset: 0 },
  { transform: 'scaleX(0.5) translateX(0%)', offset: .25 },
  { transform: 'scaleX(1) translateX(33%)', offset: .5 },
  { transform: 'scaleX(1) translateX(100%)', offset: 1 },
]

loadLine1.animate(
  lineAnimation,
  loadLine1Timing
);

（您可能希望根据所需效果颠倒 scaleX() 和 translateX() 组件的顺序。）

将来这将通过另外两种方式实现。

首先，CSS Transforms Level 2 specifies individual properties for translate and scale。这是在 Chrome 中实现的，但仅在标志后面。预计不久的将来会在Firefox中实现。

这样您就可以将动画编写为：

const lineAnimation = [
  { scale: 0, offset: 0 },
  { translate: '0%', offset: 0 },

  { translate: '0%', offset: .25 },
  { scale: 1, offset: .5 },

  { translate: '100%', offset: 1 },
]

loadLine1.animate(
  lineAnimation,
  loadLine1Timing
);

其次，Web Animations 定义了附加动画，您可以按如下方式实现此目的：

const scaleAnimation = [
  { transform: 'scaleX(0)', offset: 0 },
  { transform: 'scaleX(1)', offset: .5 },
];

const translateAnimation = [
  { transform: 'translateX(0%)', offset: 0 },
  { transform: 'translateX(0%)', offset: .25 },
  { transform: 'translateX(100%)', offset: 1 },
];

loadLine1.animate(
  scaleAnimation,
  loadLine1Timing
);
loadLine1.animate(
  translateAnimation,
  { ...loadLine1Timing, composite: 'add' }
);

这已在 Firefox 中实现，但仅在夜间构建中启用。我相信它也在 Chrome 中实现，但仅在实验性网络平台功能标志之后启用。我希望这将在 2018 年初在浏览器和 polyfill 中发布。

使用 Web 动画独立动画转换属性 api

Independently animating transform properties with web animations api

animation

web-animations