Función de animación

1 Principio de realización de la animación

** Principio básico: ** Mueva continuamente la posición de la caja a través del temporizador setInterval ().

Pasos de implementación:

1. Obtener la posición actual de la caja
2. Deje que la caja agregue 1 distancia de movimiento a la posición actual
3. Usa el temporizador para seguir repitiendo esta operación
4. Agregar una condición de temporizador de finalización
5. Tenga en cuenta que este elemento debe agregar posicionamiento antes de que se pueda usar element.style.left

// 1. 获得盒子当前位置 div.offsetLeft
// 2. 使用div.style.left更改盒子的位置
//div.style.left = div.offsetLeft + 1 +'px';
// 3. 添加定时器
setInterval(function() {
    
    
    div.style.left = div.offsetLeft + 1 +'px';
},30)//此时无结束定时器，盒子会走出页面

//完整写法：
var timer = setInterval(function() {
    
    
    if(div.offsetLeft >= 400) {
    
    
        //停止动画 本质是清除定时器
        clearInterval(timer);
    }
    div.style.left = div.offsetLeft + 1 +'px';
},30)

2 Empaquetado simple de funciones de animación

La función necesita pasar 2 parámetros, el objeto de animación y la distancia de movimiento .

//简单动画函数封装obj:目标对象 target: 目标位置
function animate(obj, target) {
    
    
    var timer = setInterval(function () {
    
    
        if (obj.offsetLeft >= target) {
    
    
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span')
//调用函数
animate(div, 300);
animate(span, 200);

3 La función de animación registra diferentes temporizadores para diferentes elementos

1. Si varios elementos usan esta función de animación, un temporizador debe ser var cada vez, lo cual es una pérdida de espacio en la memoria.
2. Si el div quiere usar este temporizador llamado temporizador, el temporizador de intervalo también se llama temporizador, lo que provocará ambigüedad. Entonces podemos usar diferentes temporizadores para diferentes elementos (use nuestros propios temporizadores)

Principio básico : el uso de JS es un lenguaje dinámico que puede agregar atributos fácilmente al objeto actual.

function animate(obj, target) {
    
    
    // 使用obj.timer给不同的对象指定了不同的定时器
    obj.timer = setInterval(function () {
    
    
        if (obj.offsetLeft >= target) {
    
    
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 30);
}

4 Principio del efecto suavizante

Facilitar la animación es cambiar la velocidad del movimiento del elemento, lo más común es detener la velocidad lentamente

Ideas:

1. Reduzca lentamente la distancia que se mueve la caja cada vez, y la velocidad disminuirá lentamente.
2. Algoritmo central: (valor objetivo-posición actual) / 10 como la longitud del paso de cada distancia de movimiento
3. La condición para detenerse es: detener el temporizador cuando la posición actual de la caja sea igual a la posición objetivo
4. Tenga en cuenta que el valor del paso debe redondearse

La diferencia entre animación uniforme y animación suavizada

• La animación de velocidad constante es la posición actual de la caja + un valor fijo
• La animación de aceleración es la posición actual del cuadro + el valor cambiado ((posición objetivo-posición actual) / 10)

function animate(obj, target) {
    
    
    //让元素只有一个定时器在执行，需要清除以前的定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
    
    
        //步长值写到定时器的里面
        //把步长值改为整数，不会出现小数问题
        // var step= Math.ceil((target - obj.offsetLeft) / 10);
        //考虑到后退问题
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft >= target) {
    
    
            clearInterval(obj.timer)
        }
        //把每次加1这个步长值改为一个慢慢变小的值
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

5 Agregue la función de devolución de llamada a la función de animación

Principio de la función de devolución de llamada : una función se puede utilizar como parámetro. Pasar esta función como parámetro a otra función. Después de ejecutar esa función, se ejecuta la función pasada. Este proceso se llama callback.

La posición donde se escribe la función de devolución de llamada: la posición donde termina el temporizador.

function animate(obj, target, callback) {
    
    
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
    
    
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft >= target) {
    
    
            clearInterval(obj.timer);
            //回调函数写的位置
            if(callback) {
    
    
                //调用函数
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

//应用
btn.addEventListener('click', function() {
    
    
    animate(div, 800, function() {
    
    
        alert('hello');
    })
})

6 Paquete de funciones de animación

La animación se usa a menudo en el desarrollo, por lo que se puede encapsular en un archivo js separado e importar cuando se usa.