Question

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

然而，完整的画布尺寸有意地相当宽 - 绝对比大多数屏幕都大 - 因此图形将很快耗尽视口空间并在屏幕上显示动画。

相反，我希望浏览器视口跟随或居中于图像，以便它保持“拍摄”。

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

我已基于jsFiddle demo,创建了crSpline demo source，但设置了较宽的minX。

NB ：我首先尝试使用YUI3，而Loktar提供了基于solution的画布，但我没有使用YUI＆amp;画布不再。

Answer 1

这是你的想法吗？ 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);

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

Answer 2

在jQuery animate中存在step函数的选项，该选项在动画的每一步都运行。

在此处查看功能参数的第二个版本： 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/

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

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

2 个答案: