Une introduction à Framer Motion. Un regard critique sur la documentation plus… | par Jon Middaugh | Meilleure programmation | Octobre 2020

Online Coding Courses for Kids

Le cœur de Framer Motion est composé de deux choses: animer (le quoi faire) et la transition (le Comment pour le faire).

Vous pouvez empiler des animations et des transitions pour se produire simultanément. Alternativement, vous pouvez donner l’illusion d’animations consécutives, comme ci-dessous avec cette balle rebondissante:

(L’agitation avec l’animation est due à la surcharge de CodeSandbox. Les animations de Framer Motion sont super fluides.)

Les valeurs de tableau ci-dessous sont interprétées comme une série d’images clés par Framer Motion et seront animées en séquence.

Ce rebond en trois parties est créé en animant le y, largeur et hauteur de la balle. Toutefois, la largeur et la hauteur ne changent pas avant l’image clé finale. À ce stade, le y ne change que pour donner l’impression du squish en bas du rebond.

style={ballStyle}
transition={{
y: transitionValues,
width: transitionValues,
height: transitionValues
}}
animate={{
y: ["2rem", "8rem", "10rem"],
width: ["5rem", "5rem", "6rem"],
height: ["5rem", "5rem", "4rem"]
}}
/>

Jetons un œil à transitionValues:

const transitionValues = {
duration: 0.8,
yoyo: Infinity,
ease: "easeOut"
}

le yoyo valeur est une propriété de transition Framer Motion personnalisée qui permet à une animation de se poursuivre indéfiniment et inverse également l’animation. Ceci est utile pour réduire les images clés requises pour l’effet de rebond.

Close Menu