0

我有一个 jQuery 动画，使用默认的摆动缓动在最后放慢了太多。我尝试了线性选项，但它在接近尾声时看起来同样缓慢。我通过并尝试了这里找到的几个缓动函数。因为我有几个其他动画运行延迟来同步它们，所以似乎任何与原始摆动缓动变化太大的缓动函数都会使一切失去同步。经过一番搜索，我发现了一个 easeOutInQuad 函数，其图形看起来像 swing 函数的倒数。我认为与摇摆函数相反（或接近于相反）的缓动函数不太可能改变运行动画的总时间。这是我在代码中使用的 easeOutInQuad 和相关的 easeOutQuad 和 easeInQuad 函数：

            $(function(){$.extend($.easing,{
    easeOutQuad:function(e,f,a,h,g){
        return -h*(f/=g)*(f-2)+a;
    },
    easeInQuad:function(e,f,a,h,g){
        return h*(f/=g)*f+a;
    },
    easeOutInQuad:function(e,f,a,h,g){
        if(f<g/2){
            return easeOutQuad(f*2,a,h/2,g);
        }return easeInQuad((f*2)-g,a+h/2,h/2,g);
    }
});});

出于某种原因，当我运行动画时，我得到一个 easeOutQuad is undefined 错误。我对 jQuery 有点陌生。任何帮助表示赞赏。

供参考的是我正在使用的其余代码：

$(document).ready(function() {
var fC_duration = 10000;
//flyingCrow synchronization *No Edit*
var rW_delay = 0.021*fC_duration;
var uFin_delay = 0.183*fC_duration;
var uFout_delay = 0.025*fC_duration;
var mF_delay = 0.225*fC_duration;
var dF_delay = 0.242*fC_duration;
//bruce2 and and hand FadeOut synchronization *No Edit*
var b2_delay = 0.133*fC_duration;
//synchronize cardGrab with flyingCrow *No Edit*
var fCgC_sync = 0.417*fC_duration;
// Syncs completion of bruce animations with start of flyingCrow
var bFc_sync = fC_duration+3000;
$(function(){$.extend($.easing,{
    easeOutQuad:function(e,f,a,h,g){
        return -h*(f/=g)*(f-2)+a;
    },
    easeInQuad:function(e,f,a,h,g){
        return h*(f/=g)*f+a;
    },
    easeOutInQuad:function(e,f,a,h,g){
        if(f<g/2){
            return easeOutQuad(f*2,a,h/2,g);
        }return easeInQuad((f*2)-g,a+h/2,h/2,g);
    }
});});
// lock scroll position, but retain settings for later
function lockScroll(){
    var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
    var scrollPosition = [
    self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
    self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    html.data('scroll-position', scrollPosition);
    html.data('previous-overflow', html.css('overflow'));
    html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
}
function unlockScroll(){
    // un-lock scroll position
    var html = jQuery('html');
    var scrollPosition = html.data('scroll-position');
    html.css('overflow', html.data('previous-overflow'));
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
}
lockScroll();
$(".bruce").fadeTo(3000, 1, function() {
    $(".question").animate({"opacity": 1}, "fast");
    $(".question").delay(4500).animate({"opacity": 0}, "fast", function() {
        $(".bruce").fadeTo(2500, 0);
        $(".bruce2").delay(1700).fadeTo(50, 1);
        $(".shake").delay(1700).fadeTo(50, 1, function() {
            $(".solution").delay(1600).animate({"opacity": 1}, "fast");
        });
    });
});
setTimeout(function() {
    $(".crowTree").delay(250).animate({"opacity": 0}, 200);
    $(".flyingCrow").delay(350).animate({
        width: "1215px",
        height: "860px",
        marginLeft: "-130%",
        marginTop: "300px"},
        {
        duration: fC_duration,
        queue: false,
        easing:'easeOutInQuad'
    });
    $(".raiseWings").animate({"opacity": 1}, "fast", function () {
        $(".raiseWings").delay(rW_delay).animate({"opacity": 0}, "fast");
    });
    $(".upFlap").delay(uFout_delay).animate({"opacity": 1}, "fast", function() {
        $(".upFlap").delay(uFin_delay).animate({"opacity": 0}, "fast");
    });
    $(".midFlap").delay(mF_delay).animate({"opacity": 1}, "fast", function() {
        $(".midFlap").animate({"opacity": 0}, "fast");
    });
    $(".downFlap").delay(dF_delay).animate({"opacity": 1}, "fast", function() {
        $(".downFlap").animate({"opacity": 0}, 1, function() {
            $(".midFlap").animate({"opacity": 1}, 1, function() {
                $(".midFlap").delay(100).animate({"opacity": 0}, 1, function() {
                    $(".upFlap").animate({"opacity": 1}, 1, function() {
                        $(".solution").animate({"opacity": 0}, "fast");
                    });
                });
            });
        });
    });
    setTimeout(function() {
        $(".upFlap").animate({"opacity": 0}, 1, function() {
            $(".grabCard").animate({"opacity": 1}, 1, function() {
                $(".grabbedCard").animate({"opacity": 0}, 1, function() {
                    $(".hand, .bruce2").fadeTo(b2_delay, 0);
                });
            });
        });
    },fCgC_sync);
    setTimeout(function() {
        unlockScroll();
        $('html, body').animate({scrollTop:$(document).height()}, 2000);
    },fC_duration);
},bFc_sync);

});

4

1 回答 1

0

你的代码...

if(f<g/2){
            return easeOutQuad(f*2,a,h/2,g);
        }return easeInQuad((f*2)-g,a+h/2,h/2,g)

;

easeOutQuad()不能这样打电话。

于 2013-07-08T03:40:40.017 回答