0

是否可以在一个动画中独立地为变换属性的不同部分设置动画？

例如：

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 而不是规模。

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

4

1 回答 1

1

不幸的是，这还不可能。您需要在您的loadLine1元素周围创建一个额外的包装器（例如，如果它是一个 SVG 元素、一个<g>元素，或者它是 HTML、a<div>或<span>元素），那么您需要在包装器上设置动画scale，loadLine1反之亦然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为和指定了单独的属性translatescale。这是在 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 中实现，但仅在 Nightly 构建中启用。我相信它也在 Chrome 中实现，但仅在实验性网络平台功能标志后面启用。我希望这将在 2018 年初在浏览器和 polyfill 中发布。

于 2017-10-23T03:38:11.937 回答