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/clokey/index.htm （有时网速有点慢，请耐心，小绿人岗比图片大一点，有时可能加载不出来，可下载看。不太清楚怎么把效果加到博客正文，知道的还望分享一下。）

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