WV-H9 - CSS-animointi

CSS-animointi yleisesti

CSS-animaatiot on hyvä tapa lisätä pientä liikettä ja luonnollista siirtymää tilojen välille. Hyvin tyypillinen paikka missä animaatioita käytetään on esimerkiksi nappulat, dropdown menut, form-elementit sekä muut joissa tapahtuu tilojen muutoksia. Tyypillisesti nämä ovat käyttöliittymäelementtejä. Käyttäjälle tulee antaa "rerponse" tekemistään toiminnoista. On aina hyvä tehdä liikkeestä luonnollista eikä lineaarista tai "töksähtävää".

CSS:ässä animointia voidaan toteuttaa transition sekä animation ominaisuuksilla. Hyvin useissa tapauksissa transition riittää, mutta monimutkaisempaa liikettä halutessa joudutaan käyttämään animation ominaisuutta.

CSS-animaatiossa on paljon hyviä puolia muihin animointitekniikoihin. Ne ovat helppoja ja nopeita tehdä, ne ovat kevyitä laitteille verrattuna esimerkiksi JavaScriptiin ja ne antaa selaimen hallita suoritusta (performance, perffi).

Käy läpi seuraavat videot CSS3 animmoinnista:

Material Design

Material Design on Googlen kehittämä suunnittelutapa (design language) jossa pyritään luomaan mahdollisimman luonnollinen tapa esittää sovelluksen eri elementtejä ja tapahtumia. Material Design pitää sisällään paljon ohjeistusta esimerkiksi siitä kuinka animaatioita tulisi toteuttaa. Tutki läpi Material Designin ohjeistukset täältä:

https://material.io/guidelines/

Harkat

Tee itsellesi tyhjä webbisivu-pohja ja toteuta alla olevat harjoitukset tähän pohjaan.

WW-H9.1 - Nappula ja Transition

Tässä harjoituksessa animoidaan opettajan tekemä upea SVG-nappula käyttäen transition propertyä. Opimme SVG-grafiikasta enemmän seuraavassa harjoituksessa. Nyt meille riittää, kun ymmärrämme että voimme tarttua SVG-grafiikan eri elementteihin käyttäen CSS-luokkia!

Lisää tyhjälle sivullesi alla oleva SVG-kuva koodimuodossa. Tätä olisi tarkoitus lähteä nyt animoimaan. Animoi nappulalle ainakin :hover ja :active tilat transitiota käyttäen! Voit esimerkiksi tummentaa väriä hiiren mennessä nappulan päälle ja tummentaa vielä lisää sen ollessa active. Voit myöt esimerkiksi kokeilla skaalata nappulaa pienemmäksi tai mitä vaan keksitkään.

Yritä saada nappula käyttäytymään mahdollisimman luonnollisesti!

SVG:n eri attribuutit löydät täältä: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376 376">
    <defs>
        <style>
            .a{fill:#aa3030;}
            .b{fill:#661414;}
            .c{fill:#bc3131;}
            .d{fill:#ffcfcf;}
        </style>
    </defs>
    <title>button</title>
    <circle class="a" cx="188" cy="188" r="188"/>
    <circle class="b" cx="188" cy="188" r="163"/>
    <circle class="c" cx="188" cy="188" r="150"/>
    <ellipse class="d" cx="888.23" cy="455.5" rx="16.86" ry="42.18" transform="translate(-683.63 373.13) rotate(-42.23)"/>
</svg>

Yllä oleva pätkä koodia on käytännössä tämä nappula täysikokoisena:

WW-H9.2 SVG-elementtien animointi keyframeilla

Tässä harjoituksessa animoidaan SVG-elementtejä käyttäen animation ja keyframe propertyjä.

Lisää tyhjälle sivullesi alla oleva SVG-kuva koodimuodossa. Tätä olisi tarkoitus lähteä nyt animoimaan, mutta transition propertyn sijaan tehdään siitä jatkuva animaatio käyttäen apuna animation ja sen keyframe propertyjä. Toteuta jonkinlainen animaatio käyttäen ainakin neljää (4) eri keyframea (esim. 0%, 25%, 50%, 75%, 100%).

Animaatio vapaa. Voit esim skaalata objekteja, muuttaa värejä, pyörittää niitä. Mitä tahansa keksitkään! Muista tutkia SVG:n attribuutteja täältä

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.37 548.76">
    <defs>
        <style>
            .a{fill:#f4e16e;}
            .b{fill:#fff;}
            .c{fill:#4a82dd;}
            .d{fill:#db4b4b;}
        </style>
    </defs>
    <title>Animaatioharkka, toinen osa</title>
    <polygon class="a" points="86.06 169.4 1.02 167.88 53.96 101.31 29.13 19.97 108.79 49.74 178.48 0.99 174.79 85.96 242.69 137.17 160.73 159.91 133.01 240.31 86.06 169.4"/>
    <path class="b" d="M260.58,71.22l-3.65,83.69,0,.52.42.32,66.88,50.45-80.72,22.4-.51.14-.17.49-27.31,79.2-46.25-69.85-.29-.44h-.52l-83.76-1.5,52.14-65.57.32-.41-.15-.5L112.54,90,191,119.35l.49.19.43-.31,68.65-48m1.08-2-70.3,49.17L111,88.38l25,82.06-53.4,67.15,85.79,1.54,47.36,71.54,28-81.11,82.67-22.94L257.93,155l3.73-85.71Z" transform="translate(-82.63 -69.24)"/>
    <rect class="c" x="379.87" y="99.26" width="186" height="186"/>
    <path class="b" d="M648,169V354H463V169H648m1-1H462V355H649V168Z" transform="translate(-82.63 -69.24)"/>
    <circle class="d" cx="200.37" cy="437.76" r="110.5"/>
    <path class="b" d="M283,397a110,110,0,1,1-77.78,32.22A109.25,109.25,0,0,1,283,397m0-1A111,111,0,1,0,394,507,111,111,0,0,0,283,396Z" transform="translate(-82.63 -69.24)"/>
</svg>

Tämä koodi sisältää tämän näköisen kuvan: