美文网首页
使用createjs实现复杂网页动画

使用createjs实现复杂网页动画

作者: 蟹老板爱写代码 | 来源:发表于2018-01-05 14:34 被阅读0次

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

相关文章

  • 使用createjs实现复杂网页动画

    createjs简介 官方解释:CreateJS是基于HTML5开发的一套模块化的库和工具。基于这些库,可以非常快...

  • iOS动画-认识CoreAnimation

    前言 在iOS中,普通的动画可以使用UIKit提供的方法来实现动画,但如果想要实现复杂的动画效果,使用CoreAn...

  • Android 动画: 逐帧动画

    前言 动画的使用 是 Android开发中常用的知识 可是动画的种类繁多、使用复杂,每当需要 采用自定义动画 实现...

  • 动画

    前言动画的使用 是 Android开发中常用的知识可是动画的种类繁多、使用复杂,每当需要 采用自定义动画 实现 复...

  • Android 动画:插值器(Interpolator)

    前言 动画的使用 是Android开发中常用的知识 可是动画的种类繁多、使用复杂,每当需要采用自定义动画 实现 复...

  • H5动画——createjs

    用H5做动画可能会用到前端游戏引擎,知名的有CreateJS、PixiJS。CreateJS 是Adobe公司出品...

  • requestAnimationFrame 请求动画帧 一定懂

    requestAnimationFrame 在网页开发中实现动画实现动画的方式有下面几种。css中的 transi...

  • Flutter学习笔记33-交织动画 Hero动画

    交织动画 有些时候我们可能会需要一些复杂的动画,这些动画可能由一个动画序列或重叠的动画组成,要实现这种效果,使用交...

  • 使用CADisplayLink实现UILabel动画特效

    使用CADisplayLink实现UILabel动画特效 使用CADisplayLink实现UILabel动画特效

  • 2018-11-27第九天总结

    一、 动画网页动画可以通过以下几种方式实现(gif、flash 除外),css3 动画SVG 动画JS 动画(包括...

网友评论

      本文标题:使用createjs实现复杂网页动画

      本文链接:https://www.haomeiwen.com/subject/gmtsnxtx.html