如何在屏幕上关注jQuery动画div？

我正在使用jQuery.crSpline为曲线路径上的图形设置动画。 我对结果非常满意。

但是，完整的canvas大小有意地相当宽 – 绝对比大多数屏幕大 – 因此图形将很快耗尽视口空间并在屏幕上显示动画。

相反，我希望浏览器视口跟随或居中在图像上，以便它保持“镜头”。

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

我已经基于crSpline演示源创建了一个jsFiddle演示 ，但是具有很宽的minX设置。

---

注意 ：我首先尝试使用YUI3和Loktar提供了一个基于canvas的解决方案 ，但是我不再使用YUI和canvas了。

Answer 1

jQuery animate中存在stepfunction选项，该选项在动画的每个步骤上运行。

请参阅此处的第二版函数参数： http ： //api.jquery.com/animate/

 .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). 

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

http://jsfiddle.net/gNdwD/35/

 $('
') .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); } }); 

Answer 2

这是你的想法吗？ http://jsfiddle.net/gNdwD/33/ 。 它看起来有点不稳定，但它是一个艰难的第一次尝试。

看起来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); 

我怀疑发生了$.animate因为我们的setInterval与移动$.animate上的$.animate不同步。 您可以通过运行两个动画来解决这个问题：一个在移动设备上，另一个放在包装器div的scrollTop和scrollLeft上。 您可以同时应用两个$.animate 。