Catégories
Astuces et Design

Présentation de Framer Motion – Smashing Magazine

A propos de l'auteur

Nefe est un développeur frontend qui aime apprendre de nouvelles choses et partager ses connaissances avec les autres.
Plus à propos
Nefe

Les animations, lorsqu'elles sont bien faites, sont puissantes. Cependant, créer des animations accrocheuses avec CSS peut être délicat. En vient Framer Motion. Avec Framer Motion, vous n'avez pas besoin d'être un expert CSS pour créer de belles animations. Framer Motion nous fournit des animations prêtes pour la production et une API de bas niveau avec laquelle nous pouvons interagir pour intégrer ces animations dans nos applications.

Dans cet article, nous allons examiner de plus près comment Framer Motion nous aide à créer des animations impressionnantes. Nous allons découvrir le fonctionnement des composants de mouvement et comment enchaîner des animations. Nous verrons comment créer des animations déclenchées par des gestes, chronométrées et défilées avec Framer motion. En cours de route, nous utiliserons les connaissances acquises pour créer cinq applications de démonstration que j'ai configurées pour nous montrer comment intégrer Framer Motion dans des applications du monde réel.

Ce tutoriel sera utile aux lecteurs intéressés par l'intégration d'animations dans leur application React.

Remarque: Cet article nécessite une compréhension de base de React et CSS.

Qu'est-ce que Framer Motion?

Framer Motion est une bibliothèque d'animations qui facilite la création d'animations. Son API simplifiée nous aide à résumer la complexité des animations et nous permet de créer facilement des animations.

Composants de mouvement

Ce sont les éléments constitutifs du mouvement Framer. Les composants de mouvement sont créés par préfixe motion à votre élément HTML et SVG habituel (par exemple, motion.h1). Les composants de mouvement peuvent accepter plusieurs accessoires, le principal étant le animate soutenir. Cet accessoire prend dans un objet où nous définissons les propriétés de ce composant que nous voulons animer. Les propriétés que nous définissons seront animées lors du montage du composant dans le DOM.

Animons un texte h1 à l’aide de Framer Motion. Tout d'abord, nous installons la bibliothèque framer-motion et importons motion.

npm i framer-motion
import { motion } from 'framer-motion';

Ensuite, nous convertissons le h1 en un composant de mouvement.


  This is a motion component

Cela provoquera le h1 pour faire glisser 20px vers la droite et déplacer 20px vers le haut lors du chargement. Lorsque les unités ne sont pas ajoutées, les calculs sont effectués à l’aide de pixels. Cependant, vous pouvez définir explicitement les unités sur lesquelles vous souhaitez que les calculs soient basés, animate={{x: "20rem", y: "-20rem"}}>.

Par défaut, un composant de mouvement sera animé de l'état défini à partir de ses styles vers ceux du animate soutenir. Cependant, si nous le voulions, nous pourrions détourner et définir l'état d'animation initial du composant en utilisant le initial soutenir. Tandis que le animate prop permet de définir le comportement des composants lors de leur montage, le initial prop définit leur comportement avant leur montage.

Si nous voulons que notre h1 vienne de la gauche, nous le contrôlons en utilisant l'accessoire initial.


   This is a motion component

Maintenant, quand le h1 monte, il se glisse par la gauche.

Nous ne sommes pas limités à une seule animation. Nous pouvons définir une série d'animations appelées keyframes dans un tableau de valeurs. Chaque valeur sera animée en séquence.


   This is a motion component

le transition prop nous permet de définir comment les animations se produisent. Avec lui, nous définissons comment les valeurs s'animent d'un état à un autre. Entre autres, nous pouvons définir le duration, delay, et type d'animation à l'aide de cet accessoire.


    This is a motion component

Supposons que nous devions animer plusieurs composants de mouvement simultanément, comme dans l'extrait de code ci-dessous.

This is a motion h1 This is a motion h2 This is a motion h3 This is a motion h4

Bien que cela fonctionne, le variants prop dans Framer Motion nous permet d'extraire nos définitions d'animation dans un objet de variantes. Non seulement faire variants rendent notre code plus propre, mais ils nous permettent de créer des animations encore plus puissantes et complexes.

En extrayant nos définitions d'animation en objets variantes, nous avons ceci:

const H1Variants = {
  initial: { x: -1000 },
  animate: { x: 0 },
  transition: {
    type: "tween",
    duration: 2,
    delay: 1
  }
} 
const H2Variants = {
  initial: { y: -1000 },
  animate: { y: 0 },
  transition: {
    type: "tween",
    duration: 1,
    delay: .4
  }
}
const H3Variants = {
  initial:{ x: 100, opacity: 0 },
  animate:{ x: 0, opacity: 1 }
}
const H4Variants = {
  initial:{ scale: 0.7 },
  animate:{ scale: 1.7 },
  transition:{
    type: "tween",
    duration: "2",
    delay: "1"
  }
}

