Unabhängig animieren Transformationseigenschaften mit Web-Animationen api

Question

Ist es möglich, die verschiedenen Teile der Transform-Eigenschaft unabhängig voneinander in einer Animation zu animieren?

zum Beispiel:

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

Ich mag würde Skalierung und Übersetzung in der gleichen Animation für das gleiche Element animieren, aber zu unterschiedlichen Zeitpunkten.

Dieses spezielle Beispiel funktioniert nicht und scheint nur das translateX und nicht die Skala zu beeinflussen.

Wie könnte ich dies ändern, um beides gleichzeitig zu transformieren?

Answer 1

Das ist leider noch nicht möglich. Sie benötigen einen zusätzlichen Wrapper um Ihre loadLine1 Element zu erstellen (zB wenn es sich um ein SVG-Element ist, ein <g> Element, oder wenn es HTML ist, ein <div> oder <span> Element), dann müssen Sie scale auf loadLine1 und translate auf der Verpackung animieren oder umgekehrt, je nach gewünschtem Effekt.

Alternativ könnte man so etwas schreiben:

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

In Zukunft wird dies möglich sein (. Sie können die Reihenfolge der scaleX() und translateX() Komponenten je nach dem gewünschten Effekt umkehren wollen) über zwei weitere Mittel.

Zuerst gibt CSS Transforms Level 2individual properties for translate and scale an. Dies ist in Chrome implementiert, aber nur hinter einer Flagge. Ich erwarte, dass es in naher Zukunft in Firefox implementiert wird.

Dies würde ermöglichen es Ihnen, Ihre Animation zu schreiben, wie:

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

Zweitens Web Animationen additive Animation definiert, die Sie dies zu erreichen, würde es wie folgt:

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

Das in Firefox implementiert aber nur in Nightly Builds aktiviert. Es ist auch in Chrome implementiert, glaube ich, aber nur hinter der experimentellen Web-Plattform Features Flagge aktiviert. Ich hoffe, dass dies in beiden Browsern und dem Polyfill Anfang 2018 geliefert wird.