6

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

然而，完整的画布尺寸故意相当宽 - 肯定比大多数屏幕大 - 所以图形将很快耗尽视口空间并在屏幕上显示动画。

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

我将如何使用 jQuery 来解决这个问题？scrollTop 是一个选项吗？

我创建了一个jsFiddle 演示，基于crSpline 演示源，但具有广泛的 minX 设置。

注意：我第一次尝试使用 YUI3 并且Loktar提供了一个基于画布的解决方案，但是我不再使用 YUI 和画布了。

4

2 回答 2

5

这是你的想法吗？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 的 and 上scrollTop。您可以像这样scrollLeft同时应用两个$.animates 。

于 2012-09-18T09:09:20.950 回答
3

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);
            }
        });
于 2012-09-18T09:34:16.723 回答