H5实例教学--从AnimateCC到CreateJS入门

时间 2019-12-06

标签 h5 实例教学 animatecc createjs 入门繁體版

原文原文链接

源码以及资源地址下载：
连接: http://pan.baidu.com/s/1kU8LBTH 密码: j7huhtml

首先，打开flash文件，能够看到库里面有几个待使用的元件
json

咱们先用软件自带的发布功能发布一下
快捷键 alt+shift+F12,也能够在文件里选择发布canvas

发布后在flash文件旁边会有一个html和一个js服务器

咱们打开demo1.html能够看到这样的代码片断函数

var canvas, stage, exportRoot;
function init() {
   // --- write your JS code here ---
   
   canvas = document.getElementById("canvas");
   images = images||{};
   ss = ss||{};

   var loader = new createjs.LoadQueue(false);
   loader.addEventListener("fileload", handleFileLoad);
   loader.addEventListener("complete", handleComplete);
   loader.loadFile({src:"images/demo1_atlas_.json", type:"spritesheet", id:"demo1_atlas_"}, true);
   loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
   if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
   var queue = evt.target;
   ss["demo1_atlas_"] = queue.getResult("demo1_atlas_");
   exportRoot = new lib.demo1();

   stage = new createjs.Stage(canvas);
   stage.addChild(exportRoot);
   stage.update();

   createjs.Ticker.setFPS(lib.properties.fps);
   createjs.Ticker.addEventListener("tick", stage);
}

咱们新建一个test.js，把html生成的script部分的代码复制进去，而后再新建一个html上引用
代码以下动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="init();" style="margin: 0;padding: 0;">
    <canvas id="canvas" width="720" height="1206" style="background: #ddd;position: absolute;left: 50%;transform: translateX(-50%)"></canvas>
    <script src="lib/createjs.js"></script>
    <script src="demo1.js"></script>
    <script src="test.js"></script>
</body>
</html>

这个flash里面有两个动画，咱们如今来实现一个效果，在通常状况时播放一个动画，在手指按下时播放另外一个动画
咱们须要改一改flash生成的代码
把handleComplete
改成如下内容spa

var queue = evt.target;
stage = new createjs.Stage(canvas);
ss["demo1_atlas_"] = queue.getResult("demo1_atlas_");
var animate1 = new lib.view1();
var animate2 = new lib.view2();
// animation.setTransform(205,209);
animate1.x="360";
animate1.y="600";
animate2.x="300";
animate2.y="570";
animateList= [animate1,animate2];
stage.addChild(animate2);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);

建立两个场景animate1/animate2
new lib.view1()为新建一个场景的构造方法，场景的类名对应程序中

而后给两个场景定好x/y位置
将其中一个场景加入舞台中code

须要介绍一下createjs下的三个类orm

Stage是createjs的一个舞台类
至关于最根部的场景，须要展现的场景添加到他的内部，构造函数能够传入一个canvas标签，表示对对应的canvas进行绘制。
stage = new createjs.Stage(canvas);
能够得到一个舞台对象，把须要展现的内容放入该对象中htm

LoadQueue是一个加载器类,
须要用它加载资源，也能够绑定事件监听，有如下事件

用如下哎方法加载文件

Ticker
这是一个相似setIntervald的东西，能够在这里对canvas的绘制频率进行控制
tick事件就是帧变化的时候的事件
createjs.Ticker.addEventListener("tick", stage);
此为当帧变化时刷新stage，stage也能够传入一个function

ok至此咱们已经成功添加一个元件到舞台中，并播放动画。
由于须要加载一个本地资源的json文件，因此你须要在当前目录搭建一个本地服务器来跑。
不然会出现如下问题

如今咱们须要实现触碰屏幕播放另外一个动画
写一个事件绑定的方法

function bindEvent() {
    canvas.addEventListener("touchstart",function(){
        stage.removeChild(animateList[1]);
        stage.addChild(animateList[0]);
    })
    canvas.addEventListener("touchend",function(){
        stage.removeChild(animateList[0]);
        stage.addChild(animateList[1]);
    })

该方法使手指触碰与离开时更换舞台中的动画，好了功能完成，不过此时用手机看

canvas并无填充整个屏幕
加一个自适应屏幕的方法

function resizeCanvas(){
    model = new createjs.EventDispatcher();//用来捕获事件的原型
    stageWidth =  document.documentElement.clientWidth;
    stageHeight = document.documentElement.clientHeight;
    stageScale = stageWidth/(750/2);
    canvas = document.getElementById("canvas");
    if(stageWidth/stageHeight > 0.665)
    {
        stageScale = stageHeight/(1206/2);
        canvas.style.left = (stageWidth - 750/2*stageScale)/2 + 'px';
    }
    else
    {
        stageScale = stageWidth/(750/2);
    }



    canvas.style.width = 750/2*stageScale + 'px';
    canvas.style.height = 1206/2*stageScale + 'px';
}

在资源加载完成的回调方法中调用它
resizeCanvas();//自适应宽高
bindEvent();//绑定事件

完成！