關於createjs旋轉滾動的信息

本文目錄一覽：

• 1、如何使用Createjs來編寫HTML5遊戲EaselJS簡介
• 2、如何使用Createjs來編寫HTML5遊戲TweenJS和Tick動畫
• 3、JS實現滾動條觸底載入更多

如何使用Createjs來編寫HTML5遊戲EaselJS簡介

CreateJS

CreateJS 是一套可以構建豐富交互體驗的 HTML5 遊戲的開源工具包，旨在降低 HTML5 項目的開發難度和成本，讓開發者以熟悉的方式打造更具現代感的網路交互體驗。

CreateJS 中包含：

EaselJS：用於 Sprites、動畫、向量和點陣圖的繪製，創建 HTML5 Canvas 上的交互體驗（包含多點觸控），同時提供 Flash 中的「顯示列表」功能。

TweenJS：一個簡單的用於製作類似 Flash 中「補間動畫」的引擎，可生成數字或非數字的連續變化效果。

SoundJS：一個音頻播放引擎，能夠根據瀏覽器性能選擇音頻播放方式。將音頻文件作為模塊，可隨時載入和卸載。

PrloadJS：幫助你簡化網站資源預載入工作，無論載入內容是圖形、視頻、聲音、JS、數據……

以上的Createjs介紹來自百度，不過通過介紹可以知道，雖然CreateJS看起來複雜，不過四個部分各有作用，其中最主要的就是EaselJS，其餘三項不過是為他服務。

一.如何使用EaselJS

首先到 下載最新版的EaselJS，下載解壓後可以在lib文件夾中找到easeljs-0.8.1.min.js,同時在壓縮包中可以找到一個examples和tutorials目錄，這兩個目錄中包含一些入門介紹和例子，有英語基礎可以看看，DOC文件夾中包含easeljs所有的api。（同理，可以得到createjs包含的其他三項，其目錄結構都與EaselJS相似）。

1.得到easeljs-0.8.1.min.js後，新建一個HTML5文件並導入之：

[html] view plain copy

script src=”easeljs-0.8.1.min.js”/script

2.入口函數和創建canvas標籤

[html] view plain copy

body onload=”init();”

canvas id=”game” width=”1000″ height=”700″ style=”background-color: white”/canvas

/body

3.編寫自己的javascript代碼，在函數init()中首先應該使用HTML中的canvas標籤來創建一個Stage，createjs中用到的所有元素，都是添加在這個stage當中的，添加後調用stage.update()方法即可使得添加的元素顯示在頁面上。在創建Stage時，可以直接使用Canvas的id來創建，也可以調用document.getElementById(“game”)，選取canvas來創建，沒有區別。

[javascript] view plain copy

script

function init(){

var stage = new createjs.Stage(“game”);

…….

stage.update();

}

/script

二.使用EaselJS創建圖形和文字

最簡單的遊戲都是由文字和圖形組成，使用EaselJS添加文字和圖形非常的簡單。

1.添加文字

[html] view plain copy

var txt = new createjs.Text(“HELLO”,”20px Times”,”#000″);

Createjs中所有的元素都通過調用new createjs.XXXXX來創建，Text包含三個參數分別是顯示的字元，字體及大小，最後是顏色。當然在創建完成後可以隨意改變txt的x,y坐標和對其，居中以及內容等等的屬性。例如：

[html] view plain copy

txt.x = 100;

txt.y = 100;

txt.text = “hello, world!”

完成後記得一定要把新創建的txt添加到stage中才能正常顯示

如何使用Createjs來編寫HTML5遊戲TweenJS和Tick動畫

CreateJS包含4個部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了開發Html5遊戲的所有功能，僅僅使用EaselJS幾乎可以完成所有的開發工作，其餘三項可以看作EaselJS的輔助工具。比如響應tick事件然後改變元素坐標就可以實現動畫功能，而使用TweenJS來創建補間動畫，則可以省去你很多代碼，簡化了操作。

一個簡單的tick動畫看起來是這樣的：

var stage, circle;  

   function init(){  

       stage = new createjs.Stage(document.getElementById(‘game’));  

       createjs.Ticker.addEventListener(“tick”, handleTick);  

       createjs.Ticker.setFPS(60);  

       circle = new createjs.Shape();  

       circle.graphics.f(“red”).dc(0,0,50);  

       circle.x = 0;  

       circle.y = 100;  

       stage.addChild(circle);  

       circle.addEventListener(“click”, function(event){  

           createjs.Ticker.setPaused(!createjs.Ticker.getPaused());  

       });  

   }  

   function handleTick(event){  

   if(!event.paused){  

       circle.x +=5;  

       if(circle.x  1000){  

           circle.x = 0;  

       }  

   }  

       stage.update();  

   }

JS實現滾動條觸底載入更多

原理

1.通過監聽滾動區域DOM的scroll事件, 計算出觸底

// 滾動可視區域高度 + 當前滾動位置 === 整個滾動高度

scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight

2.觸底後觸發列表添加, 列表添加使用createDocumentFragment, 將多次插入的DOM先存入內存, 最後一次填充進去, 提高性能, 也方便後面的MutationObserver監聽

3.使用MutationObserver監聽列表的DOM添加, 添加完畢後, 隱藏載入中提示

示例

參考資料