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

最新推荐文章于 2024-08-13 08:18:46 发布

弹簧马男爵

最新推荐文章于 2024-08-13 08:18:46 发布

阅读量3.6k

点赞数

分类专栏：前端可视化-框架文章标签： tween-js

本文链接：https://blog.csdn.net/dlwbill/article/details/50547240

版权

前端可视化-框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>