Explication détaillée de js+transition pour réaliser une animation et réaliser un graphique carrousel Web mobile

Cet article vous présente principalement les informations pertinentes sur l'utilisation de l'animation de transition pure js + pour réaliser un carrousel Web mobile. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. peut s'y référer, jetons un coup d'œil ci-dessous.

Préface

Dans l'article précédent, nous avons utilisé l'algorithme d'interpolation pour obtenir l'effet de mouvement d'accélération. En fait, un effet plus concis. La méthode est Il n'y a pas grand chose à dire sur l'utilisation de l'animation de transition de CSS3. Jetons un coup d'œil à l'introduction détaillée.

Points essentiels :

Lorsque nous parcourons une certaine distance à travers le code, utilisez l'animation de transition lorsque le doigt bouge ; utilisez l'animation de transition.

Le code js du graphique carrousel utilisant la transition pour obtenir un effet d'animation est inférieur à 100 lignes

~function () { 
  var lastPX = 0; // 上一次触摸的位置x坐标, 需要计算出手指每次移动的一点点距离 
  var movex = 0; // 记录手指move的x方向值 
  var imgWrap = document.getElementById('imgWrap'); 
  var startX = 0; // 开始触摸时手指所在x坐标 
  var endX = 0; // 触摸结束时手指所在的x坐标位置 
  var imgSize = imgWrap.children.length - 2; // 图片个数 
  var t1 = 0; // 记录开始触摸的时刻 
  var t2 = 0; // 记录结束触摸的时刻 
  var width = window.innerWidth; // 当前窗口宽度 
  var nodeList = document.querySelectorAll('#imgWrap img'); // 所有轮播图节点数组 NodeList 
 
  // 给图片设置合适的left值, 注意 querySelectorAll返回 NodeList, 具有 forEach方法 
  nodeList.forEach(function (node, index) { 
   node.style.left = (index - 1) * width + 'px'; 
  }); 
 
  /** 
   * 移动图片到当前的 tIndex索引所在位置 
   * @param {number} tIndex 要显示的图片的索引 
   * */ 
  function toIndex(tIndex) { 
   var dis = -(tIndex * width); 
   // 动画移动 
   imgWrap.style.transform = 'translate3d(' + dis + 'px, 0, 0)'; 
   imgWrap.style.transition = 'transform .2s ease-out'; 
   movex = dis; 
   // 索引到最后一张图片, 迅速切换索引到同一张图的初始位置 
   setTimeout(function () { 
    if (tIndex === imgSize) { 
     imgWrap.style.transform = 'translate3d(0, 0, 0)'; 
     imgWrap.style.transition = 'none'; 
     movex = 0; 
    } 
    if (tIndex === -1) { 
     imgWrap.style.transform = 'translate3d(' + width * (1 - imgSize) + 'px, 0, 0)'; 
     imgWrap.style.transition = 'none'; 
     movex = -width * (imgSize - 1); 
    } 
   }, 200); 
 
  } 
 
  /** 
   * 处理各种触摸事件 ,包括 touchstart, touchend, touchmove, touchcancel 
   * @param {Event} evt 回调函数中系统传回的 js 事件对象 
   * */ 
  function touch(evt) { 
   var touch = evt.targetTouches[0]; 
   var tar = evt.target; 
   var index = parseInt(tar.getAttribute('data-index')); 
   if (evt.type === 'touchmove') { 
    var di = parseInt(touch.pageX - lastPX); 
    endX = touch.pageX; 
    movex += di; 
    imgWrap.style.webkitTransform = 'translate3d(' + movex + 'px, 0, 0)'; 
    imgWrap.style.transition = 'none'; // 移动时避免动画延迟 
    lastPX = touch.pageX; 
   } 
   if (evt.type === 'touchend') { 
    var minus = endX - startX; 
    t2 = new Date().getTime() - t1; 
    if (Math.abs(minus) > 0) { // 有拖动操作 
     if (Math.abs(minus) < width * 0.4 && t2 > 500) { // 拖动距离不够,返回! 
      toIndex(index); 
     } else { // 超过一半,看方向 
      console.log(minus); 
      if (Math.abs(minus) < 20) { 
       console.log(&#39;距离很短&#39; + minus); 
       toIndex(index); 
       return; 
      } 
      if (minus < 0) { // endX < startX,向左滑动,是下一张 
       toIndex(index + 1) 
      } else { // endX > startX ,向右滑动, 是上一张 
       toIndex(index - 1) 
      } 
     } 
    } else { //没有拖动操作 
 
    } 
   } 
   if (evt.type === &#39;touchstart&#39;) { 
    lastPX = touch.pageX; 
    startX = lastPX; 
    endX = startX; 
    t1 = new Date().getTime(); 
   } 
   return false; 
  } 
 
  imgWrap.addEventListener(&#39;touchstart&#39;, touch, false); 
  imgWrap.addEventListener(&#39;touchmove&#39;, touch, false); 
  imgWrap.addEventListener(&#39;touchend&#39;, touch, false); 
  imgWrap.addEventListener(&#39;touchcancel&#39;, touch, false); 
 
 }();

Remarque :

Lorsque vous passez au graphique des valeurs limites, vous devez attendre que le commutation d'animation Après l'effet, passez à la position du même contenu de l'image

Donc : nous utilisons setTimeout pour retarder l'opération de lecture en boucle infinie de la position de l'image remplacée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!