ウェブアニメーションでトランスフォームのプロパティを個別にアニメーション化するapi

Question

1つのアニメーションでトランスフォームプロパティの異なる部分を個別にアニメーション化できますか？例えば

：

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>要素の場合）のラッパーを作成する必要がある場合は、ラベラーのおよび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()要素の順序を逆にしたい場合があります。）

：

また、あなたのような何かを書くことができ2つのさらなる手段を介して。

まず、CSS Transforms Level 2はindividual properties for translate and scaleと指定します。これはChromeで実装されていますが、フラグの後ろにのみ存在します。私は近い将来Firefoxに実装されると期待しています。

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で実装されています。

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 
); 

第二に、ウェブアニメーションは次のようにあなたがこれを達成することを可能にする添加剤のアニメーションを定義していますよう

これは、あなたのアニメーションを書くことができるようになりますNightlyビルドでのみ有効になっています。それはChromeでも実装されていると私は信じていますが、実験的なWebプラットフォームの機能フラグの後ろでのみ有効です。私はこれが2018年初頭にブラウザとポリフィルの両方で出荷されることを願っています。