Au lieu de transmettre les définitions d'animation dans un composant initial et animate props directement, nous extrayons ces définitions dans des objets variantes autonomes. Dans les objets de variante, nous définissons des noms de variante qui décrivent le nom de chaque animation comme des variantes.

This is a motion h1 This is a motion h2 This is a motion h3 This is a motion h4

dans le variants prop, on passe le nom des objets variantes pour chaque composant de mouvement puis on passe les animations au initial et animate accessoires.

Nous pouvons pousser plus loin notre configuration actuelle avec des variantes pour réduire les répétitions. En utilisant des variantes, nous pouvons propager les attributs d'animation dans le DOM à partir d'un composant de mouvement parent. Pour que cela fonctionne, nous créons des variantes pour le parent motion.div avec des noms d'animation similaires dans son objet variant comme ses enfants. Ce faisant, nous n’aurons pas à transmettre les noms d’animation à chaque composant enfant. Dans les coulisses, l'élément parent gère cela pour nous.

const ContainerVariants = {
  initial: {},
  animate: {}
};
const H1Variants = {
  initial: { x: -1000 },
  animate: { x: 0 },
  transition: {
    type: "tween",
    duration: 2,
    delay: 1
  }
};
//more variants below


      This is a motion h1
      This is a motion h2
      This is a motion h3
      This is a motion h4

Nous avons maintenant un code plus propre sans répétitions. Nous avons transformé le conteneur div en un composant de mouvement afin que nous puissions passer dans le ContainerVariants objet que nous avons défini. Comme nous ne définissons aucune animation sur le conteneur, nous transmettons des objets vides à initial et animate. Les noms de vos animations doivent être les mêmes dans chaque objet de variante pour que la propagation fonctionne.

Nous comprenons maintenant les bases de Framer Motion. Commençons par créer notre première liste de 5 applications de démonstration.

Boutique d'icônes

Nous pouvons créer des animations interactives basées sur des gestes. Les composants de mouvement peuvent actuellement écouter la détection des mouvements de survol, de tapotement, de panoramique et de glissement. Nous allons créer cette application Icon Shop en utilisant le whileHover soutenir.

Composants

  • App.js: ceci contient les textes d'en-tête.
  • Card.jsx: ici, nous définissons les animations des cartes icônes.
  • CardContainer.jsx: nous importons et parcourons les icônes.
  • styles.js: créez, stylisez et exportez les composants de mouvement. J'ai utilisé des composants stylisés pour styliser les composants.

Commençons avec App.js.

import { H1, H2 } from "./Styles";
import CardContainer from "./CardContainer";

  return (
    

Icon Shop

Hover over the cards to see the motion magic

);

Nous importons le H1 et H2 composants de mouvement que nous avons créés dans Styles.js fichier. Puisqu'il s'agit de composants de mouvement, nous utilisons le initial et animate accessoires pour définir leur comportement avant et quand ils montent. Ici, nous importons et affichons également le CardContiner composant.

Maintenant le CardContainer.js.

import { Container } from "./Styles";
import Card from "./Card";
import { ReactComponent as AddIcon } from "./assets/add.svg";
import { ReactComponent as AirplaneIcon } from "./assets/airplane.svg";
import { ReactComponent as AlarmIcon } from "./assets/alarm.svg";
//more svg imports below...

const icons = (
  ,
  ,
  ,
  //more icons below
);

const CardContainer = () => {
  return (
    
      {icons.map((icon) => (
        
      ))}
    
  );
};

Ici, nous importons les SVG, les Container composant de mouvement et le Card composant.

Semblable à H1 et H2 dans App.js, nous définissons des animations du Container en utilisant le initial et animate accessoires. Lorsqu'il se charge, cela créera un effet sympa de glisser depuis la gauche du navigateur.

Maintenant, Card.js

import { CardBox, IconBox } from "./Styles";
const CardVariants = {
  beforeHover: {},
  onHover: {
    scale: 1.1
  }
};
const IconVariants = {
  beforeHover: {
    opacity: 0,
    y: -50
  },
  onHover: {
    opacity: 1,
    y: 0,
    scale: 1.5,
    transition: {
      type: "tween"
    }
  }
};

const Card = ({ icon }) => {
  console.log(icon);
  return (
    
      {icon}
    
  );
};

Ici, nous créons deux objets variantes avec beforeHover et onHover animations. dans le CardVariants objet, nous ne voulons rien faire au départ, donc beforeHover est un objet vide. onHover nous augmentons l'échelle de la boîte à cartes.

