第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

手撕紅黑樹 · 更新于 2020-11-11

1. 適合用幀動畫的場景

有時候想要的動畫并不是縮小、放大或者變個顏色之類的這么簡單，比如我們需要一個復雜的形變加上復雜的運動軌跡，此時過渡動畫就有些相形見絀了。雖然 Canvas 或 SVG 能夠?qū)崿F(xiàn)復雜邏輯的動畫效果，但是畢竟不是人人都會這種技術(shù)。而且有時候開發(fā)時間有限，沒有時間用代碼來繪制一個炫酷動畫，所以這個時候幀動畫，配上雪碧圖就是最完美的選擇。

我們用一張條形雪碧圖來試一下：

圖片描述

2. 過渡動畫

首先使用過渡動畫看看會是什么效果：

實例演示
預(yù)覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除默認樣式 */
    * { padding: 0; margin: 0; }
    
    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .animate {
      width: 216.6px;
      height: 300px;

      /* 指定背景圖 */
      background: url(http://img.mukewang.com/wiki/5ed9b321092b587026000300.jpg);
      
      /* 使用預(yù)先定義好的動畫 */
      animation: change-position 3s linear both;
    }

    /* 定義動畫 */
    @keyframes change-position {
      from { background-position: 0 }
      to { background-position: -2600px }
    }
  </style>
</head>
<body>
  <div class="animate"></div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

圖片描述

過渡動畫確實是好，但是在這種情況下真的不適合用它。

3. 幀動畫

我們需要的是一張圖片一張圖片的去顯示，也就是一幀代表一張圖片，我們換成幀動畫再來試一下：

實例演示
預(yù)覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除默認樣式 */
    * { padding: 0; margin: 0; }
    
    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .animate {
      width: 216.6px;
      height: 300px;

      /* 指定背景圖 */
      background: url(http://img.mukewang.com/wiki/5ed9b321092b587026000300.jpg);
      
      /* 使用預(yù)先定義好的動畫 */
      animation: change-position .8s steps(12) infinite;
    }

    /* 定義動畫 */
    @keyframes change-position {
      from { background-position: 0 }
      to { background-position: -2600px }
    }
  </style>
</head>
<body>
  <div class="animate"></div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

圖片描述

這次看起來是不是就是我們想要的結(jié)果了呢。幀動畫有些類似于我們小時候翻書，翻書翻得快了里面的圖案似乎就動起來了：

圖片描述

所以設(shè)置一個合理的翻書時間是很有必要的，翻書時間太長就代表翻的慢了，圖像就不會那么的連貫。

4. 小結(jié)

如果點燃一根香煙，然后拿著它快速的在眼前轉(zhuǎn)個圈，你會驚奇的發(fā)現(xiàn)好像出現(xiàn)了一個圓形的火圈，這就是視覺暫留現(xiàn)象。

用一個專業(yè)點的說法就是：

人眼在觀察景物時，光信號傳入大腦神經(jīng)，需經(jīng)過一段短暫的時間，光的作用結(jié)束后，視覺形象并不立即消失，這種殘留的視覺稱"后像"，視覺的這一現(xiàn)象則被稱為"視覺暫留"。

平時去電影院看的電影就是利用了這一原理，膠片快速的切換，在人眼里就好像圖案在動。

甚至電子屏幕也是這個原理，玩吃雞游戲的時候刷新率越高的屏幕顯示就越順暢，理解了這些你就理解了幀動畫的原理。

圖片描述