您的位置：首页 > Web前端

4000 web可视化学习----tween.js前端动画库

2016-01-20 11:12 330 查看

web可视化学习—-tween.js前端动画库

tween.js是一个强大的js动画库

一般来说，使用tweenJS一般是结合EaselJS一同使用，Easel是用来绘图的工具库，再利用TweenJS完成动画。

tweenjs调用链接，当然你也可以下到本地引用

<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>


我们用一个小demo来开始

<html>
<head>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<!-- 这个包集合了easeljs和tweenjs -->
<script>
function init() {
//利用easel画圆
var stage = new createjs.Stage("demoCanvas");//建立画板
var circle = new createjs.Shape(); //新建形状
circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50); //将形状设置为圆形并添加属性
circle.x = 100;
circle.y = 100;
stage.addChild(circle);  //将形状放(addChild)到画板上

//从这里开始引入tween
createjs.Tween.get(circle, {loop: true})  //获取对象，并设置是否循环
.to({x: 400}, 1000, createjs.Ease.getPowInOut(4))//运动轨迹，过程时间，运动方式，间隔时间
.to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
.to({alpha: 0, y: 125}, 100)
.to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
.to({x: 100}, 800, createjs.Ease.getPowInOut(2));
createjs.Ticker.setFPS(60);//设置Fps，一般设置为60，大概每16毫秒刷新一次
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="200"></canvas>
</body>
</html>


tween有自己的方式刷新动画。首先,设置FPS(你想要的舞台每秒刷新有多少次)。其次,添加一个事件监听器。

这里的alpha能够设置透明度。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航