Kuidas hoida veebianimatsioone hoomatava ja selgena?

Kuidas hoida veebianimatsioone hoomatava ja selgena?

Siin postituses ma eeldan, et kasutad animeerimiseks JavaScripti (koos velocityJS’ga). Kui millegipärast sa ei kasuta JSi, siis loe postituse “Animatsiooniline veebiarendus: CSS3”  lõpu osa.

Animatsioonilises veebiarenduses (nagu ka nimi ütleb) on palju animatsioone ning neid on väga keeruline hoida hoomatavana, eriti siis kui animatsioone on palju.

Üks asi on see, et sa ise saaksid oma koodist aru ja teine asi on see, et keegi teine arendaja saaks sinu koodist aru.

Ma näitan täna, kuidas sina saad teha nõnda, et sina ja sinu sõber saavad koodist aru ning seda ka mitme aasta pärast.

Kuidas hoida animatsioonid hoomatavana?

Tegelikkuses ei olegi see nii keeruline kui arvad. Sellele on väga kiire ja lihtne lahendus.

Nimelt tuleb animatsiooniline kood eraldada loogika koodist (kood, mis käivitab animatsioonid).

Ühesõnaga tuleks luua kaks faili: style.js ja  main.js.

Failis style.js on kõik kasutatavad animatsioonid (ja nende erinevad versioonid) ning main.js failis on kood, mis käivitavad erinevad animatsioonid mingitel kindlatel juhtudel.

Selline võte sarnaneb CSSi animatsioonidega – JavaScripti fail käivitab ju animatsiooni ja CSSi fail viib animatsiooni ellu.

Näide (kasutades velocityJSi)

Fail index.html

<html>
    <head>
        <title>Hoomatavad animatsioonid</title>
        <meta charset="utf-8" />
        
        <style type="text/css">
            /*Makes animations faster*/
            *{
                -webkit-transform: translatez(0);
                -moz-transform: translatez(0);
                -ms-transform: translatez(0);
                -o-transform: translatez(0);
                transform: translatez(0);
            }
            
            .animation-box{
                width: 100px;
                height: 100px;
                background-color: deepskyblue;
                margin-top: 10px;
            }
            
            button{
                border: 1px solid black;
                margin-top: 20px;
                background-color: transparent;
            }
            
            button:hover{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="animation-box"></div>
        <div class="animation-box"></div>
        <button type="button">Animeeri kaste</button>
        
        <!--jQuery-->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

        <!--velocityJS-->
        <script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
        
        <!--Animations/style JS file-->
        <script src="style.js" type="text/javascript"></script>

        <!--Logic JS file-->
        <script src="main.js" type="text/javascript"></script>
    </body>
</html>

Fail main.js (loogika fail)

var $startButton = $("button");

var $animationBoxes = $(".animation-box");

var isAnimating = false;

$startButton.click(function(){
    if(!isAnimating){
        fadeOut.options.loop.duration = 1000;
        $($animationBoxes[0]).velocity(fadeOut.properties, fadeOut.options.loop);

        $($animationBoxes[1]).velocity(rotateAndMoveRight.properties, rotateAndMoveRight.options.loop);
        
        isAnimating = true;
    }
});

Fail style.js (animatsioonide fail)

/**
 * Fade out animation 
 *
 * @since 1.0.0
 * @author Oliver Paljak
 */
var fadeOut = {
    properties:{
        opacity: 0
    },
    options: {
        slow: {
            duration: 1000,
            easing: "ease"
        },
        fast:{
            duration: 500,
            easing: "ease"
        },
        loop: {
            easing: "ease",
            loop: true
        }
        
    }
};

/**
 * Rotate and move right animation 
 *
 * @since 1.0.0
 * @author Oliver Paljak
 */
var rotateAndMoveRight = {
    properties: {
        rotateZ: "360deg",
        marginLeft: "50%"
    },
    options: {
        loop: {
            easing: "ease",
            duration: 2000,
            loop: true
        }
    }
};

Uuri natukene neid näited – onju arusaadavad.

Kui sa ei ole enne velocityJSiga kokku puutunud, siis võib see sulle tunduda segane, kuid põhimõte on see – hoia animatsioonid eraldi failis olenemata keelest või tööriistast.

“Animatsioonid eraldi” võte aitab ka muuta animatsioone erand juhtudeks. Vaata näiteks main.js faili üheksandat rida.

Mulle ei meeldinud animatsiooni algne kiirus ja muutsin selle ära ainult ühe reaga. Lihtne!

Muidugi oleks olnud targem teha koopia algselt animatsioonist (ning siis alles muutnud koopia kiirust ja kasutanud seda animatsiooniks), kuid praeguses näites see suurt rolli ei mängi.

Ka koopia tegemine ja selle kiiruse muutmine oleks võtnud ainult kaks rida.

“Animatsioonid eraldi” annab väga palju kontrolli just arendajatele.

 

Loomulikult selline võte aitab eelkõige suuremate kui ka keskmiste projektide juures. Väiksema mahuga töödes võid täiesti vabalt selle vahele jätta – siis see muutuks juba segavaks faktoriks.

 

Kas sul on ka äkki mõni nipp varuks? Anna kommentaarides teada 🙂 !

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *