當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
使用CreateJS制作动画
生活随笔
收集整理的這篇文章主要介紹了
使用CreateJS制作动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
收到任務制作港口粗模型的動畫效果。
分為4個部分：
CreateJS 官網鏈接： https://www.createjs.com
Bilibili 視頻教程：https://www.bilibili.com/video/BV1sT4y1E72t?spm_id_from=333.337.search-card.all.click
程序目錄：
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/easeljs.js"></script><script src="js/tweenjs.js"></script><script src="js/MovieClip.js"></script><script src="js/Vessel.js"></script><script src="js/quay_crane.js"></script><script src="js/agv_at_quay.js"></script><script src="js/yard_block.js"></script> </head> <body><canvas id="gameView" width="1600px" height="8000px" style="background-color: #cccccc"></canvas><script src="js/app.js"></script> </body> </html>app.js
const stage = new createjs.Stage("gameView");const vessel = new createjs.Container(); stage.addChild(vessel);const background = new createjs.Bitmap("images/BaseDesign.png"); stage.addChild(background);//createjs.Ticker.setFPS(30); createjs.Ticker.framerate = 50; createjs.Ticker.addEventListener("tick", stage);const mc = new createjs.MovieClip(null, 0, false, {start:50}); stage.addChild(mc);const state1 = new createjs.Shape(new createjs.Graphics().beginFill("#999999").drawPolyStar(100, 100, 50, 5, 0.6, -90));const agvs = new AgvAtQuayLayer(); mc.timeline.addTween(createjs.Tween.get(agvs).to({y: 0}));const qcs = new QuayCraneLayer(); mc.timeline.addTween(createjs.Tween.get(qcs).to({y: 0}));const yardBlock = new YardBlockLayer(); mc.timeline.addTween(createjs.Tween.get(yardBlock).to({y: 0}));const vessels = new VesselLayer(); mc.timeline.addTween(createjs.Tween.get(vessels).to({y: 0}));//const state2 = new createjs.Shape(new createjs.Graphics().beginFill("#555555").drawCircle(0,100,30)); //mc.timeline.addTween(createjs.Tween.get(state2).to({x:400}).to({x:0},100).to({x:400},100).to({alpha:0},100).to({alpha:1},100));mc.gotoAndPlay("start");vessel.js
function VesselLayer(){let x1 = 860;let y1 = 253;let len1 = 110;let angle1 = 0;const vessel1 = new Vessel(x1, y1, len1, angle1);const mc1 = new createjs.MovieClip(null, 0, true, {start:0});const twn = mc1.timeline.addTween(createjs.Tween.get(vessel1));twn.to({alpha: 0}, 100);twn.wait(50);twn.to({alpha: 1}, 100);twn.to({y: y1 - 50}, 100);//twn.to({y: y1 + 150}, 300);twn.wait(300);twn.to({y: y1}, 100);twn.to({alpha: 0}, 100);twn.wait(200);this.addChild(mc1);let x2 = 736;let y2 = 450;let len2 = 80;let angle2 = 270;const vessel2 = new Vessel(x2, y2, len2, angle2);const mc2 = new createjs.MovieClip(null, 0, true, {start:0});mc1.timeline.addTween(createjs.Tween.get(vessel2).to({alpha:0}).wait(100).to({alpha:1},100).to({x: x2-50}, 100).wait(300).to({x: x2},100).to({alpha:0},100).wait(150));this.addChild(mc2); /*let x3 = 970;let y3 = 435;let len3 = 110;let angle3 = 180;const vessel3 = new Vessel(x3, y3, len3, angle3);const mc3 = new createjs.MovieClip(null, 0, true, {start:50});mc1.timeline.addTween(createjs.Tween.get(vessel3).to({alpha:0}).wait(150).to({alpha:1},100).to({y: y3+50}, 100).wait(300).to({y: y3},100).to({alpha:0},100).wait(100));this.addChild(mc3); */ }function Vessel(iX, iY, iLen, iAngle) {const vessel = new createjs.Shape();let xStart = iX;let yStart = iY;let length = iLen;let bow = 12let stern = 4;let width = 15;vessel.x = iX;vessel.y = iY;vessel.regX = iX;vessel.regY = iY;vessel.rotation = iAngle;vessel.graphics.beginStroke("#BA830D");vessel.graphics.beginFill("#BA830D").moveTo(xStart, yStart).lineTo(xStart + length, yStart).lineTo(xStart + length + bow, yStart + width/2 - 1).lineTo(xStart + length + bow, yStart + width/2 + 1).lineTo(xStart + length, yStart + width/2 + width/2).lineTo(xStart, yStart + width/2 + width/2).lineTo(xStart - stern, yStart + width/2 + width/2 - stern).lineTo(xStart - stern, yStart + width/2 + width/2 - (width - stern)).lineTo(xStart, yStart);return vessel; }VesselLayer.prototype = new createjs.Container();quay_crane.js
function QuayCraneLayer(){let x1 = 893;let y1 = 200;let angle1 = 90;const qc1 = new QuayCrane(x1, y1, angle1, 4);const mc1 = new createjs.MovieClip(null, 0, true, {start:50});mc1.timeline.addTween(createjs.Tween.get(qc1).to({alpha:0}).wait(150).to({alpha:1}, 100).to({scaleX:5},100).wait(300).to({scaleX:0.2},100).to({alpha:0}, 100).wait(100));this.addChild(mc1);let x2 = 685;let y2 = 432;let angle2 = 0;const qc2 = new QuayCrane(x2, y2, angle2, 4);const mc2 = new createjs.MovieClip(null, 0, true, {start:50});mc2.timeline.addTween(createjs.Tween.get(qc2).to({alpha:0}).wait(200).to({alpha:1}, 100).to({scaleX:5},100).wait(300).to({scaleX:0.2},100).to({alpha:0}, 100).wait(50));this.addChild(mc2);let x3 = 937;let y3 = 486;let angle3 = 270;const qc3 = new QuayCrane(x3, y3, angle3, 4);const mc3 = new createjs.MovieClip(null, 0, true, {start:50});mc3.timeline.addTween(createjs.Tween.get(qc3).to({alpha:0}).wait(250).to({alpha:1}, 100).to({scaleX:5},100).wait(300).to({scaleX:0.2},100).to({alpha:0}, 100));this.addChild(mc3); }function QuayCrane(iX, iY, iAngle, iNum) {const qc = new createjs.Shape();let xStart = iX;let yStart = iY;let length = 5;let width = 2;qc.x = iX;qc.y = iY;qc.regX = iX;qc.regY = iY;qc.rotation = iAngle;for (let i=0; i<iNum; i++) {qc.graphics.beginStroke("#6BAC6C");qc.graphics.beginFill("#168C16").drawRect(xStart, yStart - i*21, length, width);}return qc; }QuayCraneLayer.prototype = new createjs.Container();agv_at_quay.js
function AgvAtQuayLayer(){let x1 = 870;let y1 = 190;const agv1 = new AgvAtQuay(x1, y1);const txt1 = new AgvText(x1, y1, "+0");const mc1 = new createjs.MovieClip(null, 0, true, {start:50});mc1.timeline.addTween(createjs.Tween.get(txt1).wait(250).to({text:"+1"},50).to({text:"+2"},50).to({text:"+3"},50).to({text:"+2"},50).to({text:"+1"},50).to({text:"+0"},50).to({text:"+0"},400));this.addChild(agv1);this.addChild(mc1)let x2 = 675;let y2 = 350;const agv2 = new AgvAtQuay(x2, y2);const txt2 = new AgvText(x2, y2, "+0");const mc2 = new createjs.MovieClip(null, 0, true, {start:50});mc2.timeline.addTween(createjs.Tween.get(txt2).wait(300).to({text:"+1"},50).to({text:"+2"},50).to({text:"+2"},50).to({text:"+2"},50).to({text:"+1"},50).to({text:"+0"},50).to({text:"+0"},350));this.addChild(agv2);this.addChild(mc2)let x3 = 855;let y3 = 497;const agv3 = new AgvAtQuay(x3, y3);const txt3 = new AgvText(x3, y3, "+0");const mc3 = new createjs.MovieClip(null, 0, true, {start:50});mc3.timeline.addTween(createjs.Tween.get(txt3).wait(350).to({text:"+1"},37.5).to({text:"+2"},37.5).to({text:"+3"},37.5).to({text:"+4"},37.5).to({text:"+3"},37.5).to({text:"+2"},37.5).to({text:"+1"},37.5).to({text:"+0"},37.5).to({text:"+0"},300));this.addChild(agv3);this.addChild(mc3) }function AgvAtQuay(iX, iY) {const agv = new createjs.Shape();let xStart = iX;let yStart = iY;agv.graphics.beginStroke("#EFFC0D");agv.graphics.beginFill("#13D0FC").drawCircle(xStart, yStart, 10);return agv; }function AgvText(iX, iY, iTxt) {const txt = new createjs.Text(iTxt, "15px Arial", "red");let xStart = iX - 9;let yStart = iY - 7;txt.x = xStart;txt.y = yStart;return txt; }AgvAtQuayLayer.prototype = new createjs.Container();yard_block.js
function YardBlockLayer(){let x1 = 816;let y1 = 592;let angle1 = 270;const yb1 = new YardBlock(x1, y1, angle1, "transshipment");const mc1 = new createjs.MovieClip(null, 0, true, {start:50});mc1.timeline.addTween(createjs.Tween.get(yb1).to({alpha:1}).to({scaleX:1.7}).to({scaleX:2.5},400).to({scaleX:1.7},400));this.addChild(mc1);let x2 = 816;let y2 = 660;let angle2 = 270;const yb2 = new YardBlock(x2, y2, angle2, "exchange");const mc2 = new createjs.MovieClip(null, 0, true, {start:50});mc2.timeline.addTween(createjs.Tween.get(yb2).to({alpha:1}).to({scaleX:1.5}).to({scaleX:0.75},470).to({scaleX:1.5},330));this.addChild(mc2);let x3 = 836;let y3 = 674;let angle3 = 270;const yb3 = new YardBlock(x3, y3, angle3, "transshipment");const mc3 = new createjs.MovieClip(null, 0, true, {start:50});mc3.timeline.addTween(createjs.Tween.get(yb3).to({alpha:1}).to({scaleX:1}).to({scaleX:4},410).to({scaleX:1},390));this.addChild(mc3);let x4 = 852;let y4 = 674;let angle4 = 270;const yb4 = new YardBlock(x4, y4, angle4, "transshipment");const mc4 = new createjs.MovieClip(null, 0, true, {start:50});mc4.timeline.addTween(createjs.Tween.get(yb4).to({alpha:1}).to({scaleX:4}).to({scaleX:2},360).to({scaleX:4},440));this.addChild(mc4);let x5 = 928;let y5 = 660;let angle5 = 270;const yb5 = new YardBlock(x5, y5, angle5, "exchange");const mc5 = new createjs.MovieClip(null, 0, true, {start:50});mc5.timeline.addTween(createjs.Tween.get(yb5).to({alpha:1}).to({scaleX:2}).to({scaleX:1.2},380).to({scaleX:2},420));this.addChild(mc5);let x6 = 625;let y6 = 150;let angle6 = 0;const yb6 = new YardBlock(x6, y6, angle6, "exchange");const mc6 = new createjs.MovieClip(null, 0, true, {start:50});mc6.timeline.addTween(createjs.Tween.get(yb6).to({alpha:1}).to({scaleX:4}).to({scaleX:2},380).to({scaleX:4},420));this.addChild(mc6);let x7 = 810;let y7 = 150;let angle7 = 0;const yb7 = new YardBlock(x7, y7, angle7, "transshipment");const mc7 = new createjs.MovieClip(null, 0, true, {start:50});mc7.timeline.addTween(createjs.Tween.get(yb7).to({alpha:1}).to({scaleX:2}).to({scaleX:5},380).to({scaleX:2},420));this.addChild(mc7); }function YardBlock(iX, iY, iAngle, iColor) {const yardBlock = new createjs.Shape();let xStart = iX;let yStart = iY;let length = 20;let width = 10;yardBlock.x = iX;yardBlock.y = iY;yardBlock.regX = iX;yardBlock.regY = iY;yardBlock.rotation = iAngle;const color = iColor == "exchange" ? "#168C16" : "#F215BA";yardBlock.graphics.beginStroke(color);yardBlock.graphics.beginFill(color).drawRect(xStart, yStart, length, width);return yardBlock; }YardBlockLayer.prototype = new createjs.Container();總結
以上是生活随笔為你收集整理的使用CreateJS制作动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安全加密 - 秘钥和算法关系
- 下一篇： CreateJS-SoundJS翻译