应用立方贝塞尔函数动画属性更改

我正在使用立方贝塞尔计时函数为各种元素设置动画，并在Javascript中进行实验。应用立方贝塞尔函数动画属性更改

（我知道这通常是更好地与CSS3做，或JavaScript动画库。我只是使用Javascript这里了解如何运作贝塞尔工作，并教我关于他们。）

所以，我得到基本概念，我使用了一个简单的贝齐尔曲线库，由Stephen McKamey编写，这是Webkit实现的一个很棒的Javascript端口。

我很难理解我怎么能实际上使用这个函数来控制Javascript中的动画。因此，从东西很简单：一个基本的黑色方块，我可以通过它移动到右侧，通过增加其style.left属性动画：

CSS：

.parent { 
    position: relative; 
} 

.foo { 
    border: 1px solid #000000; 
    background-color: black; 
    height: 200px; 
    width: 200px; 
    position: absolute; 
}

HTML：

<div class = "parent"> 
    <div class = "foo" id = "target"></div> 
</div>

好了，所以，在给定三次贝塞尔函数 “bezier”，其定义如下：

function bezier(p1x, p1y, p2x, p2y, x, duration) { ... }

凡P1X，P1Y，P2X和P2Y是曲线的控制点（0和1.0之间），x是x坐标的值，并且是duration在毫秒的持续时间。该函数返回对应的y坐标。我试图通过将其移动到400px向右移动这个黑盒子。

对于我的第一次尝试，我用的是标准的“缓解”贝塞尔值，CSS3使用，所以我们ease贝塞尔函数可以写成：

function ease(x, duration) { 
    return function() { 
     Bezier.cubicBezier(0.25, 0.1, 0.25, 1.0, x, duration); 
    } 
}

所以这应该给我们一个缓慢的开始，然后快速移动，然后慢慢结束。

好的，所以我假设实现这个的基本方法是使用window.setInterval，然后对于每个区间，用x的新值调用bezier函数，然后将结果以某种方式应用到我们想要动画的属性。

事情是，我不知道我的“x”值是在这里。我认为在这种情况下，x实际上是时间,和是旧位置和新位置（移动距离）之间的增量，但我并不确定。我可能是错的。

反正都堵在这，我会写像一个函数：

var startPos = 0; 
var endPos = 400; // pixels 
var duration = 400; // milliseconds 
var millisecondsPerInterval = 10; 

var target = document.getElementById("target"); 
var t = 0; 
var pos = 0; 

var bezierFunction = Bezier.cubicBezier; 

var interval = window.setInterval(
    function() { 
     pos = pos + bezierFunction(0.25, 0.1, 0.25, 1.0, t/1000, duration); // "ease" values 
     target.style.left = (pos * millisecondsPerInterval) + "px"; 
     t += millisecondsPerInterval; 
     if (t === duration) { window.clearInterval(interval); } 
    }, 
    millisecondsPerInterval 
);

这似乎是工作 - 盒子缓缓移动的开始，然后加速。但它只是突然停止，而不是放松。所以我可能不会正确应用此功能。我甚至不确定“x”应该是我的时间价值，“y”应该是位置增量（移动距离），但这似乎是唯一适用此方法的方法。

那么，我在这里做错了什么？将立方贝塞尔函数应用于要使用Javascript进行动画处理的属性的正确方法是什么？

来源

2015-05-08 Siler

-2

如果您使用JQuery，它可能会使过程更简单。

基于回答类似的问题（https://stackoverflow.com/a/6824695/363099），你可以扩展jQuery的宽松政策，以添加自定义缓动函数：

根据对jQuery 1.6.2源，在宽松的意义功能如下。该功能在动画期间的各个时间点被调用。在瞬间的叫法，

X和T都表示，现在是什么时候，现在，相对于动画的开始。 x表示为范围为 [0,1]的浮点数，其中0表示开始，1表示结束。 t表示动画开始以来的毫秒。

d是在动画调用中指定的动画持续时间，以毫秒为单位。

b = 0且c = 1。

因此，这里是它如何为您的代码工作：

$.extend(jQuery.easing,{bezier: function(x,t,b,c,d) { 

     return (
      x <= 0 ? 0 : 
      x >= 1 ? 1 : 
      bezierFunction(0.25, 0.1, 0.25, 1.0, x, d) 
      ); 
    } });

然后，你可以使用JQuery动画功能：

$('#target').animate({right:'400px'},400,'bezier');

来源

2016-01-02 16:00:01 ErezSO

应用立方贝塞尔函数动画属性更改

回答

相关问题