CSS3幀動畫

Nino 發布于2019-08-30 15:53 / 1477人閱讀

摘要：在制作幀動畫的時候，一般采用雪碧圖的方式，通過切換圖片的位置，使其連續播放，從而形成動畫。使用改造之后的代碼，利用偽類進行背景填充，然后控制該元素移動來實現逐幀動畫。

在制作幀動畫的時候，一般采用雪碧圖的方式，通過切換圖片的位置，使其連續播放，從而形成動畫。

雪碧圖

雪碧圖的制作可以使用compass制作，還可以使用一些小工具進行制作，提供一個在線制作雪碧圖的網站。
CSS Sprites Generator

逐幀動畫

我們可以使用css3的keyframes的方式進行逐幀動畫

.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沒有設置steps(1,start/end)，動畫幀之間將采用默認的過渡方式，此時觀察到的動畫會變成滑動的方式，這不是我們想要的效果。
為此，我們需要使用steps函數。

steps

steps(number_of_steps, direction)

steps timing function接受兩個參數，steps(n,start/end)，其中n為正整數，表示分為幾步執行完，后一個參數是可選的，默認為end。

start表示的是一個左連續函數，在每個間隔的起點就發生階躍變化，直到該間隔時間結束

end表示的是一個右連續函數，在每個間隔的終點才發生階躍變化

關于steps()更多的資料可以查看 How to Use steps() in CSS Animations
對于人物走動的動畫，由于是一個不斷循環的過程，所以設置為start或者end都是可行的。

background-position與translate3d方式的比較

background-position會引起重繪，而translate3d不會。（對于會引起回流和重繪的屬性可以查看這個網站 csstriggers，關于這個網站的介紹可以查看這個回答）
同時translate3d會開啟GPU渲染加速，性能更好。
綜上所述，translate3d方式較為優越。

使用translate3d改造之后的代碼，利用after偽類進行背景填充，然后控制該元素移動來實現逐幀動畫。

.sprite{
    overflow:hidden;//設置超出隱藏
    height:78px;
    width:28px;
}
.sprite:after{
    content:""; //加上content，內容才會顯示
    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)}
}

云服務器 GPU云服務器 css3動畫高性能css3動畫 css3 css3氣泡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116786.html

CSS3動畫之逐幀動畫

摘要：什么是逐幀動畫要了解逐幀動畫，首先要明確什么是逐幀動畫。簡而言之，實現逐幀動畫需要兩個條件相關聯的不同圖像，即動畫幀連續播放。因此在觸屏頁面中逐幀動畫使用廣泛，下文將對其進行詳細介紹。因此，逐幀動畫也被稱為精靈動畫。什么是逐幀動畫要了解 CSS3 逐幀動畫，首先要明確什么是逐幀動畫。看一下維基百科中的定義：定格動畫，又名逐幀動畫，是一種動畫技術，其原理即將每幀不同的圖像連續播放，...

RancherLabs 2019-08-30 15:43 評論0 收藏0
css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。一、 CSS3變形（transform）語法： transform ： no...

waruqi 2019-08-30 10:51 評論0 收藏0
css3 動畫（三）animation 簡介

摘要：默認，只執行一次動畫動畫名稱，該名稱為動畫關鍵幀的名稱。默認如何理解表示的是關鍵幀的名稱，那么如何定義關鍵幀呢使用。語法名稱關鍵幀樣式或總結其實也并不復雜，其有個子屬性。下一篇動畫三源碼解析通過閱讀動畫庫的源碼，來提高對中屬性的認識前言上一篇中，總結了一下 transition 以及 cubic-bezier()。本篇中，將介紹 css3 動畫中的更為靈活的動畫屬性：animati...

itvincent 2019-08-29 16:05 評論0 收藏0
入門css3動畫

摘要：入門動畫為了讓頁面體驗更為流暢，我們在更多的時候都會采用一些動畫給頁面流程增加一些耦合性動畫分為兩類過渡動畫從一個狀態變為另一個狀態一個寬高都為，鼠標移上后變為寬高各這時候我們就可以用到過渡動畫關鍵幀動畫一個動畫定義多個關鍵幀，實現更為復雜入門css3動畫為了讓頁面體驗更為流暢，我們在更多的時候都會采用一些動畫給頁面流程增加一些耦合性 css3動畫分為兩類 1. 過渡動畫trans...

BDEEFE 2019-08-30 15:43 評論0 收藏0