dans le IconVariants objet, nous définissons l'état initial du IconBox dans son beforeHover. Nous définissons son opacité sur 0 et la poussons vers le haut de 50 pixels. Puis dans onHover, nous remettons l'opacité à 1, la repoussons à sa position par défaut et changeons le type de transition en tween. Ensuite, nous passons les variantes à leurs composantes de mouvement respectives. Nous utilisons la propagation, nous n'avons donc pas besoin de définir explicitement le initial et animate accessoires à la IconBox composant.

Barre de navigation animée

Nous allons créer un composant de navigation simple et nous verrons comment nous pouvons créer des relations temporelles entre les composants de mouvement parents et enfants.

Composants

  • App.js: ceci contient les textes d'en-tête.
  • Styles.js: créez, stylisez et exportez les composants de mouvement. Les composants sont stylisés à l'aide de composants stylisés.

Jetons un coup d'œil à la App.js fichier.

import { Header, Nav, Link, SvgBox } from "./Styles";

function App() {
  const (isOpen, setIsOpen) = useState(false);
  const iconVariants = {
    opened: {
      rotate: 135
    },
    closed: {
      rotate: 0
    }
  };
  const menuVariants = {
    opened: {
      top: 0,
      transition: {
        when: "beforeChildren",
        staggerChildren: 0.5
      }
    },
    closed: {
      top: "-90vh"
    }
  };
  const linkVariants = {
    opened: {
      opacity: 1,
      y: 50
    },
    closed: {
      opacity: 0,
      y: 0
    }
  };

Nous créons un isOpen état qui sera utilisé pour vérifier si la Navbar est ouverte ou non. Nous créons 3 objets variantes, iconVariants, menuVariants, et linkVariants où nous définissons les animations pour le SvgBox, Nav, et Link composants de mouvement respectivement. le iconVariants est utilisé pour faire pivoter le SvgBox 135deg quand il a survolé. Nous n'avons pas besoin d'ajouter «deg» à la valeur. dans le menuVariants, nous contrôlons la position haute du Nav comme vous le feriez avec position propriété en CSS. Nous basculons la position supérieure du Nav basé sur isOpen Etat.

Avec des variantes, nous pouvons créer des relations de synchronisation entre les composants de mouvement parents et enfants. Nous définissons la relation entre parent Nav et son enfant, Link en utilisant le when propriété dans l'objet de transition. Ici, réglez-le sur beforeChildren, de sorte que les animations du composant parent se termineront avant le début de l’animation de l’enfant.

En utilisant le staggerChildren propriété, nous définissons un ordre de synchronisation pour chaque lien. Chaque lien prendra 0,5 seconde pour apparaître l'un après l'autre. Cela crée un bon signal visuel lorsque le Nav est ouvert. dans le linkVariants nous animons l'opacité et la position verticale de chaque lien.

setIsOpen(!isOpen)} >

Ici, nous passons les variantes à leurs composants respectifs. dans le SvgBox, nous basculons l'état de isOpen chaque fois que vous cliquez dessus, animez-le sous condition en fonction de l’état. Comme le SvgBox, nous animons conditionnellement le Nav et le Links basé sur isOpenÉtat de.

Modal animé

Nous allons créer un composant modal et en apprendre davantage sur Framer Motion AnimatePresence, et comment cela nous permet d'animer des éléments lorsqu'ils quittent le DOM.

Composants:

  • App.js: nous mettons en place le showModal état ici.
  • Modal.jsx: le travail d'animation proprement dit a lieu ici.
  • Styles.js: créez, stylisez et exportez les composants de mouvement. Les composants sont stylisés à l'aide de composants stylisés.

Examinons App.js

import { ToggleButton, Container } from "./Styles";
import Modal from "./Modal";

function App() {
  const (showModal, setShowModal) = useState(false);
  const toggleModal = () => {
    setShowModal(!showModal);
  };
  return (
    
      
        Toggle Modal
      
      
    
  );
}

Nous créons un showModal état qui sera utilisé pour rendre conditionnellement le modal. le toggleModal la fonction bascule l'état chaque fois que la ToggleButton est cliqué. ToggleButton est un composant de mouvement, nous pouvons donc définir des animations pour lui. Lorsqu'il monte, il se glisse par la gauche. Cette animation dure 0,5 seconde. Nous passons également dans le showModal état au Modal à travers des accessoires.

Maintenant, Modal.jsx

import { AnimatePresence } from "framer-motion";
import { ModalBox, ModalContent, Container } from "./Styles";


  
    {showModal && (
      
        
           Modal content!!!!
        
      
    )}
  

Nous importons AnimatePresence de framer-motion. Cela nous permet de définir des animations de sortie pour les composants lorsqu'ils quittent le DOM. Nous rendons conditionnellement le Modal basé sur showModal Etat. Nous définissons les animations pour le ModalBox et ModalContent grâce à leur initial et animate accessoires. Il y a aussi un nouvel accessoire ici, exit. Ayant AnimatePresence comme wrapper nous permet d'ajouter des animations de sortie à ModalBox dans le exit soutenir.

