使用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 制作 H5 长图动画
对于 H5 动画,相信大家都不陌生,现在很多大公司的手机宣传页面以及公众号推文中,都能够看到各式各样的 H5 动画效果. 如果细心观察,大家会发现,这些动画或者小游戏,是通过一些工具生成出来的,而不是 ...
高效制作动画-Adobe Animate CC
前言说起动画H5,作为一个前端,可谓是"又爱又恨".爱的是加上动画动效后H5会变得生动有趣,吸引力Max:恨的是做动画时都是一边在脑海中yy效果,一边用css.js代码模拟出来, ...
《Python数据可视化编程实战》——5.5　用OpenGL制作动画
本节书摘来异步社区<Python数据可视化编程实战>一书中的第5章,第5.5节,作者:[爱尔兰]Igor Milovanović,更多章节内容可以访问云栖社区"异步社区" ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
【转】MATLAB如何制作动画（动态图形演示movie）
https://jingyan.baidu.com/article/49711c6199002dfa451b7c52.html MATLAB如何制作动画(动态图形演示movie) 听语音 | 浏览:7 ...
Qt Creator制作动画
Qt Creator制作动画制作动画创建时间表将动画绑定到状态管理关键帧浏览时间轴设置关键帧值观看动画编辑缓和曲线将缓和曲线附加到关键帧自定义缓和曲线编辑动画曲线旋转项目制作 ...
html5 制作风车,[网页设计]html5 requestAnimationFrame制作动画：旋转风车
详细内容请点击在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...
利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
Python+Matplotlib制作动画
转载自:https://www.cnblogs.com/endlesscoding/p/10308111.html 看到一篇觉得非常不错的Python+Matplotlib制作动画的方法

使用CreateJS制作动画

index.html

app.js

vessel.js

quay_crane.js

agv_at_quay.js

yard_block.js

使用CreateJS制作动画相关推荐

最新文章

热门文章