Tweenjs中的Ease示例

最新推荐文章于 2025-06-04 09:09:40 发布

bboyjoe

最新推荐文章于 2025-06-04 09:09:40 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/bboyjoe/article/details/46681213

createjs 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用TweenJS库实现复杂的动画效果。通过HTML引入必要的库文件，并利用Ease方法实现弹性和平滑过渡。示例展示了圆形对象的位置变化及透明度渐变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先编写html代码，引入相应的js文件，添加canvas标签，创建myEase.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TweenJs中的ease应用</title>
    <script src="easeljs-0.8.0.min.js"></script>
    <script src="tweenjs-0.6.0.min.js"></script>
    <script src="Ease.js"></script>
</head>
<body>
<canvas id="gameView" width="960px" height="400px"></canvas>
<script src="myEase.js"></script>


</body>
</html>

再编写js代码，根据需求定义相应动画

    //绘图
var stage=new createjs.Stage("gameView");
var gameView=new createjs.Container();
stage.addChild(gameView);
var circle=new createjs.Shape();
circle.graphics.beginFill("#ff0000").drawCircle(50,50,50);
gameView.addChild(circle);
//动画
createjs.Tween.get(circle,{loop:false},true)
    .to({x:500,y:0,alpha:0.1},1000,createjs.Ease.elasticInOut)
    .to({x:0},1000,createjs.Ease.backIn)
    .wait(1000)
    .to({alpha:1},50);
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);