[:en]CSS animation[:nl]CSS animatie[:]

[:en]I’m experimenting with CSS animations. I’m making a Malevich-like animation. For this I have made a SVG design in a drawing program. Then transfer all signed blocks to CSS. This is a lot of work, maybe next time I can see if I can work directly from CSS. I put the sizes in pixels and I made the positions of each block. In the future, I think it’s easier to set the percentages so that the animation does not go outside the viewport. I went on to experiment by animating the positioning of the blocks. The blocks were first completely animated and then relative to each other, thus shifting the entire composition. This creates a complex animation in an animation.[:nl]Ik ben met CSS animaties aan het experimenteren. Ik maak een Malevich-achtige animatie. Hiervoor heb ik een SVG ontwerp gemaakt in een tekenprogramma. Daarna alle getekende blokken overgezet naar CSS. Dit is best veel werk, volgende keer misschien kijken of ik direct vanuit CSS kan werken. De maten heb ik in pixels gezet en de posities van elke blok heb ik absoluut gemaakt. In het vervolg is het handiger denk ik om de maten in procenten te zetten zodat de animatie niet buiten de viewport gaat. 

Ik ben verder gaan experimenteren door de positionering van de blokken te animeren. De blokken zijn eerst absoluut en daarna relatief ten opzichte van elkaar geanimeerd waardoor de hele compositie verschuift. Dit zorgt voor een complexe animatie in een animatie.

Verder experimenteren

Ik heb redelijk veel code moeten tikken omdat ik ieder blok apart heb getekend. Het is ook interessant om te kijken of ik blokken relatief t.o.v. elkaar kan maken zodat de grootte automatisch berekend wordt. Daarbij is het interessant om een container blok te animeren zodat de elementen erin automatisch mee geanimeerd worden. Ook is het interessant om kleur te gaan animeren en de vorm door bijvoorbeeld van rechthoek naar ellips te gaan.

Het is ook interessant om te kijken of ik i.p.v. blokken in de ruimte een raster kan animeren. Dus dat ik i.p.v. een Malevich een Mondriaan animeer. Hiervoor kan ik flexibele blokken gebruiken waardoor het raster steeds verschuift.[:]

Gratis animatie software

[:en]Ik hou van een eenvoudig animatieproces, daarom zoek ik naar simpele animatiesoftware. Ik heb vroeger veel animaties in Flash gemaakt, daarna heb ik verschillende gratis programma’s geprobeerd. Hieronder vind je programma’s die ik interessant vind:

Gratis 2d animatie software

Stykz

