Question

在three.js中动画（纹理动画，移动物体，隐藏/显示对象......）的最佳选项是什么？你是否使用额外的lib。比如tween.js还是其他什么？感谢。

Answer 1

Tween.js是最受欢迎的方式...查看文章： http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

Answer 2

许多人同意您需要RequestAnimationFrame来管理浏览器效果。 Three.js甚至包括cross-browser shim for it。

我还建议使用Frame.js来管理基于时间轴的渲染。 RequestAnimationFrame做得很好，但只根据浏览器的性能维持最低帧速率。更好的流量控制库（如Frame）可以提供最大帧速率，并可以更好地管理多个密集型操作。

此外，Javascript FSM已成为我的three.js应用程序的重要组成部分。无论您是构建UI还是游戏，对象都必须具有状态，并且仔细管理过渡动画和规则对于任何复杂的应用程序逻辑都是必不可少的。

是的，你需要一个缓动库。我经常使用jQuery.easing plugin。它是jQuery.animate的插件，但也可以像这样访问缓动函数：

var x = {}; // an empty object (used when called by jQuery, but not us)
var t = currentTime;
var b = beginningValue;
var c = potentialChangeInValue;
var d = durationOfAnimation;
valueAtTime = jQuery.easing.easeOutExpo(x, t, b, c, d);

这个jQuery插件和大多数缓动插件都基于Robert Penner's ActionScript2 easing library，如果上面的t，b，c，d看起来很奇怪，那么值得一试。

Answer 3

复制粘贴：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();

function render()
{
// DO YOUR STUFF HERE (UPDATES AND DRAWING TYPICALLY)
}

原作者是：http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 4

2017年的小型综述：查看这个简单的时间线-lib，它可以轻松触发上述FSM（基于状态的动画）＆amp; tween.js（smooth anim）：

keyframes

Answer 5

我这是为了模仿人类特征的轨道运动（生涩）但它可以用于其他动画，如物体平移，位置和旋转。

<xs:element name="note">

    <xs:complexType>
        <xs:sequence>
            <xs:element name="to" type="xs:string" />
            <xs:element name="from" type="xs:string" />
            <xs:element name="heading" type="xs:string" />
            <xs:element name="body" type="xs:string" />
        </xs:sequence>
    </xs:complexType>

</xs:element>

THREE.JS中动画的最佳选择

5 个答案: