动画--easeljs中的movieClip控件示例？
easeljs中的movieClip控件示例
先編寫html文件，引入easeljs文件、movieClipjs文件、以及tweenjs文件，添加canvas標(biāo)簽
###兩個(gè)小球在畫布中來回滾動效果
<!DOCTYPE?html>??
<html?lang="en">??
<head>??
<meta?charset="UTF-8">??
<title>easeljs的movieClip控件</title>??
<script?src="easeljs-0.8.1.min.js"></script>??
<script?src="tweenjs-0.6.1.min.js"></script>??
<script?src="movieclip-0.8.1.min.js"></script>??
<style>??
????????#gameView{??
????????????background-color:?#273346;??
????????}??
</style>??
</head>??
<body>??
<canvas?id="gameView"?width="400px"?height="400px"></canvas>??
<script?src="movieClip.js"></script>??
</body>??
</html>??
js:var?stage?=?new?createjs.Stage("gameView");??
//createjs.Ticker.setFPS(20);??
createjs.Ticker.addEventListener("tick",?stage);??
var?mc?=?new?createjs.MovieClip(null,?0,?true,?{start:200,stop:0});??
stage.addChild(mc);??
var?child1?=?new?createjs.Shape(??
new?createjs.Graphics().beginFill("#999999")??
????????.drawCircle(30,30,30));??
var?child2?=?new?createjs.Shape(??
new?createjs.Graphics().beginFill("#5a9cfb")??
????????.drawCircle(30,30,30));??
mc.timeline.addTween(??
????createjs.Tween.get(child1)??
????????.to({x:0}).to({x:340},?100).to({x:0},?100));??
mc.timeline.addTween(??
????createjs.Tween.get(child2)??
????????.to({x:340}).to({x:0},?100).to({x:340},?100));??
mc.gotoAndPlay("start");??
?
轉(zhuǎn)載于:https://www.cnblogs.com/duanzhange/p/9009200.html
總結(jié)
以上是生活随笔為你收集整理的动画--easeljs中的movieClip控件示例？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 病毒的分类和命名规则
- 下一篇： python爬虫练习之爬取豆瓣读书所有标