Animated1.0.0

כ־5 דקות · React 16.8+ · React DOM

מתחילים

מההתקנה ועד מחוות ותנועת כניסה ויציאה בשישה צעדים. כל צעד הוא רכיב קטן שעובד.

  1. התקנה

    ל־Animated אין תלויות בזמן ריצה. React 16.8+ היא תלות peer.

    נקודת הכניסה של החבילה מסומנת 'use client'. ב־App Router של Next.js, layout של שרת יכול לרנדר את AnimatedProvider; השתמשו ב־hooks וב־Animated.<tag> בתוך Client Components.

    npm install @kkwaenggwari/animated

    הייבוא @kkwaenggwari/animated נפתר בעורך שלכם.

  2. להזיז את הערך הראשון

    useAnimatedValue(1) מחזיק מספר חי לכל אורך חיי הרכיב. שימו אותו ישר ב־style: הוא הופך למשתנה CSS, כך ש־React לא מתרנדר בזמן שהוא משתנה.

    timing(value, { toValue, duration }).start() מזיז אותו. לחיצה נוספת באמצע הדרך מתחילה מהשקיפות הנוכחית.

    מכין את הדוגמה…

    הקופסה דועכת וחוזרת, ולחיצה שנייה באמצע הופכת את הכיוון מהמקום שבו היא נמצאת.

  3. לגזור הרבה פלטים מערך אחד

    interpolate ממפה את הערך לאורכים, לזוויות או למספרים. בלי easing הוא הופך ל־calc() מדויק של אותו משתנה, כך שחמישה מסלולים עולים כמו אחד.

    טווחי קלט שונים על אותו ערך יוצרים מפל בלי חמש אנימציות נפרדות.

    מכין את הדוגמה…

    לחיצה אחת מזיזה חמישה מסלולים במפל; שינוי הפיזור משנה רק את הטווחים.

  4. לתאר יעד

    Animated.button מרנדר כפתור רגיל. seed הוא הפריים הראשון, pose הוא איפה הוא אמור להיות עכשיו, ו־tempo הוא איך הוא מגיע לשם.

    כש־pose משתנה באמצע הדרך, האלמנט פונה מהמקום שבו הוא על המסך ושומר על המהירות שלו עם קפיץ.

    מכין את הדוגמה…

    לחיצות מהירות על כרטיסים לעולם לא גורמות לאחד מהם לקפוץ.

  5. לחבר קלט

    input(ref, moveInput(...)) כותב את קואורדינטות הסמן לערכים. follow(target, source) גורם לערך אחד לעקוב אחרי אחר עם קפיץ.

    כל מה שמוצהר ב־factory של useAnimated שייך לרכיב: מאזינים וקפיצים נעצרים בהסרה או כשתלות משתנה.

    מכין את הדוגמה…

    הכרטיס נוטה לכיוון הסמן ומתייצב בחזרה כשהסמן עוזב.

  6. להנפיש יציאה

    הסרת ילד של React בדרך כלל מסירה אותו מיד. Animated.Keep שומר ילדים עם key עד שה־pose depart שלהם מסתיים.

    wait מרנדר ילדים חדשים רק אחרי שכל היציאות הסתיימו.

    מכין את הדוגמה…

    הודעות שנסגרו יוצאות בתנועה שנבחרה לפני שהן נעלמות.

יש לכם את המודל כולו

ערכים, יעדים, קלט ויציאות חולקים את אותם בקרים, אותם כללי הפרעה ואותו ניקוי. המדריכים מעמיקים בכל אחד.

חיפוש

הקלידו כדי לחפש בתיעוד.