* Paquete de funciones de animación Web APIs 6 · Estuche: Carrusel web · Estuche: Volver al principio · Estuche: Estuche Tendon Cloud · Evento de pantalla táctil ·

** 1.1. ** Paquete de funciones de animación

1.1.1 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 paso de distancia para cada movimiento
3. Las condiciones para detenerse son: Detenga el temporizador si la posición actual de la caja es igual a la posición objetivo.
4. Tenga en cuenta que el valor del paso debe redondearse

1.1.2 La función de animación se mueve entre varios valores objetivo

Puede mover la función de animación de 800 a 500.

Cuando hacemos clic en el botón, juzgamos si el tamaño del paso es positivo o negativo.

1. Si es un valor positivo, el tamaño del paso es mayor y redondeado.

2. Si es un valor negativo, el tamaño del paso se redondea hacia abajo.

1.1.3 Agregar la función de devolución de llamada a la función dinámica

Principio de la función de devolución de llamada: una función se puede utilizar como parámetro. Pasar esta función como un parámetro a otra función. Después de que se ejecuta 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.

1.1.4 Código de la versión completa de animación:

function animate(obj, target, callback) {
    
    
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    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);
            // 回调函数写到定时器结束里面
            // if (callback) {
    
    
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

1.2. Casos de efectos especiales habituales en páginas web

1.2.1 Caso: Imagen de carrusel de página web

La imagen del carrusel también se denomina imagen de enfoque, que es un efecto especial común de una página web en la página web.

Requerimientos funcionales:

1. El mouse pasa por el módulo de diagrama de carrusel, se muestran los botones izquierdo y derecho, y los botones izquierdo y derecho se ocultan cuando se deja.

2. Haga clic en el botón de la derecha una vez, la imagen se reproducirá a la izquierda, y así sucesivamente, el botón de la izquierda es el mismo.

3. Mientras se reproduce la imagen, el módulo de círculo pequeño siguiente cambia junto con él.

4. Haga clic en el círculo pequeño para reproducir la imagen correspondiente.

5. El carrusel reproducirá automáticamente la imagen sin que el mouse pase sobre el carrusel.

6. Cuando el mouse pase, el módulo de diagrama de carrusel se reproducirá y se detendrá automáticamente.

window.addEventListener('load', function() {
    // 1. 获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // 2. 鼠标经过focus 就显示隐藏左右按钮
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null; // 清除定时器变量
    });
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function() {
            //手动调用点击事件
            arrow_r.click();
        }, 2000);
    });
    // 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    // console.log(ul.children.length);
    for (var i = 0; i < ul.children.length; i++) {
        // 创建一个小li 
        var li = document.createElement('li');
        // 记录当前小圆圈的索引号 通过自定义属性来做 
        li.setAttribute('index', i);
        // 把小li插入到ol 里面
        ol.appendChild(li);
        // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function() {
            // 干掉所有人 把所有的小li 清除 current 类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下我自己  当前的小li 设置current 类名
            this.className = 'current';
            // 5. 点击小圆圈，移动图片 当然移动的是 ul 
            // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
            // 当我们点击了某个小li 就拿到当前小li 的索引号
            var index = this.getAttribute('index');
            // 当我们点击了某个小li 就要把这个li 的索引号给 num  
            num = index;
            // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
            circle = index;
            // num = circle = index;
            console.log(focusWidth);
            console.log(index);

            animate(ul, -index * focusWidth);
        })
    }
    // 把ol里面的第一个小li设置类名为 current
    ol.children[0].className = 'current';
    // 6. 克隆第一张图片(li)放到ul 最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7. 点击右侧按钮， 图片滚动一张
    var num = 0;
    // circle 控制小圆圈的播放
    var circle = 0;
    // flag 节流阀
    var flag = true;
    arrow_r.addEventListener('click', function() {
        if (flag) {
            flag = false; // 关闭节流阀
            // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function() {
                flag = true; // 打开节流阀
            });
            // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
            circle++;
            // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
            if (circle == ol.children.length) {
                circle = 0;
            }
            // 调用函数
            circleChange();
        }
    });

    // 9. 左侧按钮做法
    arrow_l.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';

            }
            num--;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
            circle--;
            // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
            // if (circle < 0) {
            //     circle = ol.children.length - 1;
            // }
            circle = circle < 0 ? ol.children.length - 1 : circle;
            // 调用函数
            circleChange();
        }
    });

    function circleChange() {
        // 先清除其余小圆圈的current类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留下当前的小圆圈的current类名
        ol.children[circle].className = 'current';
    }
    // 10. 自动播放轮播图
    var timer = setInterval(function() {
        //手动调用点击事件
        arrow_r.click();
    }, 2000);

})

1.2.2. Válvula de mariposa

Evite que el clic continuo del botón del carrusel haga que la reproducción sea demasiado rápida.

El propósito del acelerador: cuando se ejecuta el contenido de la animación de la función anterior, se ejecuta la siguiente animación de la función, por lo que el evento no se puede activar de forma continua.

Idea central de realización: use la función de devolución de llamada, agregue una variable para controlar, bloquear la función y desbloquear la función.

