טיפ JavaScript: אנימציה פשוטה עם Velocity.JS

06/05/2020

יומי

ספריית Velocity.JS היא דרך קלה מאוד לגרום לדברים לזוז או לרקד על המסך. היא משתמשת ב requestAnimationFrame, מספקת API סופר פשוט ובגדול פשוט עובדת. מתאים ליישומים קטנים שלא משתמשים בפריימוורק ובכל זאת אתם רוצים שיראו קצת יותר חמודים.

הספריה כוללת פונקציית כניסה בשם Velocity שמקבלת כפרמטר ראשון אלמנט ב DOM, פרמטר שני אוביקט שמתאר את האנימציה ופרמטר שלישי כל מיני אפשרויות אנימציה לשליטה בכל הפרמטרים הקטנים. השורה הבאה למשל תגרום לאלמנט מסוים לרקד כמו ג'לי למשך חצי שניה:

Velocity(box, 'jello', { duration: 500 });

והשורה הזו תגרום לו לזוז לנקודה מסוימת על המסך (בתנאי שה position שלו מוגדר ל absolute):

Velocity(box, { left: 100, top: 100 }, { duration: 500 });

בפרמטר השני אפשר לכתוב כל מאפיין CSS בעולם, והשינוי יתבצע באנימציה. וגם יש תמיכה אוטומטית בחיבור אנימציות כך שאם נכתוב את שתי השורות יחד:

Velocity(box, 'jello', { duration: 500 });
Velocity(box, { left: 100, top: 100 }, { duration: 500 });

האלמנט יקדיש חצי שניה לרקוד כמו ג'לי ואחר כך עוד חצי שניה כדי לרוץ לנקודה 100,100 על המסך.

בואו נחבר את הכל יחד בדף HTML. בהנחה שיש לנו HTML שנראה כך:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF8" />
        <title>Animate.CSS Demo</title>
        <style>
            #box { width: 100px; height: 100px; background: blue; position: absolute; }
            body { position: relative; height: 100vh; padding: 0; margin: 0; }
        </style>
    </head>

    <body>
        <div id="box"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.ui.min.js"></script>
        <script src="demo3.js"></script>
    </body>
</html>

אני יכול להוסיף לו את ה JavaScript הבא כדי לגרום לקופסא לרוץ ממקום למקום וגם לרקוד כמו ג'לי כל פעם שלוחצים עליה:

const box = document.querySelector('#box');
function runaway() {
    const width = document.body.clientWidth - 100;
    const x = Math.random() * width;
    const height = document.body.clientHeight - 100;
    const y = Math.random() * height;
    Velocity(box, 'jello', { duration: 500 });
    Velocity(box, { left: x, top: y }, { duration: 500 });
}

runaway();
box.addEventListener('click', runaway);

ויש גם קודפן:

טיפ JavaScript: אנימציה פשוטה עם Velocity.JS

עדכונים יומיים