TweenJS

作者: AndyXB | 来源:发表于2016-08-24 16:31 被阅读1009次

TweenJS类库主要用来调整和动画HTML5和Javascript属性。提供了简单并且强大的tweening接口。支持数字对象属性和CSS样式属性,允许你使用链式语法来生成复杂的过程

设置一个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.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();
  }
};

相关文章

  • tweenjs

    tweenjs 是使用 JavaScript 中的一个简单的补间动画库,支持数字、对象的属性和 CSS 样式属性的...

  • TweenJS

    TweenJS类库主要用来调整和动画HTML5和Javascript属性。提供了简单并且强大的tweening接口...

  • Vue.js 中使用缓动动画库 TweenJs

    TweenJs 是一个第三方的 javascript 动画库,可以轻松实现各种缓动动画效果。 一、TweenJs ...

  • 前端第三方插件

    动画 tweenmax js动画库 tweenJS js动画库 easeljs js列表动画 ...

  • 有用的Vue第三方库

    Animate.css - CSS动画库 Velocity.js - JS动画库 TweenJS - 状态过渡动画...

  • 使用tween实现animate-number

    关于tween的安装和说明,请见:git地址:https://github.com/tweenjs/tween.j...

  • 食色志

    案例:食色志 品牌:食色志X美的Midea 技术实现: jQuery + Egret + tweenjs 亮点: ...

  • tweenjs的初次使用

    实现一些更为平滑的欢动效果。使用:1.先去cdn找到tweenjs的引用链接和安装包。 3.使用:

  • 使用tweenjs写一个发牌的demo

    移动端h5的三大抽奖方式:转盘,老虎机,翻纸牌。前两样demo比较多,用户也审美疲劳了。这次微信公众号要抽奖,于是...

网友评论

      本文标题:TweenJS

      本文链接:https://www.haomeiwen.com/subject/qglosttx.html