createjs简介
官方解释：CreateJS是基于HTML5开发的一套模块化的库和工具。
基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。
官方网址：https://createjs.com/
我应该什么时候用createjs?
如果只是简单动画，建议使用css3或者animate.css这个库就可以了。
当需要开发复杂交互逻辑，例如问答游戏，打蚊子之类的小游戏，或者一些需要复杂图形/线条变换的页面，可以使用createjs完成。
EASELJS、TWEENJS、SOUNDJS、PRELOADJS都是什么？
EASELJS：一个JavaScript库,使HTML5 Canvas标签变得更简单。
用于创建游戏，生成艺术作品，和处理其他高级图形化等有着很友好的体验。（用来方便在页面上绘制元素的）
TWEENJS：TweenJS类库主要用来调整和动画HTML5和Javascript属性， 提供了简单并且强大的tweening接口。（用来做动画效果的）
SOUNDJS：SoundJS提供了简单而强大的API来处理音频。 通过插件来执行实际的音频实现，简单直接的处理声音。（用来控制音频播放的）
PRELOADJS：PreloadJS是一个用来管理和协调相关资源加载的类库， 它可以方便的帮助你预先加载相关资源。（资源预加载）
demo 效果，效果有点渣，可以github下载源码自行查看
image
github地址：https://github.com/zhengguorong/createjs_h5
源码分析
打开src/index.html 引入createjs和swiperjs(用于实现页面切换)
main.js主要页面逻辑片段
以下代码是swiper初始化代码，监听onSlideChangeEnd事件，防止页面多次渲染。
var hasSlidePage = [] // 存储已经看过的页面，用于防止页面反复渲染
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
pagination: '.swiper-pagination',
mousewheelControl: true,
touchRatio: 0.5,
onSlideChangeEnd: function (swiper) {
if (hasSlidePage.indexOf(swiper.activeIndex) > -1) {
return
}
hasSlidePage.push(swiper.activeIndex)
switch (swiper.activeIndex) {
case 1:
renderPage2()
}
}
})
使用preload预加载资源
// 加载资源
function loadAssest() {
// 加载资源列表
manifest = [
{ src: "clearLight/blue.png", id: "blue" }
... //此处省略
]
// 统计加载进度
var loadCount = 0
preload = new createjs.LoadQueue(false, "./images/");
// 每加载成功一个资源回调一次
preload.on("fileload", function (event) {
loadCount++
document.querySelector("#process").innerHTML = (loadCount * 100 / manifest.length).toFixed(0) + '%'
})
// 所有资源加载完毕后的回调
preload.on('complete', function (event) {
// 隐藏加载层，显示内容层
document.querySelector(".loading-cover").style.display = 'none'
document.querySelector(".swiper-container").style.display = "block"
// 渲染第一个页面
renderPage1()
})
// 使用preload预加载指定资源
preload.loadManifest(manifest)
}
第一个页面绘制代码
// 绘制第一页
function renderPage1() {
// 创建画布
var canvas = document.getElementById("canvas1")
var stage = new createjs.Stage(canvas)
// 由于添加元素后需要手动更新画布，比较麻烦，该防范监听tick事件，进行自动更新
createjs.Ticker.addEventListener("tick", handleTicker);
function handleTicker() {
stage.update();
}
// 在画布添加元素
var title = this.createText(stage, "超浓缩", "normal 80px microsoft yahei", "#fff", 40, 40)
// 不知道为什么中文不能自动换行，英文是可以的，所以中文用\n进行换行
var subTitle1 = this.createText(stage, "·科技突破，高能量配方，活性物浓度高达47%，是普通洗衣液\n的三倍以上，获得「浓缩+」洗衣液认证", "normal 24px microsoft yahei", "#fff", 40, 160)
var subTitle2 = this.createText(stage, "·一泵8g洗8件，小体积，大能量，660g=2.2kg，用量减少\n70%以上", "normal 24px microsoft yahei", "#fff", 40, 240)
var logo = this.createImage(stage, 'superEnrichment/logo', 116, 83, 320, 60)
var bigPower = this.createImage(stage, 'big_power', 163, 154, 40, 320)
var concentration = this.createImage(stage, 'concentration', 230, 154, 250, 320)
var bottom = this.createImage(stage, 'bottom', 600, 360, 75, 800)
var waterDrop = this.createImage(stage,'water_drop', 300, 350, 223, 600)
var light_line_long = this.createImage(stage,'light_line_long', 23, 300, 110, 670)
var light_line_long2 = this.createImage(stage,'light_line_long', 23, 300, 365, 810)
var light_line_long3 = this.createImage(stage,'light_line_long', 23, 300, 620, 670)
// 对元素设置淡出动画
createjs.Tween.get(title).to({ alpha: 1 }, 300)
createjs.Tween.get(subTitle1).to({ alpha: 1 }, 300)
createjs.Tween.get(subTitle2).to({ alpha: 1 }, 300)
createjs.Tween.get(logo).to({ alpha: 1 }, 300)
createjs.Tween.get(bigPower).to({ alpha: 1 }, 300)
createjs.Tween.get(concentration).to({ alpha: 1 }, 300)
createjs.Tween.get(waterDrop).to({ alpha: 1 }, 300)
createjs.Tween.get(waterDrop, { loop: true }).to({ y: 570 }, 1000, createjs.Ease.getPowInOut(2)).to({ y: 600 }, 1000, createjs.Ease.getPowInOut(2))
createjs.Tween.get(bottom).to({ alpha: 1 }, 300)
createjs.Tween.get(light_line_long, { loop: true }).to({ alpha: 1 }, 1000).to({ alpha: 0.4 }, 1000)
createjs.Tween.get(light_line_long2, { loop: true }).to({ alpha: 1 }, 1000).to({ alpha: 0.4 }, 1000)
createjs.Tween.get(light_line_long3, { loop: true }).to({ alpha: 1 }, 1000).to({ alpha: 0.4 }, 1000)
}