Google粘土动画纯Javascript代码实现

美国粘土动画大师诞辰90周年之际，Google的Doodle换成了一组粘土动画，效果逼人：

纯HTML/CSS/Javascript实现，Google的工程师技术水平让大家眼红啊。于是一大批程序员开始依样画葫芦，自己动手实现该效果。

从网上下载看了一些，觉得和Google原版的都多少有一些差异，于是我也手痒，小COPY了一下：

演示地址：http://longzuyuan.cn/doodle/clokey/index.htm （有时网速有点慢，请耐心，小绿人岗比图片大一点，有时可能加载不出来，可下载看。不太清楚怎么把效果加到博客正文，知道的还望分享一下。）

下载地址：http://longzuyuan.cn/doodle/download/clokey.zip

首先HTML：

         <div id="logo-gumby-hold"></div><div id="logo-gumby"></div><div id="logo-gumby-loop"></div><div id="logo-blockheads-hold"></div><div id="logo-blockheads"></div><div id="logo-prickle-hold"></div><div id="logo-prickle"></div><div id="logo-goo-hold"></div><div id="logo-goo"></div><div id="logo-pokey-hold"></div><div id="logo-pokey"></div>

XXX-hold 是用来显示初始画面的，XXX-loop 是用来显示小绿人岗比的初始循环动画，其它都是显示动画的。

然后用JS定义N个要动画的对象：

   var allIMG = { //所有图片数组"logo-blockheads": {picture: "blockheads.jpg",left: 31,top: 35,width: 135,height: 156,frames: 89,positionX: 0,positionY: 0,stopMouseEvent: boolNo,click: function() {clickEvent("logo-blockheads")},over: function() {mouseOverOrOut("logo-blockheads", boolYes)},out: function() {mouseOverOrOut("logo-blockheads", boolNo)}}......

并且在入口函数里绑定属性和方法，这使得添加和修改一个新的对象变的容易多了。

然后定义一个面向对象模型，它有基本的动画属性和方法：

 var model = function(imgName, f) {var b = allIMG[imgName];this.id = imgName;this.element = document.getElementById(this.id);this.g = b.positionX || 0;this.frame = 0;this.frames = b.frames;this.playing = boolNo;this.width = b.width;this.s = f || {}};model.prototype.start = function(a) {if (!a && !this.playing) {this.playing = boolYes;allIMG[this.id].stopMouseEvent = boolYes;this.frame = 0}};//是否正在播放model.prototype.isPlaying = function() {return this.playing};model.prototype.w = function() {if (this.s) {var a = this.s[this.frame];a && a()}};model.prototype.animate = function() {this.frame++;if (this.frame == this.frames) {this.playing = d;allIMG[this.id].stopMouseEvent = boolNo} else {setBackgroundPosttion(this.element, this.g + this.frame * this.width, this.h);this.w()}};

再定义一个面向对象模型继承上面的对象，并重写相应的方法、添加新的属性。这显的有点多余，但这其实是面向对象的思想。

frame = function(name, arr, b, e, i) {model.call(this, name);this.v = arr;this.frames = this.v.length; //帧this.s = b || {}; //this.C = e || -1;this.z = i || -1},x = function() {};x.prototype = model.prototype;frame.F = model.prototype;frame.prototype = new x;frame.prototype.start = function(a) {....};frame.prototype.animate = function() {....};

然后再加个真正播放动画的函数，就基本搞定了。为什么要单独写个动画函数呢？实际上动画的原理就是通过不停的变换div的背景图片显示位置来实现的，而在Javascript中，最好是通过setTimeout来实现，且setTimeout最好还不要带参数，所以本函数会循环globle变量检查谁正在播放，如果正在播放则加一帧。

playAnimate = function() {if (google.doodle.isInit) {for (var a in allModels) {var f = allModels[a];f && f.isPlaying() && f.animate()}//播放370次后暂停if (++counter < 370) google.doodle.timeout = window.setTimeout(playAnimate, 84);else {google.doodle.isInit = boolNo;openMouseEvent()}}},

代码中也使用了大量的 && 和 || ，这些完全可以换成if，但前台代码能省则省，所以Javascript可以多用这些，不推荐后台代码使用，不易读！

最后效果和google应该说基本没差别，当然只是自已觉得！

下载地址：http://longzuyuan.cn/doodle/download/clokey.zip

Google粘土动画纯Javascript代码实现相关推荐

纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
如何用 200 行 JavaScript 代码实现人脸检测？
在超市.地铁.车站等很多场景中,人脸识别已经被广泛应用,但是这个功能究竟是怎么实现的? 在本文中,将以 pico.js 库为例,分享实现轻量级人脸识别功能的具体开发过程 . 作者 | tehnokv ...
精心收集的95个超实用的JavaScript代码片段（ES6 +编写）
Array 数组 Array concatenation (数组拼接) 使用Array.concat(),通过在args中附加任何副本和/或值来拆分一个数组. JavaScript代码: const ...
[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
网上搜索了,目前主流的Js代码压缩工具主要有Uglify.YUI Compressor.Google Closure Compiler,简单试用了UglifyJS 和Google Closure Co ...
图解 Google V8 # 01：V8 是如何执行一段 JavaScript 代码的？
说明图解 Google V8 学习笔记 JavaScript 的设计思想 JavaScript 借鉴了很多语言的特性: C 语言的基本语法 Java 的类型系统和内存管理 Scheme 的函数作为一 ...
Google Doodle粘土动画
Google Doodle粘土动画,这是Google Doodle设计的Logo图标,该动画是为了纪念粘土大师而设计的,该动画是利用一张图片实现的,通过播放图片中不同的帧来实现这个动画. 统一开发环境 ...
解读Google Analytics（分析）客户端javascript代码
/** * 代码翻译:周培公 * 电子邮件:peigong@foxmail.com * 腾讯微博:http://t.qq.com/lanxmail * 新浪微博:http://weibo.com/17 ...

Google粘土动画纯Javascript代码实现

Google粘土动画纯Javascript代码实现相关推荐

最新文章

热门文章