逐格動畫製作方式
1. 準備連續動作需要的圖片( 這次的範例只用到以下三張 )
記得每一張的寬高都要一模一樣喔!
2. 由左至右,不重疊的情況下排列成一張圖 ( sprite sheet )
這次因為想讓眼睛張開的時間停留比較久一點,所以有在頭尾有重複多放幾張。
3. 寫 html & css
可以直接參考底下的範例。
上面是只播放一次,底下是無限循環的版本。
比較需要注意的值是 .ani_bambiWatching 的寬高必須跟你單張圖片的寬高一樣,
thinking-infinite 100% 的 background-position 第一個值必須是步驟 2 圖的寬 *(-1),
以我的範例來講:
因為我的 sprite sheet 是 894px * 110px,
background-position 的第一個值就是 894 * (-1) = -894px