自己模拟实现一下Google的赛马Doodle

今天的Google Doodle是个动态的，是一个骑马的动态Doodle，是谷歌纪念英国实验摄影师埃德沃德·迈布里奇182周年诞辰，埃德沃德·迈布里奇是运动摄影的开创者，所以谷歌涂鸦以一个运动的摄影作为背景创作的。

埃德沃德·迈布里奇（Eadweard J. Muybridge，1830年4月9日－1904年5月8日），英国摄影师，他因使用多个相机拍摄运动的物体而著名，他发明的“动物实验镜”（Zoopraxiscope）是一种可以播放运动图像的投影机，将连续图像绘制在一块玻璃圆盘的边缘，随着玻璃的旋转，将影像投射出去，这样就使这些影象显得像在运动。

我对这个doodle的实现比较感兴趣，下面做个实现小程序。只用一幅图的时候效果是这样的（稍等下，运动缓冲）：

当两幅图同时使用的使用，就可以达到连贯的赛马效果了。

测试代码如下

view source

print ?

`01`	`var` `scrollBox = document.getElementById("classicScrollBox");`

`02`	`var` `num_record = 0;//起止位置计算`

`03`	`var` `num_motion = 1000;//动画执行间隔`

`04`	`var` `num_motionTime = 5;//动画缓动系数`

`05`	`window.onload =` `function(){`

`06`	`function` `scrolls(){`

`07`	`scrollBox.style.left = (parseInt(scrollBox.style.left)-67) +'px';`

`08`	`num_record += 67;`

`09`	`if(num_record == 804){`

`10`	`scrollBox.style.left = 0 +` `'px';`

`11`	`num_record = 0;`

12 }

`13`	`num_motionTime = Math.ceil(num_motion/100);`

`14`	`if` `(num_motionTime == 0) {`

`15`	`num_motionTime = 1;`

16 }

`17`	`if` `(num_motion != 40) {`

`18`	`num_motion -= 10*num_motionTime;`

19 }

`20`	`setTimeout(scrolls,num_motion);`

21 }

`22`	`setTimeout(scrolls,num_motion);`

23 }

这次的代码不是很复杂，主要是使用css的背景属性，使用JavaScript计时器来改变时间，调整图片背景的位置达到动画效果。

巴特西

自己模拟实现一下Google的赛马Doodle

最新文章

热门文章