dom动画

[code]









[/code]
[code]
/**
* …dom动画
*jquery对dom动画支持很好
* wowslider.com有很多例子
* @author amyflash.com
*/

(function() {
var dx=0;
var dy=0;
var x = 0;
var y =0;
var d;

d=document.getElementById(“box”);
dx = Math.random()*800;
dy = Math.random()*800;

loop();

function loop()
{
requestAnimationFrame(loop);
x+=(dx-x)*0.1;
y+=(dy-y)*0.1;

d.style.left = x+”px”;
d.style.top = y+”px”;

//d.style.width = x+”px”;
//d.style.height = y+”px”;

if(Math.abs(x-dx)<1) { dx = Math.random()*800; dy = Math.random()*600; } } })(); [/code]

createjs框架学习笔记2-动画工作流

如果能把flashcc导出的html5动画元件和createjs框架结合起来写程序,那是多么爽的事情啊,ok,这就是今天的学习目标。
Step1,用flashcc建立个元件Quanmc,导出类名为Quanmc,里面建立一段动画,注意动画里的移动物件也是元件。也可以给相应帧加上标签。
Step2,Shift+f9一键导出成html5动画。
Step3,用flashdevelop新建一个createjs app.运行以后会在bin目录下生成一个index.html文件。将index.html里面的引用js地址换成,flashcc生成的html文件里的引用js地址,注意把相应的js文件也拷贝到对应的引用目录下。
Step4,在flashdevelop里打开src目录下的Main.js文件,开始激动人心的编辑吧,下面上代码:
[code]
/*
* work_flow study
* Visit http://amyflash.duapp.com/ for documentation, updates and examples.
*
* Copyright (c) 2013 amyflash.com
*
* Distributed under the terms of the MIT license.
* http://www.opensource.org/licenses/mit-license.html
*
* This notice shall be included in all copies or substantial portions of the Software.
*/
/** @define {string} */
var BUILD = “debug”;

(function(){

/**
* Main class of the app.
*/
function Main(){}

/**
* Entry point of the app.
*/
Main.main = function()
{
var main = new Main();
if (!window.HTMLCanvasElement)
{
alert(“Your browser does not support HTML5 Canvas.”);
return;
}
else main.initialize();
// entry point
main.createCircle();
}

var a,b;
Main.prototype.createCircle = function () // 相当于as3里Main类下面的public createCircle方法
{
a = new createjs.Shape();
a.graphics.beginFill(“#FF0000”).drawCircle(0, 0, 50);
a.graphics.endFill();
a.x = 50;
a.y = 200;

b = new lib.Quanmc();
b.gotoAndStop(0);
this.mainStage.addChild(b);
a.addEventListener(“click”,clickHandle);
function clickHandle(event)
{
console.log(“test”);
b.gotoAndPlay(“fall”);
}

this.mainStage.addChild(a);
};
/**
* Initializes the basics of the app.
*/
Main.prototype.initialize = function()
{
/**
* mainCanvas
*/
this.mainCanvas = document.getElementById(“mainCanvas”);
/**
* mainStage
*/
this.mainStage = new createjs.Stage(this.mainCanvas);
this.mainStage.snapToPixelsEnabled = true;
/*
* createjs
*/
createjs.Ticker.addListener(this);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(60);

}

/**
* Updates the stage on Ticker tick.
* @param event The recieved tick event.
*/
Main.prototype.tick = function(event)
{
if(b.currentFrame==24)
{
b.gotoAndStop(24);
}
this.mainStage.update();
}

/**
* Expose class.
*/
window.Main = Main;

})();

[/code]
注意这段代码里面这几行
[code]b = new lib.Quanmc();
b.gotoAndStop(0);
this.mainStage.addChild(b);
[/code]
Quanmc就是我们在flashcc里面自定义的动画元件导出类名了,
注意起始帧数是0,
其他用法和在as3里面基本一样用的,有么有啊!!!!!!!
Step5,快捷键f5就用google js压缩工具把src目录下的js文件压缩到bin目录下的js文件了,文件体积缩小了很多啊,有么有啊!!!!
最后在chrome下跑bin/index.html
点击红圆圈,就会发现html5动画按你所想跑起来啦!!!!!!!