web可视化学习----tween.js前端动画库
web可视化学习—-tween.js前端动画库
tween.js是⼀个强⼤的js动画库
⼀般来说，使⽤tweenJS⼀般是结合EaselJS⼀同使⽤，Easel是⽤来绘图的⼯具库，再利⽤TweenJS完成动画。tweenjs调⽤链接，当然你也可以下到本地引⽤
<script src="atejs/tweenjs-0.6.2.min.js"></script>
我们⽤⼀个⼩demo来开始
<html>
<head>
<script src="atejs/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.x = 100;
circle.y = 100;
stage.addChild(circle);  //将形状放(addChild)到画板上
//从这⾥开始引⼊tween
(circle, {loop: true})  //获取对象，并设置是否循环
.to({x: 400}, 1000, PowInOut(4))//运动轨迹，过程时间，运动⽅式，间隔时间
.
to({alpha: 0, y: 75}, 500, PowInOut(2))
.to({alpha: 0, y: 125}, 100)
.to({alpha: 1, y: 100}, 500, PowInOut(2))
.to({x: 100}, 800, PowInOut(2));
canvas动画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能够设置透明度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。