Threejs基础代码段Tweenjs补间动画

Posted 2023-04-03 Giser之路

一、Tweenjs是什么？

        tween.js是一款可生成平滑动画效果的js动画库 , 只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果 。

二、Tweenjs方法

补间功能方法

• • start
    开启补间动画 , new TWEEN.Tween().start(time) , start 方法接受一个参数 time , 如果加入参数,那么补间不会立即开始直到特定时刻才会开始

  • stop
    关闭补间动画 new TWEEN.Tween().stop() , 关闭这个正在执行的补间动画

  • repeat
    控制补间重复的次数 new TWEEN.Tween().repeat(), repeat 它接受一个参数 , 描述第一个补间完成后 需要多少次重复

  • yoyo
    控制补间重复的模式 , new TWEEN.Tween().yoyo() , 这个功能只有在使用 repeat 时才有效果 , 补间的 行，为将像悠悠球一样来回运动 , 而不是重新开始

  • delay
    控制补间开始前的延迟 new TWEEN.Tween().delay() , 补间开始之前的延迟时间接受一个参数用于控制具 体时间

  • pause
    暂定补间动画 new TWEEN.Tween().pause() ， 暂停当前补间运动

  • resume 恢复补间动画 new TWEEN.Tween().resume() ， 恢复这个已经被暂停的补间运动

  • to
    控制补间的运动形式及方向 new TWEEN.Tween().to() , 当tween启动时，Tween.js将读取当前属性值并 应用相对值来找出新的最终值

• 补间操作方法

  • update
    更新补间动画 TWEEN.update() , 动态更新补间运动一般配合 window.requestAnimationFrame 使用

  • getAll
    获取所有的补间组 TWEEN.getAll()

  • removeAll
    删除所有的补间组 TWEEN.removeAll()

  • add
    新增补间 TWEEN.add(tween) (tween) 添加一个特定的补间 var tween=new TWEEN.Tween()

  • remove
    删除补间 TWEEN.remove(tween) (tween) 删除一个特定的补间 var tween=new TWEEN.Tween()

  • Group 新增一个补间组 var Group=TWEEN.Group() , new TWEEN.Tween( x: 1 , Group) , 将已经配置 好的补间进行分组 , TWEEN.update()和TWEEN.removeAll() , 不会影响到已经分好组的补间

• 补间回调函数

  • onStart()
    new TWEEN.Tween().onStart((obj)=>) , 补间开始时执行,只执行一次, 当使用 repeat() 重复补间 时,不会重复运行 , onStart((obj)=>) obj 补间对象作为第一个参数传入

  • onStop()
    new TWEEN.Tween().onStop((obj)=>) , 当通过 onStop() 显式停止补间时执行，但在正常完成时并且在停止任何可能的链补间之前执行补间',onStop((obj)=>) obj 补间对象作为第一个参数传入

  • onUpdate()
    new TWEEN.Tween().onUpdate((obj)=>) , 每次补间更新时执行，返回实际更新后的值， onUpdate((obj)=>) obj 补间对象作为第一个参数传入

  • onComplete()
    new TWEEN.Tween().onComplete((obj)=>) , 当补间正常完成（即不停止）时执行 , onComplete((obj)=>) obj 补间对象作为第一个参数传入

缓动效果函数：

         .easing(TWEEN.Easing.easing函数.easing类型)

          easing函数：
               Linear ==> 线性匀速运动效果
               Quadratic ==> 二次方的缓动
               Cubic ==> 三次方的缓动
               Quartic ==> 四次方的缓动
               Quintic ==> 五次方的缓动
               Sinusoidal ==> 正弦曲线的缓动
               Exponential ==> 指数曲线的缓动
               Circular ==> 圆形曲线的缓动
               Elastic ==> 指数衰减的正弦曲线缓动
               Back ==> 超过范围的三次方的缓动
               Bounce ==> 指数衰减的反弹缓动

            easing类型：
                In ==> easeIn，加速，先慢后快
                Out ==> easeOut，减速，先快后慢
                InOut ==> easeInOut，前半段加速，后半段减速

三、Tweenjs示例及效果

#此处是点击物体后，相机视角移动到物体旁
#不一定为相机，也可以自己设置是什么移动
let tweenL2 = new TWEEN.Tween(
                   camera.position).to(   #摄像机位置
                x:obj.object.parent.position.x+7,   #x轴位置
                y:obj.object.parent.position.y+3,   #y轴位置
                z:obj.object.parent.position.z ,3000)  #z轴位置及时间
                .easing(TWEEN.Easing.Linear.None).start()  #缓动方式
let tweenL21 = new TWEEN.Tween(
                camera.target.position).to(    #摄像机位置
                x:obj.object.parent.position.x,  #x轴位置
                y:obj.object.parent.position.y,  #y轴位置
                z:obj.object.parent.position.z ,3000)  #z轴位置及时间
                .easing(TWEEN.Easing.Linear.None).start()  #缓动方式

         效果如下：

         参考：http://t.csdn.cn/JPVok

使用 Tweenjs 动画颜色

【中文标题】使用 Tweenjs 动画颜色

【英文标题】：Animating Color with Tweenjs

【发布时间】：2012-12-22 18:19:06

【问题描述】：

我最近切换到 EaselJs，想为圆的颜色制作动画。

到目前为止我得到的代码是这样的：

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(shape,  loop: true ).
    to(color:"#00FF00" , 1000);

但这不起作用。动画的正确属性是什么？

【参考方案1】：

非过滤器版本。

var colorObj =  r:255, g:0, b:0 ;
var shape = new createjs.Shape();
var command = shape.graphics.beginFill(createjs.Graphics.getRGB(colorObj.r, colorObj.g, colorObj.b)).command;
shape.graphics.drawCircle(60, 60, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(colorObj,  loop: true ).to( r:255, g:255, b:255 , 1000);
tween.addEventListener( "change", function( event ) 
    command.style = createjs.Graphics.getRGB(Math.floor(colorObj.r), Math.floor(colorObj.g), Math.floor(colorObj.b));
);

beginFill(...).command 对象可以更新。

小提琴

https://jsfiddle.net/MasatoMakino/uzLu19xw/

【参考方案2】：

修改填充指令可以改变颜色。这可能有助于制作动画。 我不知道这会产生什么影响，但这对我来说非常有效。 试试这个，

        var circle = new createjs.Shape();
        circle.graphics.f('#ffffff').s('#000000').ss(0.7).arc((30 * j),50,10, 0, Math.PI * 2, 1);
        circle.number = j;
        circle.addEventListener('click', function(e) 
            var fillStyle = e.target.graphics._fillInstructions[0].params;
            var currentFillStyle=fillStyle[1]+"";
            for (var i = 0; i < circles.length; i++) 
                var resetFillStyle = circles[i].graphics._fillInstructions[0].params;
                resetFillStyle[1] = "#ffffff";
            

            if (currentFillStyle == "#00B4EA") 
                fillStyle[1] = "#FFFFFF";
             else 
                fillStyle[1] = "#00B4EA";
            
            stage.update();

        )

希望这会有所帮助！

【讨论】：

使用图形命令有一个更简单的方法。只需将命令 在 应用后保存，您可以随时对其进行修改。 createjs.com/docs/easeljs/classes/…

谢谢。这真的很有帮助。

【参考方案3】：

我刚刚在这里阅读了另一种颜色动画选项：http://community.createjs.com/discussions/easeljs/4637-graphics-colour-animation

它利用了 createjs 注入方法。我从提供的代码示例中复制了相关代码，并进行了一些解释。

根据文档：

注入（回调，数据）： 提供一种将任意 Context2D（又名 Canvas）API 调用注入图形队列的方法。指定的回调函数将与其他绘图指令依次调用(...)

例如，您可以使用此方法更改本机 context2d 填充样式，以便我们可以更改easeljs 用于在画布上绘制的填充颜色。

这里我们告诉 createjs 我们自己的 setColor 函数（定义如下），因此这个函数会在每次重绘之前自动执行：

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.inject(setColor, data)
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

调用canvas原生fillStyle方法的setColor函数的定义：

function setColor(o) 
    // sets the context2D's fillStyle to the current value of data.fill:
    this.fillStyle = o.fill; // "this" will resolve to the canvas's Context2D.

以及改变填充值的刻度函数：

function tick(evt) 
    count = (count+3)%360;
    // update the value of the data object:
    data.fill = createjs.Graphics.getHSL(count, 100, 50);
    // redraw the stage:
    stage.update();

【参考方案4】：

我只是想做同样的事情。我的解决方案是对形状对象的自定义属性进行补间，然后在补间“更改”事件上调用更新方法。希望这会有所帮助，我真的是 createjs 的新手，但到目前为止我真的很喜欢它！

var s = new createjs.Shape();
s.redOffset      = 157;
s.blueOffset     = 217;
s.greenOffset    = 229;

s.updateColor = function()

    var color = createjs.Graphics.getRGB( 
        parseInt(this.redOffset), 
        parseInt(this.greenOffset), 
        parseInt(this.blueOffset), 
        1);

    this.graphics.beginFill( color ).drawRect(0, 0, 300, 300);


createjs.Tween.get(this.background).to( 
    redOffset   : 255,
    greenOffset : 255,
    blueOffset  : 255
,  3000).addEventListener('change', function()

    s.updateColor ();
);

【讨论】：

看起来不错。我无法测试它，因为easeljs 项目早已被放弃，但感谢您的输入。由我 +1

截至此评论，该项目在 github 上的最后一次更新是 5 天前，所以它看起来还活着（这是令人鼓舞的）

【参考方案5】：

我认为不可能像这样对形状的颜色进行动画处理，毕竟绘制的形状可能包含许多不同的颜色，Tween 应该如何知道要修改哪些颜色？ 我能想到的有两种方法：

方法 1) 使用 createjs.ColorFilter，将其应用于您的形状，然后补间滤镜的属性：

var shape = new createjs.Shape();
//making the shape shape white, so we can work with the multiplyers of the filter
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 255, 255));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);
var filter = new createjs.ColorFilter(1,0,0,1); //green&blue = 0, only red and alpha stay
shape.filters = [filter];

var tween = createjs.Tween.get(filter,  loop: true ).
    to(redMultiplier:0, greenMultiplier:1 , 1000);

我没有对此进行测试，所以......让我知道它有效。另请注意，过滤器仅在您的形状上调用 cache() 或 updateCache() 时应用/更新，因此您必须将其添加到您的刻度函数中。

方法 2) 或者您只是每帧重绘形状...但 1) 可能更容易。

【讨论】：

我会尽快对其进行测试，如果可行，请接受您的回答。提前致谢

虽然这行得通，但当我想要填充透明颜色的形状时，我似乎无法让它正常工作。我尝试使用 alphaOffset 设置 ColorFilter，但我无法让它工作。相反，我使用了 Jason Savage 的解决方案。

这是一个工作示例：jsfiddle.net/jinglesthula/6x0f8nff