Motion-komponentit ja animaatioiden perusteet
Korvatkaa div motion.divillä ja käyttäkää animate-, initial- ja exit-propseja yksinkertaisiin animaatioihin.
Motion-komponentit ja animaatioiden perusteet on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.
Mikä Framer Motion on
Framer Motion on React-animaatiokirjasto. Korvatkaa HTML-elementit niiden motion.*-vastineilla ja lisätkää deklaratiivisia animaatioita propseilla CSS-keyframejen sijaan.
Asennus
Asentakaa Framer Motion ja tuokaa motion siitä.
npm install framer-motion
import { motion } from 'framer-motion';Ensimmäinen animaationne
Korvatkaa <div> elementillä <motion.div> ja lisätkää initial-, animate- ja transition-propsit.
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Hello, Framer Motion!
</motion.div>initial-prop
initial määrittää animaation aloitustilan — tilan, jossa elementti on ennen kuin se animoituu kohti animate-tilaa.
// Fade in from left
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
/>
// Scale up from center
<motion.button
initial={{ scale: 0 }}
animate={{ scale: 1 }}
/>animate-prop
animate määrittää kohdetilan. Framer Motion interpoloi initial- ja animate-tilojen välillä jousifysiikan tai määritetyn easing-funktion avulla.
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1, color: '#4f46e5' }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
Welcome
</motion.h1>Transition-asetukset
transition-prop ohjaa animaation etenemistä: duration, ease, delay, type ('spring' | 'tween' | 'inertia').
transition={{
type: 'spring',
stiffness: 300,
damping: 20,
delay: 0.2,
}}Keyframet animate-propissa
Välittäkää mille tahansa animoitavalle arvolle taulukko, jos haluatte luoda usean tilan kautta etenevän keyframe-animaation.
<motion.div
animate={{ x: [0, 30, 0] }}
transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>Hover- ja napautustilat
whileHover ja whileTap määrittävät animoidut tilat osoittimen leijumis- ja painallusvuorovaikutuksille. Tila palautuu automaattisesti, kun ele päättyy.
<motion.button
whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
whileTap={{ scale: 0.95 }}
style={{ backgroundColor: '#6366f1' }}
>
Press me
</motion.button>Animointi vieritettäessä inView-tilaan
Käyttäkää whileInView-proppia animaation käynnistämiseen, kun elementti vierittyy näkymäalueelle.
<motion.section
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5 }}
>
<h2>Revealed on scroll</h2>
</motion.section>exit-prop ja AnimatePresence
exit määrittää animaation, joka suoritetaan komponentin poistuessa. Se toimii vain, kun komponentti on kääritty <AnimatePresence>-elementtiin.
import { motion, AnimatePresence } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
/>
)}
</AnimatePresence>useAnimate imperatiiviseen ohjaukseen
useAnimate() palauttaa scope-refin ja animate-funktion, joiden avulla animaatiota voidaan ohjata ohjelmallisesti deklaratiivisen prop-järjestelmän ulkopuolelta.
import { useAnimate } from 'framer-motion';
function ShakeButton() {
const [scope, animate] = useAnimate();
const handleClick = async () => {
await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
};
return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}Liikkeen vähentäminen
Kunnioittakaa käyttäjän vähäisen liikkeen asetusta hookilla useReducedMotion().
import { useReducedMotion } from 'framer-motion';
function AnimatedCard() {
const shouldReduce = useReducedMotion();
return (
<motion.div
animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
/>
);
}Pikakertaus
Mikä Framer Motionin prop määrittää animaatiotilan, johon komponentin pitäisi päästä eli sen kohdetilan?
Kertaus
Korvatkaa HTML-elementit motion.*-vastineilla. Käyttäkää initial-proppia aloitustilaan, animate-proppia kohdetilaan, transition-proppia ajoitukseen, whileHover/whileTap-proppeja eleisiin ja whileInView-proppia vierityksestä käynnistyviin animaatioihin.
Opi React tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”Motion-komponentit ja animaatioiden perusteet” ilmainen?
Kyllä – oppitunnin ”Motion-komponentit ja animaatioiden perusteet” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Motion-komponentit ja animaatioiden perusteet”?
Korvatkaa div motion.divillä ja käyttäkää animate-, initial- ja exit-propseja yksinkertaisiin animaatioihin. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Motion-komponentit ja animaatioiden perusteet”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?
Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Motion-komponentit ja animaatioiden perusteet
- Variantit orkestroituihin animaatioihin
- Eleanimaatiot: Hover, Tap ja Drag
- Layout-animaatiot ja AnimatePresence