应用三次贝塞尔曲线功能为属性更改设置动画

Question

我正在Javascript中尝试使用三次贝塞尔曲线计时功能对各种元素进行动画处理。

（我知道通常最好使用CSS3或Javascript动画库来完成。我只是在这里使用Javascript来了解bezier函数的工作原理，并向他们自我介绍。）

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

我无法理解如何实际使用此功能来控制Javascript中的动画。 因此，从一个非常简单的东西开始：一个基本的黑色正方形，我可以通过将其向右移动，通过增加其style.left属性来进行动画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实际上是时间 ， y是旧位置和新位置之间的增量（移动距离），但是我不确定。 我可能是错的。

无论如何，将其全部插入，我将编写一个类似以下的函数：

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 ”应该是位置增量（移动距离），但这似乎是唯一可行的方法。

那么，我在这里做错了吗？ 将立方贝塞尔函数应用于要使用Java动画制作的属性的正确方法是什么？

Answer 1

如果使用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');