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

luckyw 发布于2019-08-01 16:19 / 1089人阅读

摘要：源码以及资源地址下载链接密码首先，打开文件，可以看到库里面有几个待使用的元件我们先用软件自带的发布功能发布一下快捷键也可以在文件里选择发布发布后在文件旁边会有一个和一个我们打开可以看到这样的代码片段我们新建一个，把生成的部分的代

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

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

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

发布后在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上引用
代码如下




    
    Title

这个flash里面有两个动画，我们现在来实现一个效果，在一般情况时播放一个动画，在手指按下时播放另一个动画
我们需要改一改flash生成的代码
把handleComplete
改为以下内容

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位置
将其中一个场景加入舞台中

需要介绍一下createjs下的三个类

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

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();//绑定事件

完成！

混合云私有云 spark从入门到前端从入门到精通云计算从入门到精通 html从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50435.html

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

摘要：源码以及资源地址下载链接密码首先，打开文件，可以看到库里面有几个待使用的元件我们先用软件自带的发布功能发布一下快捷键也可以在文件里选择发布发布后在文件旁边会有一个和一个我们打开可以看到这样的代码片段我们新建一个，把生成的部分的代源码以及资源地址下载：链接: http://pan.baidu.com/s/1kU8LBTH 密码: j7hu 首先，打开flash文件，可以看到库里面有几个...

nihao 2019-08-20 14:22 评论0 收藏0
H5实例教学--从AnimateCC到CreateJS入门

摘要：源码以及资源地址下载链接密码首先，打开文件，可以看到库里面有几个待使用的元件我们先用软件自带的发布功能发布一下快捷键也可以在文件里选择发布发布后在文件旁边会有一个和一个我们打开可以看到这样的代码片段我们新建一个，把生成的部分的代源码以及资源地址下载：链接: http://pan.baidu.com/s/1kU8LBTH 密码: j7hu 首先，打开flash文件，可以看到库里面有几个...

yagami 2019-08-05 17:53 评论0 收藏0
H5实例教学--微信内嵌视频2（素材来自腾讯孙尚香末日机甲皮肤宣传H5）

摘要：说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时，此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。结合之前的两篇解析微信内嵌视频1（案例浅析）https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...

spademan 2019-08-20 14:32 评论0 收藏0
H5实例教学--微信内嵌视频2（素材来自腾讯孙尚香末日机甲皮肤宣传H5）

摘要：说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时，此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。结合之前的两篇解析微信内嵌视频1（案例浅析）https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...

amc 2019-08-05 10:49 评论0 收藏0
H5实例教学--微信内嵌视频2（素材来自腾讯孙尚香末日机甲皮肤宣传H5）

摘要：说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时，此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。结合之前的两篇解析微信内嵌视频1（案例浅析）https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...

hyuan 2019-08-01 16:24 评论0 收藏0