Tweenjs中的MotionGuidePlugin示例

最新推荐文章于 2024-09-20 17:27:57 发布

bboyjoe

最新推荐文章于 2024-09-20 17:27:57 发布

阅读量1.7k

点赞数

分类专栏： createjs 文章标签：网页设计前端 tweenjs createjs htm5

本文链接：https://blog.csdn.net/bboyjoe/article/details/46682021

版权

createjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先编写html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="easeljs-0.8.0.min.js"></script>
    <script src="tweenjs-0.6.0.min.js"></script>
    <script src="MotionGuidePlugin.js"></script>
    <title>TweenJs中的motionGuidePlugin示例</title>
    <style>
        #gameView{
            background-color: #005599;
        }
    </style>
</head>
<body>
<canvas id="gameView" width="960px" height="400px"></canvas>
<script src="myMotionGuidePlugin.js"></script>

</body>
</html>

再根据需求编写对应js文件

    //引入motionGuidePlugin
    createjs.MotionGuidePlugin.install(createjs.Tween);
//绘图
var stage=new createjs.Stage("gameView");
var gameView=new createjs.Container();
stage.addChild(gameView);
var ball=new createjs.Shape();
ball.graphics.beginFill("#ff0000").drawCircle(50,50,50);
//动画
createjs.Tween.get(ball,{loop:true},true)
    .to({guide:{path:[100,100,500,300,300,300,200,300,100,100],orient:"auto"}},7000);
gameView.addChild(ball);
createjs.Ticker.addEventListener("tick",stage);

效果如下图：红色圆形在画布中根据定义的path执行动画