Les 7 - Golfbewegingen maken.
Wat leer je in deze les?
- Hoe animeer je een figuur met behulp van golfbewegingen.
1.1 De wave functie.
1 - Hoe animeer je een figuur met behulp van golfbewegingen.
Laten we ons eerst eens herinneren hoe je een cirkel op het scherm tekent:
import Playground exposing (..)
main =
animation view
view time =
[ circle blue 100 ]
Stel je voor dat je een animatie wilt maken op deze figuur, waardoor hij gaat "pulseren" (vergroten en verkleinen van de diameter gedurende de tijd).
In bovenstaand voorbeeld is de diameter van de cirkel vastgesteld op 100. Om je doel ("pulseren") te bereiken, moet je ervoor zorgen dat de waarde van de diameter variabel kan zijn in plaats van vast, en gedurende de tijd kan veranderen (met behulp van die variabele time die we in les 6 zagen).
Een van de manieren om dit toe te passen (implementeren), is het gebruik van een functie genaamd wave (wat in het Engels golf betekent).
Open de https://elm-lang.org/try website opnieuw,
kopieer en voer de volgende code uit.
Maak je voor nu geen zorgen over het interpreteren van alles. Bekijk gewoon het resultaat om het gedrag van deze functie beter te begrijpen.
import Playground exposing (..)
main =
animation view
view time =
[ circle blue (wave 50 100 7 time)
]
1.1 - De wave functie.
Zoals je misschien hebt gemerkt, wordt nu de functie wave aangeroepen en het resultaat van deze oproep bepaalt de grootte van de diameter van de cirkel.
De functie wave heeft 4 parameters. De eerste 2 parameters komen overeen met de minimale waarde en de maximale grootte van de diameter. De laatste twee parameters hangen samen met de snelheid waarmee deze waarde moet veranderen.
In dit voorbeeld geeft de waarde 7 aan hoeveel seconden de
totale cyclus van de animatie duurt (dat is: het tijdsinterval dat
moet verstrijken zodat de waarde varieert tussen het minimum en maximum en weer terug naar de minimumwaarde).
De time is gewoon de huidige tijd (die we als parameter krijgen in de view functie en die we dezelfde waarde doorgeven).
De waarde van time wordt automatisch bijgewerkt en de functie view wordt steeds opnieuw aangeroepen, elke keer met een andere waarde voor de variabele time. Maar je hoeft je daar geen zorgen over te maken: geef time gewoon door als een parameter aan de wave- functie en het zal weten wat de grootte van de cirkel op dit moment moet zijn.
Herlees nu de vorige code en probeer beter te begrijpen wat er gebeurt. Verander de waarden 50, 100 en 7 naar andere waarden en bekijk het resultaat. Maar voordat je de code uitvoert (via Rebuild), probeer je eerst voor te stellen hoe de animatie eruit zal zien.
En nu?
Nu is het tijd om aan de slag te gaan en nog meer te oefenen!
Ga naar Les 7 opdrachten en veel succes met oefenen!