使用createjs实现复杂网页动画

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(用于实现页面切换)

<script src="libs/js/swiper.min.js"></script>
<script src="libs/js/createjs-2015.11.26.min.js"></script>
<script src="js/main.js"></script>

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)
}