Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung von js+transition zur Realisierung von Animationen und zur Realisierung mobiler Web-Karusselldiagramme

Detaillierte Erläuterung von js+transition zur Realisierung von Animationen und zur Realisierung mobiler Web-Karusselldiagramme

巴扎黑
巴扎黑Original
2017-09-11 09:24:461478Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung reiner js + Übergangsanimationen zur Realisierung eines mobilen Webkarussells vor darauf verweisen kann, werfen wir einen Blick unten.

Vorwort

Im vorherigen Artikel haben wir den Tween-Algorithmus verwendet, um den Ease-Out-Bewegungseffekt zu erzielen Zur Verwendung der Übergangsanimation von CSS3 gibt es nicht viel zu sagen. Werfen wir einen Blick auf die ausführliche Einführung.

Kernpunkte:

Wenn wir uns über eine bestimmte Distanz durch den Code bewegen, verwenden wir keine Übergangsanimation Verwenden Sie eine Übergangsanimation.

Der JS-Code des Karusselldiagramms, das einen Übergang verwendet, um einen Animationseffekt zu erzielen, beträgt weniger als 100 Zeilen


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

Hinweis:

Beim Wechsel zum Grenzwertdiagramm sollten Sie warten, bis die Animation wechseln Nach dem Effekt wechseln Sie zur Position desselben Bildinhalts

Also: Wir verwenden setTimeout, um den Vorgang der Endlosschleifenwiedergabe der ersetzten Bildposition zu verzögern

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von js+transition zur Realisierung von Animationen und zur Realisierung mobiler Web-Karusselldiagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn