0

首先，请原谅我可能过度膨胀的 JS 函数。我的脚本中还有一些代码行可能会被删除。也就是说，我仍然习惯于 JS/jQuery，因此欢迎对我的脚本提出任何批评、建议或更正。

也就是说，我已经建立了一个脚本，可以通过摄影师作品集网站中的部分内容制作动画。该脚本似乎在台式计算机上运行良好，但移动性能充其量是笨拙的。所以，我在这里寻求有关如何优化我的脚本或添加一些代码来帮助平滑动画的帮助。

继承人的行动代码：http: //jsbin.com/icereg/2/edit

编辑：更新的 JSbin 项目： http ://jsbin.com/icereg/3/edit

以下是麻烦的动画功能：

// Bounce Top

function bounce_top() {
    $isAnimating = 1;
    $content.animate({top: '+=44'}, 200, 'easeInOutQuart',
        function () {
            $content.animate({top: '-=44'}, 200, 'easeInOutQuart');
            $isAnimating = 0;
        });
} // end bounce_top()



// Bounce Right

function bounce_right() {
    $isAnimating = 1;
    $content.animate({left: '-=44'}, 200, 'easeInOutQuart',
        function () {
            $content.animate({left: '+=44'}, 200, 'easeInOutQuart');
            $isAnimating = 0;
        });
} // end bounce_right()



// Bounce Bottom

function bounce_btm() {
    $isAnimating = 1;
    $content.animate({top: '-=44'}, 200, 'easeInOutQuart',
        function () {
            $content.animate({top: '+=44'}, 200, 'easeInOutQuart');
            $isAnimating = 0;
        });
} // end bounce_btm()



// Bounce Left

function bounce_left() {
    $isAnimating = 1;
    $content.animate({left: '+=44'}, 200, 'easeInOutQuart',
        function () {
            $content.animate({left: '-=44'}, 200, 'easeInOutQuart');
            $isAnimating = 0;
        });
} // end bounce_left()



    // Scroll Content

function scroll_content() {

    $isAnimating = 1;

    if ($curr_section === ($total_section - 1) && ($event_target === 'down' || ($event_target === 'scroll' && $mouse_delta < 0))) {
        // we're at the bottom;  - 1 because of included 0 section; 
        bounce_btm();

    } else if ($curr_section === 0 && ($event_target === 'up' || ($event_target === 'scroll' && $mouse_delta >= 0))) {
        // we're already at the top
        bounce_top();

    } else if ($event_target === 'down' || $event_target === 'up' || $event_target === 'scroll' || $event_target === 'nav') {
        // now either UP or DOWN inputs (mouse wheel, keyboad, nav links)

        $nav_work_links.removeClass('active_nav');
        $('#right_arrow').add('#left_arrow').remove();

        if ($event_target === 'down' || ($event_target === 'scroll' && $mouse_delta < 0)) { // down or scroll down
            $curr_section = $curr_section + 1;
            $vertslidePos = '-=675';

        } else if ($event_target === 'up' || ($event_target === 'scroll' && $mouse_delta >= 0)) { // up or scroll up
            $curr_section = $curr_section - 1;
            $vertslidePos = '+=675';

        } else if ($event_target === 'nav') {
            // now nav click inputs
            $curr_section = $event_target_eq;
            $vertslidePos = '-' + ($curr_section * 675);
        }
        if ($curr_page > 1) {
            $content.animate({marginLeft: 0}, 450, 'easeInOutQuart'); // end .animate() method
        }
        $content.animate({top: $vertslidePos}, 450, 'easeInOutQuart',
            function () {
                if ($('.nav_work_items').eq($curr_section).index() === 0) {
                    $nav_work_links.removeClass('active_nav');
                } else {
                    $('.nav_work_items').eq($curr_section - 1).find('.nav_work_links').addClass('active_nav');
                }
                $('.active_nav').before($left_arrow).after($right_arrow);
                $curr_page = 1;
                window.location.hash = '#work' + $curr_section;
                $isAnimating = 0;
            }); // end .animate() method    

    } else if ($event_target === 'left' || $event_target === 'right') {
        // now either RIGHT or LEFT inputs
        $right_arrow = $('#right_arrow');
        $left_arrow = $('#left_arrow');
        $active_nav = $('.active_nav');
        $total_pages = $('#work' + $curr_section).children('.workcontent').length;

        if ($curr_page === $total_pages && $event_target === 'right') {
            bounce_right();

        } else if ($curr_page === 1 && $event_target === 'left') {
            bounce_left();

        } else {

            if ($event_target === 'right') {
                $curr_page = $curr_page + 1;
                $horzslidePos = '-=600px';

            } else if ($event_target === 'left') {
                $curr_page = $curr_page - 1;
                $horzslidePos = '+=600px';
            }

            $content.animate({marginLeft: $horzslidePos}, 450, 'easeInOutQuart',
                function () {
                    $isAnimating = 0;
                }); // end .animate() method
        }
    }

} // end scroll_content();
4

1 回答 1

0

我曾经是并且仍然是 JS n00b，然后我的代码过于臃肿。一些简单的整合和重新制定确实有帮助。但是，现在也有这个 JS 插件来帮助平滑 JS 动画：

速度.js

.....对于那些将来可能登陆这里的人来说，这里有更好的东西：

GSAP

于 2015-01-28T16:56:31.087 回答