Inžinerija

Našių slinkties animacijų kūrimas

Laikykite slinkties animaciją compositor sluoksnyje ir patikrinkite svetimame telefone

2025 m. vasario 3 d.

Manweba

Trūkčiojantis judesys blogiau už jokį. Prarastus kadrus žmonės pajunta anksčiau, nei pastebi jūsų judesio kreivę. Visas menas – žinoti, kurios savybės lieka vaizdo plokštėje ir kaip suplanuoti darbą.

Animuokite transform ir opacity

Išdėstymą keičiančios savybės (width, height, top, margin) kiekvieną kadrą verčia iš naujo skaičiuoti stilius, išdėstymą ir piešinį. Transform ir opacity dažniausiai gali likti compositor sluoksnyje.

Tas pats vizualinis judesys, visai kita kaina: rinkitės translate, o ne left.

Draugiška kompozitoriui ir išdėstymą perkraunanti versija

jsx

1import { motion, useScroll, useTransform } from 'motion/react';
2
3// Prefer this
4export function GoodMotion() {
5  return (
6    <motion.div
7      initial={{ opacity: 0, y: 40 }}
8      whileInView={{ opacity: 1, y: 0 }}
9      viewport={{ once: true }}
10      transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
11    >
12      Smooth entrance
13    </motion.div>
14  );
15}
16
17// Avoid this for scroll-linked motion
18export function BadMotion() {
19  return (
20    <motion.div
21      initial={{ height: 0, marginTop: 40 }}
22      animate={{ height: 'auto', marginTop: 0 }}
23    >
24      Forces layout each frame
25    </motion.div>
26  );
27}
28
29export function ScrollLinked({ children }) {
30  const { scrollYProgress } = useScroll();
31  const y = useTransform(scrollYProgress, [0, 1], [0, -80]);
32  const opacity = useTransform(scrollYProgress, [0, 0.6, 1], [1, 1, 0]);
33
34  return <motion.div style={{ y, opacity }}>{children}</motion.div>;
35}

Loading code…

useScroll ir useTransform

Motion bibliotekos slinkties funkcijos duoda normalizuotą progresą be ranka rašomų įvykių klausytojų. Susiekite tą progresą su keliomis svarbiausiomis savybėmis; neanimuokite visko vien todėl, kad galite.

Slinkties susiejimas su konkrečiu elementu

jsx

1import { useRef } from 'react';
2import {
3  motion,
4  useScroll,
5  useSpring,
6  useTransform,
7} from 'motion/react';
8
9export function AdvancedScrollSection() {
10  const ref = useRef(null);
11  const { scrollYProgress } = useScroll({
12    target: ref,
13    offset: ['start end', 'end start'],
14  });
15
16  const smooth = useSpring(scrollYProgress, {
17    stiffness: 100,
18    damping: 30,
19  });
20
21  const y = useTransform(smooth, [0, 1], [60, -60]);
22  const opacity = useTransform(smooth, [0, 0.2, 0.8, 1], [0, 1, 1, 0]);
23  const counterRotate = useTransform(smooth, [0, 1], [0, -20]);
24
25  return (
26    <section ref={ref} className="flex min-h-screen items-center justify-center">
27      <motion.div
28        style={{ y, opacity }}
29        className="flex h-56 w-56 items-center justify-center rounded-3xl bg-teal-800"
30      >
31        <motion.p className="text-white" style={{ rotate: counterRotate }}>
32          Scroll
33        </motion.p>
34      </motion.div>
35    </section>
36  );
37}

Loading code…

Įėjimai per Intersection Observer

whileInView (po gaubtu – Intersection Observer) vienkartiniams įėjimams tinka geriau nei slinkties klausytojai. Naudokite once: true, neigiamą paraštę ankstesniam startui ir bendrus variantus, kad tėvinis elementas vaikus paleistų pakopomis be dvidešimties atskirų laiko juostų.

Pakopomis atsiskleidžiantis funkcijų tinklelis

