アニメーションを実現しモバイルWebカルーセルチャートを実現するjs+transitionを詳しく解説

この記事では、純粋な JS + トランジション アニメーションを使用してモバイル Web カルーセルを実現するための関連情報を、サンプル コードを通じて詳細に紹介します。これは、あらゆる人の学習や仕事に必要です。それを参照してください。以下を見てみましょう。

前書き

前回の記事では、イーズアウト動作効果を実現するためにトゥイーンアルゴリズムを使用しましたが、実際には、より簡潔な方法は CSS3 のトランジションアニメーションを使用することです。以下で、詳細な紹介を見てみましょう。

コアポイント:

コード内で一定の距離を移動する場合はトランジションアニメーションを使用しますが、指が動く場合はトランジションアニメーションを使用しません。

アニメーション効果はトランジションを使用して実現されます。カルーセル画像の JS コードは 100 行未満です

~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); 
 
 }();

注:

境界値画像に切り替えるときは、アニメーション効果が切り替わるまで待ってから切り替える必要があります。同じ画像コンテンツの位置

つまり、setTimeoutを使用して、無限ループ再生と画像の位置の置換の操作を遅延させます

以上がアニメーションを実現しモバイルWebカルーセルチャートを実現するjs+transitionを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。