easelJS - Cache_vday

最新推荐文章于 2024-06-07 02:15:26 发布

weixin_30836759

最新推荐文章于 2024-06-07 02:15:26 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/stono/p/5706303.html

本文介绍了一个使用 EaselJS 实现的心形轨迹动画案例。通过创建多个缓存容器来模拟心形的移动效果，并详细展示了如何利用 createjs 的特性实现文字与动画的结合。

easelJS - Cache_vday

$(function() {
    init();
});
// Cache_vday

var canvas;
var stage;
var container;
var captureContainers;
var captureIndex;

function init(e) {
    
    canvas = document.getElementById('demo1');
    stage = new createjs.Stage(canvas);
    
    var w = canvas.width;
    var h = canvas.height;
    
    container = new createjs.Container();
    stage.addChild(container);
    container.name = "cname";
    
    captureContainers = [];
    captureIndex = 0;
    
    for(var i=0;i<1;i++){ // i<1就看一个的轨迹；但是还是会有多个显示出来；
        var heart = new createjs.Shape();
        heart.graphics.beginFill(createjs.Graphics.getHSL(Math.random()*30-45,100,50+Math.random()*30));
        heart.graphics.moveTo(0,-9).curveTo(0,-20,8,-20).curveTo(16,-20,16,-10).curveTo(16,0,0,12);
        heart.graphics.curveTo(-16,0,-16,-10).curveTo(-16,-20,-8,-20).curveTo(0,-20,0,-9);
        heart.y = -100;
        
        container.addChild(heart);
    }
    
    var text = new createjs.Text("the longer I'm with you\nthe more I love you","bold 24px Arial","#312");
    text.textAlign = "center";
    text.x = w/2;
    text.y = h/2;
    stage.addChild(text);
    
    for(i=0;i<100;i++){ // 这个如果i<10，就会看到其轨迹；
        var captureContainer = new createjs.Container();
        captureContainer.name = "cname"+i; // ADD 设置一个名字；
        captureContainer.cache(0,0,w,h); // 缓存的内容是什么东西？
        captureContainers.push(captureContainer);
    }
    
    createjs.Ticker.addEventListener("tick",tick);
    createjs.Ticker.setFPS(30);
}

function tick(event) {
    var w = canvas.width;
    var h = canvas.height;
    var l = container.getNumChildren();
    console.log("container.getNumChildren() is : "+container.getNumChildren());
    if(l>1){
        console.log("l > 1"); // l始终等于1；为什么界面上面会有两个以上的心形标记？而且心的速度也是一样的；
    } // 为什么会有两个以上？ 表面上看着是心在动，实际是不停的播放不同的图片container，当heart.y<-50的时候，会重新设置一下heart；
      // 每一个heart经过屏幕的时候，被100个container依次给cache了；
    
    captureIndex = (captureIndex+1)%captureContainers.length;
    console.log("stage.getChildAt(0) is : "+stage.getChildAt(0)); // ADD 看看是什么东西，是Container；
    console.log("stage.getNumChildren() is : "+stage.getNumChildren()); // ADD 看看有多少个孩子? 始终是2个孩子；
    stage.removeChildAt(0); // 移除了谁？移除了container
    var captureContainer = captureContainers[captureIndex];
    stage.addChildAt(captureContainer, 0); // 每次都往0位置上面添加？是的；
    captureContainer.addChild(container); // 再把container作为孩子加了进来；
    
    for(var i=0;i<l;i++){
        var heart = container.getChildAt(i);
        if(heart.y < -50){ // 第一次重新处理一下坐标；不仅仅执行一次；当y坐标逐渐递减小于-50的时候，就需要重新执行一下；
            console.log("this is reset y");
            heart._x = Math.random()*w;
            heart.y = h*(1+Math.random())+50; // 重新修正y坐标；
            heart.perX = (1+Math.random())*h;
            heart.offX = Math.random()*h;
            heart.ampX = heart.perX*0.1*(0.2+Math.random());
            heart.velY = -Math.random()*2-2;
            heart.scaleX = heart.scaleY = Math.random()+1;
            heart.rotation = Math.random()*40-20;
            heart.alpha = Math.random();
        }
        heart.y += heart.velY; // 每次减少一下y坐标；
        heart.x = heart._x+Math.cos((heart.offX+heart.y)/heart.perX*Math.PI*2)*heart.ampX;
    }
    
    captureContainer.updateCache("source-over");
    
    stage.update(event);
}