0

有没有办法让一个元素在屏幕上以倒 U 形飞行并连续旋转？我正在编写一个脚本，我需要创建这种效果：图像从屏幕的左下角出现，达到屏幕高度的 50%，然后从屏幕的右上角落下。我需要每 1 分钟执行一次，但我可以使用 setInterval 执行此操作。

我做了什么：

var currWidth = $(window).width();
console.log(currWidth);

var startPos = -100;
var endPos = (currWidth + 100) + (startPos / 2);
console.log(endPos);
setInterval(
function(){
$('.bouquet').animate({left: endPos}, 3000);

var offset = $(e.target).offset();
    $('.bouquet').animate({'top':offset.top},600);
}, 10000
);

但它是从屏幕的左边到右边的，所以它不能正常工作。

4

1 回答 1

0

好吧，这并不容易。你需要一次做两个动画，比如

//first half of the motion
setTimeout(function(){
    $('.bouquet').animate({left: endPos/2}, 3000,'<easing>');
},0);

setTimeout($('.bouquet').animate({top:offset.top}, 3000,'<easing>',function(){
    //on complete: other half of the motion
    setTimeout(function(){
        $('.bouquet').animate({left: endPos}, 3000,'<easing>');
    },0);
    setTimeout(function(){
        $('.bouquet').animate({top:offset.top}, 3000,'<easing>'
    }),0)
}),0)

缓动函数为左右运动提供二次函数，为上下运动提供线性函数。否则它只是一条线......但我不确定这些是哪些缓和，有人可以补充一下。这两个setTimeout功能不应该阻塞，因此两个动画应该同时发生

[编辑] ...好吧，我刚试过，似乎不可能同时在一个对象上做多个动画。但我想出了另一个可能的解决方案：

http://jsfiddle.net/7AHLb/1

它还不完美，但如果你玩一下它，它可能会对你有所帮助。

于 2013-08-26T12:41:12.820 回答