日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Createjs的控件 BitMap、MovieClip、Sprite

發(fā)布時間：2023/12/16 编程问答 32 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Createjs的控件 BitMap、MovieClip、Sprite 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Createjs控件
一、BitMap控件 ?????? 掌握了BitMap之后，我們可以快速的對圖片做處理。 ????? 1、首先準(zhǔn)備一張我們需要引入的照片，在HTML代碼中引入easeljs文件。 <script src="js/easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script> 2、使用canvas標(biāo)簽創(chuàng)建stage
var stage = new createjs.Stage("canvas"); 3、創(chuàng)建一個容器Container,并且將該容器放進(jìn)stage中，代碼如下： var gameView = new createjs.Container();stage.addChild(gameView); 4、使用控件Bitmap引入我們需要的圖片，并且將該圖片放進(jìn)Container中 var bitmap = new createjs.Bitmap("img/image.jpg");gameView.addChild(bitmap); 5、最后使用Ticker??事件監(jiān)聽（給stage設(shè)置tick,相當(dāng)于js中的setInterval,定時運行一個函數(shù)），我們用來定時的刷新stage; createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",function(){stage.update();})


最終圖片顯示，加載成功；



二、MovieClip控件：影片剪輯
掌握了MovieClip可以更好地處理動畫。

TweenJS類庫主要用來調(diào)整和動畫HTML5和Javascript屬性。

1.首先 我們需要引入三個js文件，分別為：easelJS、tweenJS、movieclipJS.

<script src="easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="tweenjs-0.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="movieclip-0.8.1.min.js" type="text/javascript" charset="utf-8"></script>

2.在body中寫一個canvas，且引入我們寫邏輯處理的js的文件。

<canvas id="movieClip" width="400px" height="400px"></canvas> <script src="movieClip.js" type="text/javascript" charset="utf-8"></script>

3.?使用canvas標(biāo)簽創(chuàng)建stage


var stage = new createjs.Stage("canvas");


4、使用Ticker??事件監(jiān)聽（給stage設(shè)置tick,相當(dāng)于js中的setInterval,定時運行一個函數(shù)），我們用來定時的刷新stage;代碼如下：


createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick", stage);


5.創(chuàng)建MovieClip,并且添加給stage

var mc = new createjs.MovieClip(null, 0, true, {start: 50, //50為起始的時間線， 循環(huán)為true;stop:100 }); //跳轉(zhuǎn)到當(dāng)前時間線的50 的位置 stage.addChild(mc);

6.繪畫出2個圓。以0.100為原點半徑為30，代碼如下：

var state1 = new createjs.Shape(new createjs.Graphics().beginFill("#999999").drawCircle(0, 100, 30)); var state2 = new createjs.Shape(new createjs.Graphics().beginFill("#555555").drawCircle(0, 100, 30));

7.設(shè)置他們從不同的位置開始做動畫效果，這個Timeline類同步多個(tweens)漸變并允許它們作為一個整體被控制。

mc.timeline.addTween(createjs.Tween.get(state1).to({x: 0}).to({x: 400}, 100).to({x: 0}, 100)); mc.timeline.addTween(createjs.Tween.get(state2).to({x: 400}).to({x: 0}, 100).to({x: 400}, 100));

ps:

state1:從x為0 的地方開始運動，運動到400的地方（整個畫布的寬度），所用的時間線是100，然后在用100的時間線回到x=0的地方；

state2:從x = 400的地方開始運動，運動到x = 0,所用時間線為100，然后再返回x = 400的地方。

這樣看來，是兩個不同顏色的圓球在相對運動，他們會在x = 200，時間線為50 的地方重合，如此反復(fù)的做運動。

8.最后用gotoAndPlay,表示這個時間表沒有停頓的跳轉(zhuǎn)到指定的位置或標(biāo)簽。

mc.gotoAndPlay("stop");
效果如下：



三、Sprite? 控件

起。顯示一個幀或幀序列（即動畫）從spritesheet實例。精靈片是一系列的圖像（通常是動畫幀）合并成一個單一的圖像。例如，一個動畫由8 100x100圖像可以組合成一個400X200精靈表（4幀在2高）。 你可以顯示單個幀，播放幀作為一個動畫，甚至序列動畫一起。例如：


1、首先引入需要的easeljs文件

2、寫一個canvas，引入我們寫邏輯處理的js文件

<head><meta charset="UTF-8"><script src="easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script><title></title></head><body><canvas id="sprite" width="960px" height="400px"></canvas><script src="app.js" type="text/javascript" charset="utf-8"></script></body>

3.

var stage = new createjs.Stage("sprite"); //創(chuàng)建出SpriteSheet var ss = new createjs.SpriteSheet({"images":["spritesheet_grant.png"],"frames":{"height":292, //每個圖的高度為292，寬度為165，一共有64張圖"width":165,"count":64},"animations":{"run":[0,25,"jump"], //0幀到25幀是跳"jump":[26,63,"run"] //26幀到63幀是跑}});

4、

var s = new createjs.Sprite(ss,"run"); //兩個參數(shù)，一個是spritesheet的對象， s.x = 100; //位置為100，100 s.y = 100;stage.addChild(s); //監(jiān)聽事件，50毫秒更新stage createjs.Ticker.setFPS(50); createjs.Ticker.addEventListener("tick",stage);


效果如下：

是一個小人跑跳的動畫，這樣就完成了。

總結(jié)

以上是生活随笔為你收集整理的Createjs的控件 BitMap、MovieClip、Sprite的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。