Leuk is het om met stokfiguren te animeren. Een heel eenvoudig en leuk programma hiervoor is Stykz (https://www.stykz.net/). Hiermee kun je heel snel simpele animaties opzetten. Onder Windows 7 werkte dit programma heel goed, ik weet niet of het onder Windows 10 ook goed draait. Het is ook een leuk programma voor kinderen om mee te animeren. Het is alleen beeld dus er zit geen audio spoor bij. Dat kun je later zelf met Windows moviemaker toevoegen.

Google webdesigner

Google webdesigner (https://www.google.com/webdesigner/) is een verrassend compleet programma voor een gratis pakket. Het  is eigenlijk bedoeld om websites en advertenties mee te maken maar animaties kun je hier ook goed mee maken.
Ik heb er alleen nog een klein beetje mee gespeeld maar het voelt positief. De interface is heel intuïtief als je ook Flash gewend bent. Je kunt ook geluid aan je animatie toevoegen. Daarnaast heeft het automatische motion tween, d.w.z. dat het programma de beweging en bijbehorende frames berekent tussen twee keyframes.

Het enige nadeel is dat je HTML CSS animaties maakt en dat het geen export naar video heeft. Op zich is dit geen punt want je kunt op elke browser de animaties bekijken. Ik denk dat als je goed zoekt apps kunt vinden die je HTML animatie naar video kan converteren. Ik denk dat zeker in de toekomst er exporters van HTML animatie naar video beschikbaar komen.

Chasys draw

Chasys draw (http://www.jpchacha.com/chasysdraw/help.php?file=artist_tutorials_animobject.htm) Dit is een Windows programma gemaakt in Afrika! Dit is eigenlijk een tekenprogramma maar het heeft een hele leuke animatiefunctie. Deze is eigenlijk bedoelt voor kleine banneranimaties. Het mooie aan dit programma is dat je meerdere lagen kunt animeren. Je kunt dus achtergrond en voorgrond onafhankelijk van elkaar bewegen. De resultaten lijken op paper-cut animaties zoals die van Monthy Python. Het heeft geen geluidsspoor, dus geluid zul je moeten toevoegen met bijvoorbeeld Windows Moviemaker. Je kunt de animaties exporteren naar video als GIF of WebP. De grootste charme van dit programma vind ik de interface dat op een of andere manier heel prettig aanvoelt.

Windows Paint

Windows paint, wie kent het niet? Het is natuurlijk een simpel bitmap tekenprogramma dat standaard geleverd wordt bij Windows, maar je kunt het ook gebruiken om hele lompe animaties te maken. Zoals 3 minute philosophy doet. In Windows movie maker kun je al je getekende frames achter elkaar plakken.

Stop motion en Windows Movie maker

De leukste manier om te animeren is natuurlijk stop motion. Met je fotocamera neem je steeds een foto van je object of tekening en verandert elke keer iets voor de volgende foto. Al deze foto’s importeer je in Windows movie maker en plak je achter elkaar. Het is leuk om hiermee papierknipsels te animeren.

3d animatie

Voor 3d animatie gebruik ik Art of illusion omdat de interface heel intuitief is. Daarbij is het heel makkelijk om de animaties naar Quicktime te exporteren.

 [:nl]Ik hou van een eenvoudig animatieproces, daarom zoek ik naar simpele animatiesoftware. Ik heb vroeger veel animaties in Flash gemaakt, daarna heb ik verschillende gratis programma’s geprobeerd. Hieronder vind je programma’s die ik interessant vind:

Gratis 2d animatie software

Stykz

Leuk is het om met stokfiguren te animeren. Een heel eenvoudig en leuk programma hiervoor is Stykz (https://www.stykz.net/). Hiermee kun je heel snel simpele animaties opzetten. Onder Windows 7 werkte dit programma heel goed, ik weet niet of het onder Windows 10 ook goed draait. Het is ook een leuk programma voor kinderen om mee te animeren. Het is alleen beeld dus er zit geen audio spoor bij. Dat kun je later zelf met Windows moviemaker toevoegen.

Google webdesigner

Google webdesigner (https://www.google.com/webdesigner/) is een verrassend compleet programma voor een gratis pakket. Het  is eigenlijk bedoeld om websites en advertenties mee te maken maar animaties kun je hier ook goed mee maken.
Ik heb er alleen nog een klein beetje mee gespeeld maar het voelt positief. De interface is heel intuïtief als je ook Flash gewend bent. Je kunt ook geluid aan je animatie toevoegen. Daarnaast heeft het automatische motion tween, d.w.z. dat het programma de beweging en bijbehorende frames berekent tussen twee keyframes.

Het enige nadeel is dat je HTML CSS animaties maakt en dat het geen export naar video heeft. Op zich is dit geen punt want je kunt op elke browser de animaties bekijken. Ik denk dat als je goed zoekt apps kunt vinden die je HTML animatie naar video kan converteren. Ik denk dat zeker in de toekomst er exporters van HTML animatie naar video beschikbaar komen.

Chasys draw

Chasys draw (http://www.jpchacha.com/chasysdraw/help.php?file=artist_tutorials_animobject.htm) Dit is een Windows programma gemaakt in Afrika! Dit is eigenlijk een tekenprogramma maar het heeft een hele leuke animatiefunctie. Deze is eigenlijk bedoelt voor kleine banneranimaties. Het mooie aan dit programma is dat je meerdere lagen kunt animeren. Je kunt dus achtergrond en voorgrond onafhankelijk van elkaar bewegen. De resultaten lijken op paper-cut animaties zoals die van Monthy Python. Het heeft geen geluidsspoor, dus geluid zul je moeten toevoegen met bijvoorbeeld Windows Moviemaker. Je kunt de animaties exporteren naar video als GIF of WebP. De grootste charme van dit programma vind ik de interface dat op een of andere manier heel prettig aanvoelt.

Windows Paint

Windows paint, wie kent het niet? Het is natuurlijk een simpel bitmap tekenprogramma dat standaard geleverd wordt bij Windows, maar je kunt het ook gebruiken om hele lompe animaties te maken. Zoals 3 minute philosophy doet. In Windows movie maker kun je al je getekende frames achter elkaar plakken.

Stop motion en Windows Movie maker

De leukste manier om te animeren is natuurlijk stop motion. Met je fotocamera neem je steeds een foto van je object of tekening en verandert elke keer iets voor de volgende foto. Al deze foto’s importeer je in Windows movie maker en plak je achter elkaar. Het is leuk om hiermee papierknipsels te animeren.

3d animatie

Voor 3d animatie gebruik ik Art of illusion omdat de interface heel intuitief is. Daarbij is het heel makkelijk om de animaties naar Quicktime te exporteren.[:]