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

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

1. 適合用幀動(dòng)畫的場景

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

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

圖片描述

2. 過渡動(dòng)畫

首先使用過渡動(dòng)畫看看會(huì)是什么效果：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除默認(rèn)樣式 */
    * { padding: 0; margin: 0; }
    
    /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無視 */
    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ù)先定義好的動(dòng)畫 */
      animation: change-position 3s linear both;
    }

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

運(yùn)行結(jié)果：

圖片描述

過渡動(dòng)畫確實(shí)是好，但是在這種情況下真的不適合用它。

3. 幀動(dòng)畫

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

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除默認(rèn)樣式 */
    * { padding: 0; margin: 0; }
    
    /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無視 */
    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ù)先定義好的動(dòng)畫 */
      animation: change-position .8s steps(12) infinite;
    }

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

運(yùn)行結(jié)果：

圖片描述

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

圖片描述

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

4. 小結(jié)

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

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

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

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

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

圖片描述