Animation im Web
Aus Wikizone
Quickstart
In früheren Zeiten war die Standardantwort für "bewegte" Webseiten ganz einfach Flash. Heutzutage gibt es viele Lösungen um Animationen auf eine Webseite zu bringen. Dieser Artikel soll eine kleine Übersicht bringen.
Stichworte: Anime.js, GSAP, CSS Transform, CSS Keyframes, Snap, Waypoints, Lottie, ScrollMagic
Links
Siehe auch in den Sections GSAP Scroll-Snap Anime.js http://imakewebthings.com/waypoints/guides/getting-started/ Lottie
Überblick
GSAP & ScrollMagic
ScrollMagic ist obsolet es gibt bei GSAP ein eigenes Plugin - ScrollTrigger
GSAP
Gehört zu den Standardlösungen. GSAP - Greensock Animation Plattform bietet JavaScript Tools für Timeline-basierte Animationen. Ergänzend kann ScrollMagic die Steuerung der Timelines basierend auf der Skrollposition der Webseite steuern.
Vorteil:
- Alle DOM Elemente können animiert werden. Nicht nur in der Bewegung sondern auch in der Farbe, Sichtbarkeit...
- Gute Performance
- Mit ScrollMagic einfaches Steuern beim Scrolling inklusive einfaches Pinning (fixieren während der Animation)
Nachteil:
- Skriptlastig, wobei es nicht so komplex ist wie bei anderen Lösungen.
Vector + AfterFX + Bodymovin + Lottie
https://www.youtube.com/watch?v=i6qfQ8QDOfs&feature=emb_rel_end
Ein weiterer vielversprechender Workflow.
- Vektordateien erstellen
- In AfterFX importieren. Hier gibt es mehrere Möglichkeiten. Illustrator Dateine kann man direkt importieren, für Sketch gibt es ein Importtool, das auch die Layer mitnimmt. More to check out...
- Animation in AfterFX erstellen
- Mit dem AfterFX Bodymovin Plugin exportierst du die Animation als JSON File.
- Lottie kann die erstellt Datei rendern. Die Lottie Library gibt es für den Browser, aber auch für iOS und Android - dort werden die Dateien Nativ gerendert.
- Lottie Animationen können auch mit GSAP gesteuert werden.
https://greensock.com/forums/topic/18343-timelinemax-scrollmagic-lottie-web-bodymoving-is-it-possible-is-it-necessary/ https://www.youtube.com/watch?time_continue=308&v=HeY9qGUT3zQ&feature=emb_logo
Vorteil:
- Einfache Erstellung mit AfterFX
- Natives Rendern in Apps möglich -> gute Performance
Nachteil:
- Keine DOM Elemente
- Player nicht so frei positionierbar.
Only CSS
CSS Transitions CSS Animation
CSS3 stellt einfache Möglichkeiten zur Verfügung Elemente (auch SVG Pfade) zu animieren. Vorteil:
- Ohne JavaScript
- Für einfache Animationen einfach zu realisieren
- Performant wenn Properties verwendet werden, die der Browser nativ rechnen kann (z.B. alle transform Eigenschaften)
Nachteil:
- Komplexe Animationen umständlich
Animation mit CSS only
CSS Transitions CSS Animation
Animation mit JavaScript,CSS SVG und Canvas
Cooler Triangles Tiles Effekt
http://codepen.io/mistic100/pen/JobPLK (2016-12)
<div id="tiles"></div>
<p>Enhancement of my original <a href="http://codepen.io/mistic100/pen/GFHkm">Colorful Tiles</a> with truly random animation.</p>
<p>At the end of each cycle (49 steps) a new Perlin noise map is generated.</p>
body { background:#111; }
#tiles { margin:0 auto; }
p { max-width:680px; margin:10px auto; color:white; font:16px "Calibri", sans-serif; }
a { color:#3E7289; }
(function(){
if (!SVG.supported) {
alert('SVG not supported !');
return;
}
// parameters
var size = { x: 680, y: 400, tile: 40 },
speed = 50,
tile_nb = { x: Math.ceil(size.x/size.tile)+1, y: Math.ceil(size.y/size.tile)+1 },
colors = ["#ED1156", "#ED194E", "#ED2247", "#ED2B3F", "#EE3438", "#EE3D31", "#EE4529", "#EF4E22", "#EF571A", "#EF6013", "#F0690C", "#E8720E", "#E17B10", "#D98512", "#D28E14", "#CB9816", "#C3A118", "#BCAA1A", "#B4B41C", "#ADBD1E", "#A6C721", "#96C62F", "#87C53E", "#78C44D", "#69C35C", "#5AC26B", "#4AC17A", "#3BC089", "#2CBF98", "#1DBEA7", "#0EBDB6", "#0EBAB0", "#0EB8AA", "#0EB5A4", "#0EB39E", "#0EB098", "#0EAE92", "#0EAB8C", "#0EA986", "#0EA680", "#0EA47B", "#269376", "#3F8372", "#58736E", "#71626A", "#895266", "#A24262", "#BB315E", "#D4215A"],
objects = [],
values = [],
nb_colors = colors.length;
// function to generate simplex noise map
function generateValues(add) {
var values = [], foo,
simplex = new SimplexNoise();
for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
foo = Math.round((simplex.noise(c/10, l/10)+1) / 2 * nb_colors) + add;
values.push(foo, foo+1, foo+2, foo+3);
}
}
return values;
}
// init canvas
var container = document.getElementById('tiles');
container.style.width = size.x+'px';
container.style.height = size.y+'px';
var paper = SVG(container).size(size.x, size.y),
pos, cmd,
counter = 0;
// draw tiles
for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
pos = { x: c*size.tile, y: l*size.tile };
// tile 1
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile) +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 2
cmd = (pos.x+size.tile) +','+ (pos.y+size.tile) +' '+ pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 3
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 4
cmd = pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
}
}
// cycle colors
values[0] = generateValues(0);
values[1] = generateValues(nb_colors);
setInterval(function() {
var idx;
for (var i=0, l=objects.length; i<l; i++) {
idx = Math.round((values[1][i]-values[0][i]) * counter/(nb_colors-1) + values[0][i]);
if (idx >= nb_colors) idx = idx%nb_colors;
objects[i].fill(colors[idx]);
}
counter++;
if (counter == nb_colors) {
counter = 1;
values[0] = values[1].map(function(v) { return v-nb_colors; });
values[1] = generateValues(nb_colors);
}
}, speed);
// bug in svg.js
var temp = document.getElementById('SvgjsSvg1002');
temp.parentNode.removeChild(temp);
}());
