使用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和translate上设置scale的动画，反之亦然，具体取决于所需的效果。

或者，你可以写一些类似的东西：

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为translate和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动画定义了附加动画，这将允许您实现以下目标：

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中实现，但仅在Nightly版本中启用。我相信，它也在Chrome中实现，但只是在实验性网络平台功能标志之后才启用。我希望这将在2018年初在浏览器和polyfill中发布。