Comience a establecer una variable var flag = true;

Si (bandera) {bandera = falsa; haz algo} apaga el grifo

Use la animación de la función de devolución de llamada para completar la ejecución, flag = true para encender el grifo

1.2.3. Caso: volver al principio

1. Volver arriba con animación
2. En este punto, puede continuar usando nuestra función de animación encapsulada
3. Simplemente cambie todos los valores relacionados con la izquierda para que estén relacionados con la distancia de desplazamiento vertical de la página.
4. La cantidad de desplazamiento de la página se puede obtener mediante window.pageYOffset
5. El último es el desplazamiento de página, use window.scroll (x, y)

  //1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannerTop = banner.offsetTop
            // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function() {
    
    
                // console.log(11);
                // window.pageYOffset 页面被卷去的头部
                // console.log(window.pageYOffset);
                // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
                if (window.pageYOffset >= bannerTop) {
    
    
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = sliderbarTop + 'px';
                } else {
    
    
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = '300px';
                }
                // 4. 当我们页面滚动到main盒子，就显示 goback模块
                if (window.pageYOffset >= mainTop) {
    
    
                    goBack.style.display = 'block';
                } else {
    
    
                    goBack.style.display = 'none';
                }

            })
            // 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
        goBack.addEventListener('click', function() {
    
    
            // 里面的x和y 不跟单位的 直接写数字即可
            // window.scroll(0, 0);
            // 因为是窗口滚动 所以对象是window
            animate(window, 0);
        });

1.2.4. Caso: Caso de nube tendinosa

1. Utilice funciones de animación para efectos de animación
2. La posición inicial de la nube de salto mortal original era 0
3. Mueva el mouse sobre un li pequeño y use la posición offsetLeft del li pequeño actual como valor objetivo
4. Cuando el mouse deja una pequeña li, el valor objetivo se establece en 0
5. Si hace clic en un li pequeño, la posición actual de li se almacenará como la posición inicial de la nube de salto mortal

 window.addEventListener('load', function() {
    
    
            // 1. 获取元素
            var cloud = document.querySelector('.cloud');
            var c_nav = document.querySelector('.c-nav');
            var lis = c_nav.querySelectorAll('li');
            // 2. 给所有的小li绑定事件 
            // 这个current 做为筋斗云的起始位置
            var current = 0;
            for (var i = 0; i < lis.length; i++) {
    
    
                // (1) 鼠标经过把当前小li 的位置做为目标值
                lis[i].addEventListener('mouseenter', function() {
    
    
                    animate(cloud, this.offsetLeft);
                });
                // (2) 鼠标离开就回到起始的位置 
                lis[i].addEventListener('mouseleave', function() {
    
    
                    animate(cloud, current);
                });
                // (3) 当我们鼠标点击，就把当前位置做为目标值
                lis[i].addEventListener('click', function() {
    
    
                    current = this.offsetLeft;
                });
            }
        })

1.3. Eventos de la pantalla táctil

1.3.1. Descripción general de los eventos de la pantalla táctil

La compatibilidad del navegador móvil es mejor. No necesitamos considerar los problemas de compatibilidad con JS anteriores. Podemos usar el efecto de escritura JS nativo con confianza, pero el terminal móvil también tiene su propio lugar único. Por ejemplo, toque de evento táctil (también llamado evento táctil), tanto en Android como en IOS.

El objeto táctil representa un punto de contacto. El punto táctil puede ser un dedo o un lápiz táctil. Los eventos de la pantalla táctil pueden responder al dedo (o lápiz) del usuario que opera en la pantalla o el panel táctil.

Los eventos comunes de la pantalla táctil son los siguientes:

1.3.2. Objeto de evento táctil (TouchEvent)

TouchEvent es un tipo de evento que describe el cambio de estado del dedo en el plano táctil (pantalla táctil, panel táctil, etc.). Este tipo de evento se utiliza para describir uno o más contactos, lo que permite a los desarrolladores detectar el movimiento de contactos, el aumento y la disminución de contactos, etc.

Los tres eventos de touchstart, touchmove y touchend tendrán cada uno objetos de evento.

Concéntrese en los objetos de eventos táctiles. Veamos una lista de tres objetos comunes:

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

1.3.3. Caso: Arrastra un elemento en el terminal móvil

1. touchstart, touchmove, touch y puede realizar elementos de arrastre

2. Pero arrastrar el elemento requiere las coordenadas del dedo actual. Podemos usar pageX y pageY en targetTouches [0]

3. El principio de arrastrar en el terminal móvil: cuando el dedo se mueve, calcule la distancia que se ha movido el dedo. Luego use la posición original de la caja + la distancia movida por el dedo

4. La distancia que se mueve el dedo: la posición del dedo deslizándose menos la posición donde el dedo acaba de comenzar a tocarse

   Tres pasos para arrastrar elementos:

   (1) Touchstart del elemento táctil: obtenga las coordenadas iniciales del dedo y la posición original del cuadro al mismo tiempo

   (2) Mueva el dedo touchmove: Calcule la distancia de deslizamiento del dedo y mueva el cuadro

   (3) Deje que el dedo toque y:

   注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();