Animation de défilement

Nous utiliserons une combinaison des useAnimation crochet et react-intersection-observer pour créer des animations déclenchées par défilement.

Composants

  • App.js: nous mettons en place les animations pour le Box composant et le rendre dans App
  • Styles.js: créez, stylisez et exportez les composants de mouvement. Les composants sont stylisés à l'aide de composants stylisés.
import React, { useEffect } from "react";
import { useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";
import { Container, H1,StyledBox } from "./Styles";

const BoxVariants = {
  visible: { opacity: 1, x: 0, transition: { duration: 1 } },
  hidden: { opacity: 0, x: 300 },
};

const Box = () => {
  const controls = useAnimation();
  const (ref, inView) = useInView();
  useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
  }, (controls, inView));
  return (
    
  );
};

le useAnimation hook nous permet de contrôler les séquences dans lesquelles nos animations se produisent. Nous avons accès à controls.start et controls.stop méthodes que nous pouvons utiliser pour démarrer et arrêter manuellement nos animations. On passe dans l'initiale hidden animaton à StyledBox. Nous passons dans les contrôles que nous avons définis avec le start méthode pour StyledBox animer prop.

react-intersection-observerS useInView hook nous permet de suivre quand un composant est visible dans la fenêtre. le useInView hook nous donne accès à ref, que nous transmettons au composant que nous voulons regarder, et le inView booléen, cela nous indique si cet élément est inView ou pas. Nous utilisons le useEffect appeler controls.start chaque fois que l'élément que nous regardons, StyledBox est en vue. Nous passons controls et inView comme useEffectDépendances de. Aussi, nous passons dans les variantes que nous avons définies, BoxVariants à StyledBox.

Animation de héros

Nous allons créer une superbe animation de bannière de héros à l'aide de useCycle crochet. Nous comprendrons comment useCycle nous permet de parcourir les animations.

import React, { useEffect } from "react";
import { useCycle } from "framer-motion";
import { Container, H1, HeroSection, Banner, TextBox } from "./Styles";
import { ReactComponent as BannerIllustration } from "./bighead.svg";

const H1Variants = {
  initial: { y: -200, opacity: 0 },
  animate: { y: 0, opacity: 1, transition: { delay: 1 } },
};
const TextVariants = {
  initial: { x: 400 },
  animate: { x: 0, transition: { duration: 0.5 } },
};
const BannerVariants = {
  animationOne: { x: -250, opacity: 1, transition: { duration: 0.5 } },
  animationTwo: {
    y: (0, -20),
    opacity: 1,
    transition: { yoyo: Infinity, ease: "easeIn" },
  },
};

Nous définissons 3 variantes, H1Variants, TextVariants, et BannerVariants. Cependant, notre objectif est BannerVariants. Nous définissons 2 animations, animationOne et animationTwo dans BannerVariants. Ce sont les animations que nous passons dans le useCycle pour parcourir.

const (animation, cycleAnimation) = useCycle("animationOne", "animationTwo");
  useEffect(() => {
    setTimeout(() => {
      cycleAnimation();
    }, 2000);
  }, ());

useCycle fonctionne comme le useState crochet. Dans le tableau déstructuré, animation représente l'animation active, que ce soit animationOne ou animationTwo. le cylceAnimation fonction qui passe entre l'animation que nous avons définie. Nous passons dans les animations que nous voulons parcourir useCycle et appeler cylceAnimation après 2 secondes useEffect.

Cool Hero Section Anmiation

Storage shed, troughs feed bale manure, is garden wheat oats at augers. Bulls at rose garden cucumbers mice sunflower wheat in pig. Chainsaw foal hay hook, herbs at combine harvester, children is mallet. Goat goose hen horse. Pick up truck livestock, pets and storage shed, troughs feed bale manure, is garden wheat oats at augers. Lamb.

À la fin de tout, nous passons les variantes à leurs composants respectifs et regardons la magie opérer. Avec cela, le Banner glissera initialement de la droite en fonction des animations que nous avons définies dans animationOne, et après 2 secondes, cycleAnimation sera appelé ce qui déclenchera animationTwo.

Comme l'a dit un jour un sage Cochon, «c'est tout le monde».

Conclusion

Nous avons parcouru les bases de Framer Motion et vu quelques projets de démonstration qui nous donnent un aperçu de la gamme d'animations que nous pouvons créer. Cependant, vous pouvez en faire beaucoup plus. Je vous encourage à vous plonger dans la documentation et à vous déchaîner.

Ressources

Éditorial fracassant(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *