tween.js的API实践

看了网上多篇关于tween的使用教程，基本上千篇一律，大多数的写法都是像下面这样：

function initTween(geometry) {

        var position = {y: };

        tween = new TWEEN.Tween(position).to({y: }, );

        tween.easing(TWEEN.Easing.Sinusoidal.InOut);

        var tweenBack = new TWEEN.Tween(position).to({y: }, );

        tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut);

        tween.chain(tweenBack);

        tweenBack.chain(tween);

        var onUpdate = function () {

            var y = this.y;

            //...对模型位置进行更改

        };

        tween.onUpdate(onUpdate);

        tweenBack.onUpdate(onUpdate);

        tween.start();

    }

正如你所见到的，我们会在每个补间变化的时候（其实就是position变化的时候），取出当前值对模型进行一定的更改。

我一直好奇，为什么onUpdate回调里面的this是一个{y:0.768}这样的数据，不应该是tween对象么？

在最新的17版本的tween里面，onUpdate回调中this确实是指向tween实例的，所以我在17版本中这样实现上述代码（不在回调里面处理动画）：

    var position;

    function initTween(){

        position = {x: };

        var tween = new TWEEN.Tween(position).to({x: -}, );

        tween.easing(TWEEN.Easing.Quadratic.Out);

        var tweenBack = new TWEEN.Tween(position).to({x: }, );

        tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut);

        tween.chain(tweenBack);

        tweenBack.chain(tween);

        tween.start();

    }

    function render() {

        sphere.position.x = position.x;

        TWEEN.update();

        renderer.render(scene, camera);

    }

其实不难理解，补间动画运动的实质就是改变position（你可以看做空间内的一个点，虽然上述代码只有一个参数）的值来实现轨迹运动。

所以我们定义一个三维空间内的点P（x，y，z），按照tween已经实现的轨迹方程来定义P的运动轨迹；

并且在每帧渲染的时候，同步更新所有的补间（此时点P位置也会跟着变化），并根据点P的最新位置来改变物体的位置，从而实现物体运动。

so，你看到了，学习框架/库最好的方法是参考官网，因为官网总是最新的，而别人的博客可能早就过时了。

一、缓动动画之

巴特西

tween.js的API实践

最新文章

热门文章