关于前端:FLIP动画让元素动起来

5次阅读

共计 1699 个字符，预计需要花费 5 分钟才能阅读完成。

什么是 FLIP 动画技术？FLIP 其实是一种 思路 , 一种 方法论, 并不是具体指代某个技术.
FLIP, 具体意义如下：

F first 加入过渡元素的初始状态
L last 元素的终止状态
I invert flip 的外围, 通过 first 和 last 计算，而后翻转这个过程
P play 启用 tansition, 移除你 invert 的扭转，这时候动画会按预期实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .row span {
      padding: 0 5px;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="row" id="row">

  </div>

  <button onclick="randomFLIP()"> 点击打乱 </button>
</body>
<script>
  const render = (arr) => {document.getElementById('row').innerHTML = arr.map(v => `<span id="k${v}">${v}</span>`).join('')
  }
  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
  render(arr)

  // 随机打乱
  function shuffle(arr) {for (var i = arr.length - 1; i >= 0; i--) {var randomIndex = Math.floor(Math.random() * (i + 1));
      var itemAtIndex = arr[randomIndex];
      arr[randomIndex] = arr[i];
      arr[i] = itemAtIndex;
    }
    return arr;
  }

  // FLIP 动画函数
  function randomFLIP() {const randomArr = shuffle(arr)
    // First
    const firstRect = (() => {const result = {}
      arr.map(v => {result[`k${v}`] = document.getElementById(`k${v}`).getBoundingClientRect()})
      return result
    })()

    render(randomArr)

    // Last
    const lastRect = (() => {const result = {}
      randomArr.map(v => {result[`k${v}`] = document.getElementById(`k${v}`).getBoundingClientRect()})
      return result
    })()

    // invert

    arr.forEach(v => {const first = firstRect[`k${v}`]
      const last = lastRect[`k${v}`]
      const deltaX = first.left - last.left;
      const deltaY = first.top - last.top;

      document.getElementById(`k${v}`).style = `transform: translate(${deltaX}px, ${deltaY}px);`
      requestAnimationFrame(function () {
        // Play 去掉 translate, 加上动画
        document.getElementById(`k${v}`).style = 'transition: all 1s'
        document.getElementById(`k${v}`).style.transform = ''
      })
    })
  }
</script>

</html>

http://jsrun.net/ZIVKp

正文完