TweenJS

ゞ浴缸里的玫瑰 2022-02-25 03:22 256阅读 0赞

\[TOC\]

[文档][Link 1]

# TweenJS：用于做动画效果 #

设置一个Tween，你需要调用Tween(target, \[props\], \[pluginData\])构建器，参数如下：

*  target - 调整属性的对象
 *  props - 相关属性的配置，例如(\{loop:true, paused:true\})， 所有属性缺省为false。支持的属性如下：
 *   *  loop: 设置循环
     *  useTicks: 使用ticks来设置持续而不使用毫秒
     *  ignoreGlobalPause: 设置忽略全局暂停
     *  override: 如果为true，Tween.removeTweens(target) 将会被调用来移除其他同一个对象上的tween
     *  paused: 设置是否启动暂停的tween
     *  position: 设置出示的tween位置
     *  onChange: specifies a listener for the "change" event.
 *  pluginData - 一个包含安装插件数据的对象

Tween类针对一个对象设置tween相关属性。实例方法可以被链式操作，方便编辑序列。这是一个简单但是强大的类

*  to(pros.duration,ease)方法，针对目标属性队列一个tween从初始值到当前值，设置duration为0则立刻跳到指定值。数字类型的值，会从目前值调整到设置的值。而非数字属性则会在持续时间结束时被设置
 *  wait(duration,passive) 队列一个等待（一个空的tween）
 *  call(callback,params,scope) 队列一个指定方法的调用

TweenJS 支持大量的ease（缓动），由Ease类定义

var canvas = document.querySelector('#canvas');
        //创建舞台
    var stage = new createjs.Stage(canvas);
    
    //用于做动画效果
    var tween = createjs.Tween;
    createjs.Ticker.addEventListener("tick", stage);
    createjs.Ticker.setFPS(60);
    
    var text1 = new createjs.Text("❆","30px Arial", "#000");
        text1.x = 100;
        text1.y = 100;
    var text2 = new createjs.Text("❆","30px Arial", "#000");
        text2.x = 100;
        text2.y = 50;
    
    tween.get(text2).to({x:300,y:200}, 1000).call(function () {
        console.log('text2移动完成')
     });
    tween.get(text).to({x:0,y:0}, 1000).call(function () {
        console.log('text移动完成')
    });

代码实例:

<canvas id="myCanvas" width="350" height="420"></canvas>

var canvas = document.getElementById('myCanvas'),
        stage = new createjs.Stage(canvas);
        
    var stageWidth = canvas.width;
    var stageHeight = canvas.height;
    
    var characterWidth = 75;
    var characterHeight = 96;
    
    var spritesheet; 
    var charactor;
    
    window.onload = function(){
      
      spritesheet = new createjs.SpriteSheet({
        'images': ['http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png'],
        'frames': {"height": 96, "count": 10, "width": 75}
      });
      
      charactor  = new createjs.Sprite(spritesheet);
      charactor.x = (stageWidth - characterWidth)/2;
      charactor.y = (stageHeight - characterHeight)/2;
      
      stage.addChild(charactor);
      
      charactor.play();
      
      /*
       *  以下代码生成了tween动画人物相关效果
       */
      
      // 生成上下移动人物效果（一次性）
      createjs.Tween.get(charactor, {loop:false})
          .to({y:150}, 500, createjs.Ease.quadInOut)
          .to({y:50}, 500, createjs.Ease.quadInOut);
          
      // 生成人物左右移动效果（无限循环）
      createjs.Tween.get(charactor, {loop:true})
          .wait(3000)
          .call(charactor.gotoAndStop, [5], charactor) 
          .wait(300)
          .to({x:450}, 1200, createjs.Ease.backInOut) 
          .call(charactor.gotoAndStop, [0], charactor)
          .wait(2000)
          .call(charactor.gotoAndStop, [5], charactor)
          .wait(300)
          .to({x:(stageWidth - characterWidth)/2}, 500, createjs.Ease.backInOut)
          .call(charactor.gotoAndStop, [0], charactor);
    
      
      createjs.Ticker.setFPS(35);
      createjs.Ticker.addEventListener("tick", tick);
      
      function tick(){
        stage.update();
      }
    };

[Link 1]: http://www.createjs.cc/src/docs/tweenjs/modules/TweenJS.html

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

相关 tweenjs-移动threejs中的物体

效果图 ![在这里插入图片描述][1b6cda8319ba46f495666a0791acafff.gif_pic_center] 方法一： <el-bu

谁践踏了优雅/ 2022年09月05日 05:28/ 0 赞/ 403 阅读

相关 tweenjs-实现threejs的转场动画（基于vue）

注意！文章主讲tweenjs的使用，省去了threejs部分的代码，请自行添加！ [参考博文][Link 1] 链式补间：tween.chain 如果有多组补间动

- 日理万妓/ 2022年09月05日 05:23/ 0 赞/ 642 阅读

相关 TweenJS模块

TweenJS模块 [官网][Link 1]链接 > TweenJS Javascript库提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性,并

傷城~/ 2022年05月06日 06:46/ 0 赞/ 180 阅读

相关 TweenJS

\[TOC\] [文档][Link 1] TweenJS：用于做动画效果设置一个Tween，你需要调用Tween(target, \[props\], \[plug

ゞ浴缸里的玫瑰/ 2022年02月25日 03:22/ 0 赞/ 257 阅读