谷歌互动涂鸦 [英] Google Interactive Doodle

问题描述

有人知道Google互动涂鸦奥运如何运作。
http://www.google.com/doodles/soccer-2012

我发现Div是hplogo
，风格正好在它的上面，例如：

  #hplogo {background：url（/logos/2012/soccer12-hp.png）.... 
  

我无法弄清楚得分是如何计算的;对象如何移动等。它是一个可读的JS文件？
提前致谢。

此致
同事开发商

解决方案

有些涂鸦使用Canvas显示动画。使用javascript中的计时器绘制从加载的图像中获取的不同帧。

一些使用CSS属性 background-image 。使用javascript计时器更改CSS属性 background-position 以创建动画。

使用更多的javascript进行交互式动画制作。

例如： http://www.google.com/logos/2012/hurdles12-hp-sprite.png ，
http://www.google.com/logos/2012/ basketball12-hp-anim.png

Does anybody know how the Google Interactive Doodles for Olympics work. http://www.google.com/doodles/soccer-2012

I find that the Div is hplogo and the style is right above it, like:

     #hplogo{background:url(/logos/2012/soccer12-hp.png)....

I can't figure out how the score is calculated; How the objects are moved, etc. Is it a readable JS file? Thanks in advance.

Sincerely, A fellow developer

解决方案

Some doodles use Canvas for showing the animations. Different frames, taken from a loaded image are drawn using a timer in javascript.

Some use CSS property background-image. CSS propertybackground-position is changed using a javascript timer to create animation.

Animations are made interactive using more javascript.

e.g: http://www.google.com/logos/2012/hurdles12-hp-sprite.png, http://www.google.com/logos/2012/basketball12-hp-anim.png

这篇关于谷歌互动涂鸦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！