How The Martha Graham Dancing Google Logo is Animated (Short Explanation)

s, styled like so…

//...and so on, and so on

Firebug Inspection of animated Google logo, mid-flight

Firebug is a web develper’s best friend

The best way to see how these will tie together is to use a tool like Firebug or the Webkit Inspector to inspect the Google logo after the animation is complete. Since the logo will only be for a single day, I’ve included a screen capture.

Lastly, tie it all together with some clever JavaScript that will build and append each of the above

s over time, to create animated motion.

Google doesn’t appear to have a linked library to accomplish this. Instead they have the following script tag located on the page today:

The JavaScript takes the looong array of coordinates, assigned as d, and “paints” a

the width, height, and position needed every 83 milliseconds, or at about 12 FPS.

The brilliance of the animation is that every frame is exactly the height and width that it needs to be to appear as an animated frame. By simply adding the cumulated width and height of all previous frames, the PNG is positioned exactly where it needs to be to show the next frame… adjusted with a clever for loop for “line breaks” in the sprite PNG.

I know this isn’t exactly a tutorial. My apologies to anyone who was looking for copy-and-pasteable code. Hopefully, this at least satisfies someone’s curiosity.  And if you need to buy dance wear, our store All Around Dance can help with that too.

Posted in Almost How-To, Featured Posts. Permalink.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *