Javascript 如何在屏幕上跟踪jQuery动画div？

我正在使用沿曲线路径设置图形动画。我对结果很满意

但是，整个画布的大小故意相当宽——肯定比大多数屏幕都大——因此图形将很快用完视口空间，并在屏幕外设置动画

相反，我希望浏览器视口跟随图像或以图像为中心，使其保持“拍摄”状态

我将如何使用jQuery进行此操作？scrollTop是一个选项吗

我已经创建了一个基于的，但具有广泛的minX设置

---

---

NB：我第一次尝试使用YUI3，并提供了基于画布的，但是我不再使用YUI&canvas了。

这就是您的想法吗。这似乎有点波涛汹涌，但第一次尝试时很艰难

crSpline似乎不会暴露动画元素上的任何坐标，因此我们必须定期观察它们并相应地调整视口：

setInterval(function() {

    var mover = $('#mover'),
        posX = mover.position().left,
        posY = mover.position().top;

    $(window)
        .scrollLeft(posX - $(window).width() / 2)
        .scrollTop(posY - $(window).height() / 2);
}, 10);

---

我怀疑之所以会出现这种波动，是因为我们的

setInterval

与移动器上的

$不同步。您可以通过运行两个动画来修复此问题：一个在移动器上，另一个在包装器div的
scrollTop
和
scrollLeft
上。您可以同时应用两个
$。像这样设置动画
 jqueryanimate中有一个
步骤
函数选项，它在动画的每个步骤上运行

请参见此处的第二版函数参数：


根据您的代码查看此小提琴，它调用
step
函数来调整视口：


$（“”）
.appendTo（$（document.body））
.animate（{crSpline:spline}{
持续时间：20000，
步骤：function（）{/*调整视口的步骤函数*/
var mover=$（“#mover”），
posX=mover.position（）.左；
posY=mover.position（）.top；
$（窗口）
.scrollLeft（posX-$（窗口）.width（）/2）
.scrollTop（posY-$（窗口）.height（）/2）；
} ,
完成：函数（）{
//完成后，使用新样条线重新运行演示
setTimeout（函数（）{
DEMO.run（）；
}, 5000);
}
});
很高兴看到一些示例代码。。。最好是在JSFIDLE中。@Timothy我添加了一些示例代码。很棒的东西，正是我的意思。我是否可以更好地同步间隔，或者直接与$.animate集成？另外，这会产生什么样的CPU影响？您可以运行第二个
$来代替使用
setInterval
。如本文中所示设置动画：。它不能在窗口上运行，所以您可能不得不在带有滚动条的包装器div上调用它。我认为在桌面上运行这个不会有性能问题。这在技术上是可行的，但会导致严重的眼癌。它也是“坏的”，因为对div位置的更新和滚动不同步，这导致了恼人的摇摆效应。我上面的评论解释了如何解决这个问题。另外，另一个发布的解决方案使用
$对闪烁进行了巨大的改进。。。不知何故，一开始我认为我看到了step函数的一些奇怪行为，所以我写了自己的答案（现在我删除了这个答案，因为我再也看不到了，不知道我以前在做什么…）。完美、简单的解决方案+1.
.animate( properties, options )

propertiesA map of CSS properties that the animation will move toward.

optionsA map of additional options to pass to the method. Supported keys:

duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
complete: A function to call once the animation is complete.
step: A function to be called after each step of the animation.
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

$('<div id="mover" />')
        .appendTo($(document.body))
        .animate({ crSpline: spline },{
            duration: 20000,
            step: function() {       /* THE STEP FUNCTION TO ADJUST VIEWPORT */
              var mover = $('#mover'),               
              posX = mover.position().left;
              posY = mover.position().top;

              $(window)
              .scrollLeft(posX - $(window).width() / 2)
               .scrollTop(posY - $(window).height() / 2);
            } ,
            complete:function () {
                      // Re-run the demo with a new spline after we're done
                       window.setTimeout(function() {
                       DEMO.run();
                      }, 5000);
            }
        });