javascript – 为jQuery中的几个元素平滑地链接动画

2019年8月4日 168次阅读

我试图通过使用jQuery顺序动画几个堆叠的图像来重新创建地图的放大效果,用于跨域目的.

到目前为止,我通过使用延迟和每个图像的两个单个动画(A& B日志)对动画进行排队来实现某些目的,以便通过缩放在图像之间生成平滑过渡,并在下一个图像上淡化它们.

$('img:not(:last-child)') /* All images but farest zoom */
.reverse() /* From last to first */
.each(function (index) {
    $(this).css( /* From half size… */ {
        'width': 584,
        'height': 336,
        'margin-left': -292,
        'margin-top': -168
    });
    $(this).delay(index * 300).animate( /* …to actual size */ {
        'width': 1168,
        'height': 673,
        'margin-left': -584,
        'margin-top': -336
    }, {
        duration: 300,
        easing: 'linear',
        done: function () {
            console.log('A:', index, new Date().getTime() - timestamp);
        }
    });
});
$('img:not(:first-child)') /* All images but closest zoom */
.reverse() /* From last to first */
.each(function (index) {
    $(this).animate( /* Animate to double size */ {
        'width': 2336,
        'height': 1346,
        'margin-left': -1168,
        'margin-top': -673,
        'opacity': 0
    }, {
        duration: 300,
        easing: 'linear',
        done: function () {
            console.log('B:', index, new Date().getTime() - timestamp);
            $(this).remove(); /* Remove the elment once completed */
        }
    });
});

众所周知,jQuery缺乏对单个队列中不同DOM元素的动画队列动画的支持,这导致了这种复杂的解决方案.

请check this Fiddle.

如您所见,一旦图像完全加载并单击地图,动画队列就会启动.但它远非完美.转换根本不是流动的,导致动画之间稍微停顿,从而破坏了结果.我已经尝试了几个小时,玩了超时,重新思考算法,强制线性转换,但没有结果.

我的主要目标是实现流畅的动画,然后为整个动画重新创建像“swing”这样的全局缓动效果,在中间图像动画时逐渐加速.

最佳答案 所以花了我的最后几个小时搞清楚这里的黑客是什么,这里是你应该注入的代码

jQuery.easing = {
    zoom: function( p ) {
        return (3*p + Math.pow( p, 2 ))/4;
    }
};

之后,您可以在代码中使用缓动：“缩放”.

非常荒谬btw在jQuery UI中有32种不同的缓动但没有什么可以放大！

点赞