jsx

1import { motion } from 'motion/react';
2
3const fadeUp = {
4  hidden: { opacity: 0, y: 32 },
5  visible: {
6    opacity: 1,
7    y: 0,
8    transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] },
9  },
10};
11
12export function FeatureGrid({ features }) {
13  return (
14    <motion.div
15      initial="hidden"
16      whileInView="visible"
17      viewport={{ once: true, margin: '-80px', amount: 0.25 }}
18      variants={{
19        hidden: {},
20        visible: { transition: { staggerChildren: 0.12 } },
21      }}
22      className="grid gap-6 md:grid-cols-3"
23    >
24      {features.map((feature) =>=(
25        <motion.div
26          key={feature.title}
27          variants={fadeUp}
28          className="rounded-2xl border border-white/10 p-6"
29        >
30          <h3 className="mb-2 text-xl">{feature.title}</h3>
31          <p className="text-white/60">{feature.description}</p>
32        </motion.div>
33      ))}
34    </motion.div>
35  );
36}

Loading code…

Grupuokite ir gerbkite sumažintą judesį

Vienas bendras tėvinio elemento pakopinis paleidimas pigesnis už dvidešimt nepriklausomų laiko juostų. Ribokite, kiek elementų juda vienu metu, ypač telefone.

Gerbkite prefers-reduced-motion nuostatą. Statiškas, bet aiškus išdėstymas geriau už gražų trūkčiojimą.

Prisitaikantis judesio jungiklis

jsx

1import { useEffect, useState } from 'react';
2import { motion, useReducedMotion } from 'motion/react';
3
4export function AdaptiveFade({ children }) {
5  const prefersReduced = useReducedMotion();
6  const [lowPower, setLowPower] = useState(false);
7
8  useEffect(() =>={
9    const connection = navigator.connection;
10    setLowPower(
11      Boolean(connection?.?aveData) |||        connection?.?ffectiveType ===='2g' |||        connection?.?ffectiveType ===='slow-2g',
12    );
13  }, []);
14
15  const animate = !prefersReduced &&&!lowPower;
16
17  return (
18    <motion.div
19      initial={animate ? { opacity: 0 } : false}
20      animate={animate ? { opacity: 1 } : undefined}
21      transition={animate ? { duration: 0.45 } : undefined}
22    >
23      {children}
24    </motion.div>
25  );
26}

Loading code…

Matuokite tikruose įrenginiuose

Jūsų nešiojamasis meluoja. Įrašykite slinkties sesiją su Chrome Performance vidutinės klasės Android telefone arba dirbtinai sulėtinę procesorių. Raudonos žymos reiškia: mažinkite savybių, mažinkite elementų arba atsisakykite paties efekto.

Apibendrinimas

Našumas yra ta produkto dalis, kurią lankytojai pajunta pirmiausia. Likite prie transform ir opacity, ribokite slinkties metu atliekamą darbą, grupuokite įėjimus ir tikrinkite su tokia įranga, kokią turi jūsų auditorija, o ne su savo darbo kompiuteriu.

Judesio kainos kopėčios

Nuo statiško varianto iki spyruoklės – pajuskite skirtumą

Live Preview

No Animation

CodeStep 1 of 4

1<div className="card">Static Element</div>

Loading code…

Susiję straipsniai

Inžinerija

Next.js ar WordPress rinkodaros svetainei 2026 m.

Kada WordPress visiškai pakanka ir kada individualus Next.js sprendimas yra geresnis verslo pasirinkimas

Skaityti straipsnį

Produktas

SEO, kuris iš tikrųjų atneša užklausų, o ne tik pozicijas

Struktūra, greitis, ketinimą atitinkantys puslapiai ir matavimas – SEO kaip augimo sistema, o ne sąrašų spektaklis

Skaityti straipsnį

Norite, kad jūsų produktas būtų toks pat apgalvotas?

Žiūrėti paslaugas Pradėti projektą