Question

我正在制作一个项目，在滚动的同时，图像的背景会根据滚动距离而变化。一切正常，但浏览器没有原生平滑滚动的问题很小，因为图片变化太快，跳过太多帧。我有一个关于使用jQuery实现平滑滚动的想法，但这会过多地阻碍性能，许多人不喜欢这种效果。

所以我想，如果有办法，逐渐改变变量的值？例如，如果值为891并且突然变为1072，那么首先它将遍历它们之间的所有数字？

提前致谢。

我目前的代码，一切正常，只需要想办法逐步改变correntPos / rotPos

// reel on scroll and mouse move

        var rotPos          = 0, // actual coordinates of the image sprite
            scrollAmount1   = 0, // mouse triggered rotation frame counter
            scrollAmount2   = 0, // scroll triggered rotation frame counter
            currentPos      = 0; // total rotation frames counter

        $('#reel').bind('touchmove',function(e){ // touch devices fix
            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
            var elm = $(this).offset();
            var x = touch.pageX - elm.left;
            if(x < $(this).width() && x > 0){
                relativeX = touch.pageX;
                scrollAmount1       = Math.round( relativeX / 35 ); // get the needed frame depending on amount of mouse movement
                currentPos          = scrollAmount1 + scrollAmount2; // set current frame
                rotPos              = currentPos * 687; // calculate position depending on frame

                $('.reel').css('background-position', '0px ' + '-' + rotPos + 'px' );
            }
        });

        $('#reel').on('mousemove', function(e) {

            relativeX           = e.pageX; // calculate mouse distance from left
            scrollAmount1       = Math.round( relativeX / 35 ); // get the needed frame depending on amount of mouse movement
            currentPos          = scrollAmount1 + scrollAmount2; // set current frame
            rotPos              = currentPos * 687; // calculate position depending on frame

            $('.reel').css('background-position', '0px ' + '-' + rotPos + 'px' );

        });

        $(window).on('scroll', function(){

            var windowScrollCount   = $(window).scrollTop(); // determine amount scrolled
                scrollAmount2       = Math.round( windowScrollCount / 35); // get the needed frame depending on scroll amount
                currentPos          = scrollAmount1 + scrollAmount2; // set current frame
                rotPos              = currentPos * 687; // calculate position depending on frame

            $('.reel').css('background-position', '0px ' + '-' + rotPos + 'px' ); // write into item style

        });

Answer 1

您似乎想要实现名为easing的功能，您必须使用循环编写规则：

代码已更新

    var value = 200; // next value is 800
    var second_value = 800;
    var stepping = 10;

    if( (second_value - value) > stepping )
    {
     for(var i = value; i < (second_value); i++)
     {
        if( i % stepping == 0)
            {
                value = value + stepping;
        doOperation(value); // a custom operation which uses value
            }

      }
    }

function doOperation(value)
{
    console.log("Value is: " + value);
}

但要使其适合您的代码，您应该编写一个函数，该函数获取最小值，最大值以及用作stepping_value的可选第三个参数。然后在函数内部使用全局变量在执行流程中添加STATE。大致像这样：

function getNextStepValue(value , second_value, stepping_amount)
{
        var value = 200; // next value is 800
        var second_value = 800;
        var stepping = 10;

        if(window.stepped_value == second_value)
        {
           window.stepped_value = 0;
           return false; // or any other value you like

        }

        if(!window.stepped_value)
        { 
          window.stepped_value = value;
        }

        if( (second_value - value) > stepping_amount )
        {
            window.stepped_value = window.stepped_value + stepping_amount
            return window.stepped_value;


        }
}

您可以通过全局变量在函数中使用额外的条件和标志，以增加灵活性。例如if设置为true的标志然后允许完成整个范围的缓动，如果为false，则跳过缓动。

逐渐改变变量

1 个答案: