javascript - 如何将 jQuery Reel 播放到特定帧并停在那里？

Question

jQuery Reel ( http://jquery.vostrel.cz/reel ) 是一个优秀的 jQuery 插件，用于创建漂亮的 360 度 View 。

您可以触发一些事件来播放、停止和暂停动画，还可以检测您当前所在的帧(.reel("frame"))，但我真的不能弄清楚如何将它们组合在一起以创建一个播放特定帧的卷轴的链接，然后停止。有什么建议吗？

Answer 1

您可以“播放”它，绑定(bind)到“frameChange”事件来检查目标帧，当到达目标帧时，“停止”它。像这样的事情:

$('#your_reel_image')
.trigger('play')
.bind('frameChange', function(){
    if ($(this).reel('frame') == target_frame){
        $(this).trigger('stop');
    }
});

请注意，在手机等速度较慢的设备上，可能会跳过某些帧以跟上所需的动画速度。

您还接收 frame 作为第三个事件处理程序参数，以保存处理程序内额外的 .reel() 调用，因此上面的内容可以重构为:

$('#your_reel_image')
.trigger('play')
.bind('frameChange', function(e, depr_frame, frame){
    if (frame == target_frame){
        $(this).trigger('stop');
    }
});

编辑:

从 1.3 版本开始，您可以将上述解决方案替换为调用:

$('#your_reel_image').trigger('reach', target_frame);

Reel 将以动画方式呈现朝向给定帧的最短路径并停在那里。