Javascript动画效果 [英] Javascript Animate Performance

问题描述

我的js出现了一些问题.

I'm having some issues here with my js.

它可以正常运行，但是在某些情况下性能太慢.

It functions correctly, but the performance is too slow in a certain case.

我轻轻地滚动到底部，但是当我再次向上滚动时，它滚动得很慢.

I scroll to the bottom softly, but when I try to scroll up again, it scrolls very slowly.

我该怎么做才能提高性能?

What can i do to enhance the performance?

谢谢！

$(function(){

var windowHeight = $(window).height();
var windowWidth = $(window).width();
var sectionsNumbers = $("#content section").length-1;
var sectionCount = 0;

// Scroll sets

var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth;
var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight;

$("#content").css("width", windowScrollX+windowWidth);
$("#content").css("height", windowScrollY+windowHeight);

$(".illusion1").css("width", windowScrollX+windowWidth);
$(".illusion1").css("height", windowScrollY+windowHeight);

// Set mask w and h

$("#mask").css("width", windowWidth);
$("#mask").css("height", windowHeight);
$(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight);

$("#content section").each(function() {

    // Defines its width and height

    $(this).css("width", windowWidth);
    $(this).css("height", windowHeight);

    // Defines its position
    $(this).css("left", sectionCount*windowWidth);
    $(this).css("top", sectionCount*windowHeight);

    sectionCount++;
});

// When window scrolls

$(window).scroll(function(){ 

    var curScrollTop = $(window).scrollTop();
    var angleVar = windowScrollX/windowScrollY;

    $("#content").stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 250, easing: 'easeOutQuart'});

    $(".illusion1").stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 250, easing: 'easeOutQuart'});

    //{duration: 1500, easing: 'easeOutQuart'}
    });
});

推荐答案

您没有在动画中缓存选择器(重复使用$(this)或$('#mask')也是浪费的)，所以每个当用户滚动时，它正在/整个dom/搜索#content#illusion1.同样，在滚动上设置动画效果有些多余，因为滚动本身就是一种动画".固定的定位是理想的选择，但是您只需在每个滚动条上设置CSS样式就可以达到相同的效果.只是不要在每个滚动事件上使用动画.另外，您也不在左侧和顶部提供"px"，这样做可以防止在前缀前面加上-" +来投射"到字符串中.尝试像这样重写$(window).scroll函数:

You're not caching selectors in your animation (and repeatedly using $(this) or $('#mask') is wasteful as well), so every time the user scrolls, it's /searching the entire dom/ for #content, #illusion1. Also, animating on scroll is somewhat redundant, since scrolling is a kind of "animation" itself. Fixed positioning would be ideal, but you can achieve the same effect by just setting the CSS style on each scroll. Just don't use animate on every scroll event. Also, you're not supplying 'px' for left and top and doing so prevents the need to "cast" into a string by prepending "-"+. Try re-writing the $(window).scroll function like so:

var $window = $(window),
    $content = $("#content"),
    $illusion = $(".illusion1");
$window.scroll(function(){ 
    var curScrollTop = $window.scrollTop();
    var angleVar = windowScrollX/windowScrollY;
    $content.css({ left: (-curScrollTop*angleVar)+'px', top: (-curScrollTop)+'px' });
    $illusion.css({ left: (-curScrollTop*angleVar*0.5)+'px', top: (-curScrollTop*0.5)+'px' });
});

如果您对动画效果充满信心，请考虑使用反跳/节流方法.而不是在每个滚动事件上设置动画，请使用:"timeout = setTimeout(function(){...}，25)"将在允许超时到期时执行动画，并且在滚动时只需clearTimeout(timeout)和再次设置超时.该动画将不是实时的，因为除非用户停止滚动25ms，否则它将永远不会执行.

If your heart is set on the animation effect, consider a debounce/throttle method. Rather than animating on every single scroll event, use: "timeout = setTimeout(function(){ ... }, 25)" that will perform the animation when the timeout is allowed to expire, and on scroll simply clearTimeout(timeout) and set the timeout again. The animation will not be realtime, as it will never be performed unless the user stops scrolling for 25ms.

这篇关于Javascript动画效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！