資訊專欄INFORMATION COLUMN
摘要：在制作幀動畫的時候，一般采用雪碧圖的方式，通過切換圖片的位置，使其連續(xù)播放，從而形成動畫。使用改造之后的代碼，利用偽類進(jìn)行背景填充，然后控制該元素移動來實現(xiàn)逐幀動畫。
在制作幀動畫的時候，一般采用雪碧圖的方式，通過切換圖片的位置，使其連續(xù)播放，從而形成動畫。
雪碧圖雪碧圖的制作可以使用compass制作，還可以使用一些小工具進(jìn)行制作，提供一個在線制作雪碧圖的網(wǎng)站。
CSS Sprites Generator
我們可以使用css3的keyframes的方式進(jìn)行逐幀動畫
.sprite{
height:78px;
width:28px;
background:url(images/people.png) no-repeat;
background-size:112px 78px;
animation:people .5s steps(1, start) infinite;
}
@keyframes people{
0%{background-position: 0 0 }
25%{ background-position:-28px 0;}
75%{ background-position: -56px 0 }
100%{ background-position:-84px 0;}
}
如果animation沒有設(shè)置steps(1,start/end)，動畫幀之間將采用默認(rèn)的過渡方式，此時觀察到的動畫會變成滑動的方式，這不是我們想要的效果。
為此，我們需要使用steps函數(shù)。
steps(number_of_steps, direction)
steps timing function接受兩個參數(shù)，steps(n,start/end)，其中n為正整數(shù)，表示分為幾步執(zhí)行完，后一個參數(shù)是可選的，默認(rèn)為end。
start表示的是一個左連續(xù)函數(shù)，在每個間隔的起點就發(fā)生階躍變化，直到該間隔時間結(jié)束
end表示的是一個右連續(xù)函數(shù)，在每個間隔的終點才發(fā)生階躍變化
關(guān)于steps()更多的資料可以查看 How to Use steps() in CSS Animations
對于人物走動的動畫，由于是一個不斷循環(huán)的過程，所以設(shè)置為start或者end都是可行的。
background-position會引起重繪，而translate3d不會。（對于會引起回流和重繪的屬性可以查看這個網(wǎng)站 csstriggers，關(guān)于這個網(wǎng)站的介紹可以查看 這個回答）
同時translate3d會開啟GPU渲染加速，性能更好。
綜上所述，translate3d方式較為優(yōu)越。
使用translate3d改造之后的代碼，利用after偽類進(jìn)行背景填充，然后控制該元素移動來實現(xiàn)逐幀動畫。
.sprite{
overflow:hidden;//設(shè)置超出隱藏
height:78px;
width:28px;
}
.sprite:after{
content:""; //加上content，內(nèi)容才會顯示
display:block;
width:112px ;
height:78px;
background:url(images/people.png) no-repeat;
background-size:112px 78px;
animation:people .5s steps(1, start) infinite;
}
@keyframes people{
0%{transform: translate3d(0,0,0)}
25%{transform: translate3d(-28px,0,0)}
75%{transform: translate3d(-56px,0,0)}
100%{transform: translate3d(-84px,0,0)}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116786.html
摘要：什么是逐幀動畫要了解逐幀動畫，首先要明確什么是逐幀動畫。簡而言之，實現(xiàn)逐幀動畫需要兩個條件相關(guān)聯(lián)的不同圖像，即動畫幀連續(xù)播放。因此在觸屏頁面中逐幀動畫使用廣泛，下文將對其進(jìn)行詳細(xì)介紹。因此，逐幀動畫也被稱為精靈動畫。 什么是逐幀動畫要了解 CSS3 逐幀動畫，首先要明確什么是逐幀動畫。 看一下維基百科中的定義： 定格動畫，又名逐幀動畫，是一種動畫技術(shù)，其原理即將每幀不同的圖像連續(xù)播放，...
摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認(rèn)值為，為時，表示變化是瞬時的，看不到過渡效果。實現(xiàn)動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調(diào)用關(guān)鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。 一、 CSS3變形（transform） 語法： transform ： no...
摘要：默認(rèn)，只執(zhí)行一次動畫動畫名稱，該名稱為動畫關(guān)鍵幀的名稱。默認(rèn)如何理解表示的是關(guān)鍵幀的名稱，那么如何定義關(guān)鍵幀呢使用。語法名稱關(guān)鍵幀樣式或總結(jié)其實也并不復(fù)雜，其有個子屬性。下一篇動畫三源碼解析通過閱讀動畫庫的源碼，來提高對中屬性的認(rèn)識 前言 上一篇中，總結(jié)了一下 transition 以及 cubic-bezier()。本篇中，將介紹 css3 動畫中的更為靈活的動畫屬性：animati...
閱讀 2230·2021-09-07 10:14
閱讀 1579·2019-08-30 15:53
閱讀 2345·2019-08-30 12:43
閱讀 2965·2019-08-29 16:37
閱讀 821·2019-08-26 13:29
閱讀 2085·2019-08-26 13:28
閱讀 527·2019-08-23 18:33
閱讀 3673·2019-08-23 16:09
