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

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>
    
    <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能够设置透明度。

你可能感兴趣的:(前端可视化-框架,tween-js)