Animation indépendante des propriétés de transformation avec des animations web api

Question

Est-il possible d'animer indépendamment les différentes parties de la propriété transform dans une animation?

par exemple:

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

Je voudrais animer l'échelle et à la traduction dans la même animation pour le même élément, mais à des moments différents.

Cet exemple particulier ne fonctionne pas et semble affecter uniquement le translateX et non l'échelle.

Comment pourrais-je modifier cela pour transformer les deux à la fois?

Answer 1

Malheureusement, ce n'est pas encore possible. Vous devez créer une enveloppe supplémentaire autour de votre élément loadLine1 (par exemple, si elle est un élément SVG, un élément <g>, ou si elle est HTML, un élément <div> ou <span>), alors vous devez animer scale sur loadLine1 et translate sur l'emballage ou vice-versa selon l'effet désiré.

Sinon, vous pouvez écrire quelque chose comme:

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

(. Vous pouvez inverser l'ordre des composants scaleX() et translateX() en fonction de l'effet désiré)

À l'avenir, ce sera possible via deux autres moyens.

Premièrement, CSS Transforms Level 2 spécifie individual properties for translate and scale. Ceci est implémenté dans Chrome mais seulement derrière un drapeau. Je m'attends à ce qu'il soit implémenté dans Firefox dans un proche avenir.

Cela vous permettra d'écrire votre animation comme:

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

En second lieu, des animations Web définit l'animation additif qui vous permettra d'atteindre cet objectif comme suit:

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

Ceci est mis en œuvre dans Firefox mais seulement activé dans les versions Nightly. Il est également mis en œuvre dans Chrome, je crois, mais seulement activé derrière le drapeau des fonctionnalités de la plate-forme Web expérimentale. J'espère que cela sera livré dans les deux navigateurs et le polyfill au début de 2018.