使用网页动画api独立动画变换属性

Question

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

例如：

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>元素），那么你需要在包装动画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指定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 
); 

其次，网络动画定义添加剂动画这将让你实现这个如下：

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中实现，但只在实验性Web平台功能标志背后启用。我希望这会在2018年初在浏览器和polyfill中发布。