Animatie met .png bestand. Hoe?

Pro grafisch-en-fotografie
#1

Ik zag gisteren dat Google hun logo eventjes had vervangen voor een variant, zoals ze dat wel vaker doen. Dit keer was het een animatie, best mooi gemaakt. Ik dacht toen dat het om een flash of .gif animatie zou gaan maar toen ik het plaatje bekeek bleek het om een .png bestand te gaan. Maar je kunt toch geen animaties maken met .png? Blijkbaar wel maar dan vraag ik mij af;

hoe?

De animatie is hier te bekijken als je er op klikt:

[url=http://www.websonic.nl/googledoodles/doodle_muzikantencomponisten.php]Martha Graham - 11 mei 2011[/url]

#2

[url=http://en.wikipedia.org/wiki/APNG]APNG[/url]'s worden enkel ondersteund door [url=https://wiki.mozilla.org/APNG_Specification]Mozilla[/url] (Firefox). De kans dat dit als standaard wordt opgenomen door de andere browsers is helaas heel erg klein...

Debestreffende animatie is trouwens geen APNG, maar opgezet d.m.v. javascript: http://www.websonic.nl/googledoodles/marthagraham/iframe.php

[img]http://www.websonic.nl/googledoodles/marthagraham/graham11-hp-sprite.png[/img]

#3

Je hebt het over het Google logo. Toevallig kwam ik iets tegen! [url=http://lmgtfy.com/?q=animated+png]Probeer dit eens.[/url]

#4

Waardevolle bijdrage aspers!

Erg fraai gemaakt trouwens! Was mij ook al opgevallen.

Dit is timing en locatie?

[code]
307,48,89,89
[/code]

#5

De laatste twee getallen zijn de afmetingen van de losse [i]frames[/i], de eerste twee hebben te maken met de locatie binnen het algehele frame (403 x 156 pixels) en eventuele overlap op vorige afbeeldingen.

#6

Die techniek heet [url=http://www.alistapart.com/articles/sprites]CSS sprites[/url]: je plakt alle plaatjes die je nodig hebt in één bestand en je gebruikt CSS en/of javascript om vervolgens maar een deel van een plaatje te tonen. Het wordt veel gebruikt voor hover plaatjes of knoppenbalken in online editors, maar dit is de eerste keer dat ik het iemand voor een animatie heb zien gebruiken.

#7

Moet haast wel een hels karwij zijn om dat op elkaar af te stemmen?!

#8

Ligt aan de lengte van de animatie, deze is redelijk lang dus daar zit wel een paar minuten tijd in... :nerd:

#9

Ik mag inderdaad hopen dat iemand bij Google een script/programma heeft gemaakt om dat automatisch te doen.

#10

Och, deze heb je in 15 minuten wel in elkaar gedraaid...
[code]
[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88], [305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83], [307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84], [306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85], [306,52,91,85],[308,51,88,87,1],[308,50,88,88],[308,49,88,88],[307,49,89,88], [307,50,89,87],[308,51,89,86],[307,54,90,83],[307,57,90,80],[306,58,92,79], [306,58,92,79],[305,60,92,77],[302,61,95,76],[302,63,95,74],[302,51,96,86], [302,66,98,71],[304,67,96,69],[301,63,96,74],[301,58,93,79],[291,52,94,85], [288,50,71,88],[285,43,76,95],[285,37,70,101],[281,29,55,109],[278,20,58,119], [278,20,55,119,1],[277,12,121,127],[271,2,122,138],[267,1,126,139], [264,0,136,140],[260,0,141,140],[255,0,148,140],[252,0,151,140],[249,2,121,138], [247,3,123,137],[246,3,123,137],[246,2,124,137],[258,2,112,137],
[263,2,106,137], [263,2,106,137],[262,2,103,137],[260,2,104,136],[260,2,104,137,1],
[268,2,98,137], [267,2,99,137],[266,2,97,137],[266,3,96,136],[264,3,99,136],
[263,3,100,136], [261,3,100,136],[259,2,138,137],[254,2,126,137],[247,2,101,136], [240,2,108,136],[238,1,110,137],[230,1,118,138],[220,15,128,124],[211,18,137,121] ,[205,43,102,96],[202,45,104,93],[200,38,97,101],[198,38,104,101,1], [197,39,107,100],[197,39,112,100],[213,39,94,110],[212,40,95,111],[211,41,97,111], [209,42,99,112],[209,43,98,112],[213,43,87,112],[213,42,83,113],[211,40,86,109], [211,38,86,103],[211,37,88,112],[211,20,186,131],[213,27,167,122],[212,44,87,105], [210,44,88,98],[195,44,106,98],[189,44,110,98],[182,46,117,99],[173,44,118,96,1], [161,43,130,99],[154,42,137,97],[153,42,137,97],[153,42,137,97],[152,41,137,98], [151,41,137,97],[149,41,145,97],[148,25,144,114],[148,13,144,126],[141,12,153,127], [115,11,173,128],[108,7,180,133],[108,4,180,136],[108,3,176,137,1],[108,1,161,139], [105,1,235,138],[103,1,295,148],[103,0,277,149],[108,0,234,137],[101,0,232,137], [99,0,135,139],[95,0,244,139],[81,0,152,139],[69,0,164,139,1],[66,0,169,139], [65,0,170,139],[63,0,168,138],[61,0,159,138],[35,0,304,139],[19,0,189,140], [18,11,138,129],[18,11,137,129],[18,11,137,128],[18,6,135,133],[7,4,146,136], [6,4,147,136],[3,4,150,136,1],[3,5,150,135],[3,8,150,132],[4,6,394,145], [12,6,388,145],[11,8,389,144],[11,8,387,144],[11,8,387,143,1],[10,8,113,131], [11,8,111,131],[10,9,112,130],[12,9,116,130],[12,9,111,130],[12,9,111,130], [12,9,110,131],[12,34,113,106],[13,35,110,104]
[/code]

#11

Wooooooooooowwww! Vette bug! :grin:

#12

[img]/uploads/community/dff405e1f21fa23f64727a3b8585c411ee55a32f_0.png[/img]
Kan je wel zeggen ja :slant:

#13

Af en toe die mooie, lange balk op je toetsenbord gebruiken jongens :)

#14

Oei, dat is dan toch nog een redelijke klus geweest om te maken. En ik maar denken dat het een (gif)animatie was die omgezet was naar .png. Mijn kennis schiet duidelijk te kort in deze materie. :grin: