深刻理解CSS3 Animation 幀動畫

時間  2019-11-30
標籤 深刻 理解 css3 css animation 動畫 欄目 CSS 简体版
原文   原文鏈接

CSS3我在5年以前就有用了，包括公司項目都一直在很前沿的技術。css

最近在寫慕課網的七夕主題，用了大量的CSS3動畫，可是真的沉澱下來仔細的去深刻CSS3動畫的各個屬性發現仍是很深的，這裏就寫下關於幀動畫steps屬性的理解html

咱們知道CSS3的Animation有八個屬性css3

  1. animation-name
  2. animation-duration
  3. animation-delay
  4. animation-iteration-count
  5. animation-direction
  6. animation-play-state
  7. animation-fill-mode
  8. animation-timing-function

其中1-7大多都有介紹，可是animation-timing-function是控制時間的屬性web

在取值中除了經常使用到的 三次貝塞爾曲線 之外，還有個讓人比較困惑的 steps() 函數函數

animation默認以ease方式過渡，它會在每一個關鍵幀之間插入補間動畫，因此動畫效果是連貫性的測試

除了ease，linear、cubic-bezier之類的過渡函數都會爲其插入補間。但有些效果不須要補間，只須要關鍵幀之間的跳躍，這時應該使用steps過渡方式動畫

 

animation-timing-function 規定動畫的速度曲線網站

image

以上w3school網站上給的使用方法，可是漏掉一個很重要的 stepsspa

簡單的來講，咱們一直使用animation基本都是實現線性漸變的動畫3d

如

  • 位置在固定的時間從起點到終點
  • 尺寸在固定的時間線性變化
  • 顏色的線性改變等等

看效果 線性動畫

截取CSS以下

複製代碼
複製代碼 
.test1 {
    width: 90px;
    height: 60px;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite; /*無限循環*/
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}
複製代碼
複製代碼

timing-function:linear 定義的是一個勻速變化的動畫，就是在2秒內，從紅色過分到藍色到黃色，是一個很線性的顏色變化

若是要實現幀動畫效果而不是線性的變化就須要引入step這個值了，換句話就是沒有過渡的效果，而是一幀幀的變化

一樣能夠看測試 幀動畫

 

理解steps

steps 函數指定了一個階躍函數

第一個參數指定了時間函數中的間隔數量（必須是正整數）

第二個參數可選，接受 start 和 end 兩個值，指定在每一個間隔的起點或是終點發生階躍變化，默認爲 end。

step-start等同於steps(1,start)，動畫分紅1步，動畫執行時爲開始左側端點的部分爲開始；

step-end等同於steps(1,end)：動畫分紅一步，動畫執行時以結尾端點爲開始，默認值爲end。

看看W3C的規範 transition-timing-function

 

steps第一個參數的錯誤的理解：

steps(5，start)

steps() 第一個參數 number 爲指定的間隔數，即把動畫分爲 n 步階段性展現，估計大多數人理解就是keyframes寫的變化次數

例如:

複製代碼
複製代碼 
@-webkit-keyframes circle {
        0% {}
        25%{}
        50%{}
        75%{}
        100%{}
 }
複製代碼
複製代碼

我以前也一直認爲steps(5，start）中的5 就是指的keyframes中的0% 25% 50% 75% 100% 分紅5個間隔等分

爲何會出現這種理解錯誤，咱們看一個例子

keyframes的關鍵幀是隻有2個規則的時候，假如咱們有一張400px長度的雪碧圖

@-webkit-keyframes circle {
        0% {}
        100%{
 }background-position-x:0;background-position-x: -400px;}

此刻設置steps(5，start）那麼會發現5張圖會出現幀動畫的效果，由於steps中的5把 0% – 100%的規則，內部分紅5個等分

實際內部會執行這樣一個關鍵幀效果

複製代碼
複製代碼 
@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        25% {background-position-x: -100px;}
        50% {background-position-x:-200px;}
        75%{background-position-x: -300px;}
        100%{background-position-x: -400px;}
 }
複製代碼
複製代碼

將這個規則稍微修改下，加入一個50%的狀態

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        50% {background-position-x: -200px;}
        100%{background-position-x: -400px;}
 }

那麼一樣用steps(5，start）效果就會亂套

此刻你會很迷惑，因此關鍵要理解第一個參數的針對點，首先引入一個核心點：

timing-function 做用於每兩個關鍵幀之間，而不是整個動畫

那麼第一個參數很好理解了，steps的設置都是針對兩個關鍵幀之間的，而非是整個keyframes，因此第一個參數對 - 次數對應了每次steps的變化

換句話說也是 0-25 之間變化5次，  25-50之間 變化5次 ，50-75 之間變化5次，以此類推

 

第二個參數可選，接受 start 和 end 兩個值，指定在每一個間隔的起點或是終點發生階躍變化，默認爲 end

經過案例看下 step-start，step-end 的區別

@-webkit-keyframes circle {
        0% {background: red}
        50%{background: yellow}
        100% {background: blue}
    }

step-start ： 黃色與藍色相互切換

step-end  ： 紅色與黃色相互切換

2個參數都會選擇性的跳過先後部分，start跳過0%，end跳過100%

step-start在變化過程當中，都是如下一幀的顯示效果來填充間隔動畫，因此0% 到 50%  直接就顯示了黃色yellow

step-end與上面相反，都是以上一幀的顯示效果來填充間隔動畫，因此0% 到 50% 直接就顯示了紅色red

引用w3c的一張step的工做機制圖

總結：

steps函數，它能夠傳入兩個參數，第一個是一個大於0的整數，他是將間隔動畫等分紅指定數目的小間隔動畫，而後根據第二個參數來決定顯示效果。

第二個參數設置後其實和step-start，step-end同義，在分紅的小間隔動畫中判斷顯示效果。能夠看出：steps(1, start) 等於step-start，steps(1,end)等於step-end

最核心的一點就是：timing-function 做用於每兩個關鍵幀之間，而不是整個動畫

http://designmodo.com/steps-css-animations/

CSS3我在5年以前就有用了，包括公司項目都一直在很前沿的技術。

最近在寫慕課網的七夕主題，用了大量的CSS3動畫，可是真的沉澱下來仔細的去深刻CSS3動畫的各個屬性發現仍是很深的，這裏就寫下關於幀動畫steps屬性的理解

咱們知道CSS3的Animation有八個屬性

  1. animation-name
  2. animation-duration
  3. animation-delay
  4. animation-iteration-count
  5. animation-direction
  6. animation-play-state
  7. animation-fill-mode
  8. animation-timing-function

其中1-7大多都有介紹，可是animation-timing-function是控制時間的屬性

在取值中除了經常使用到的 三次貝塞爾曲線 之外，還有個讓人比較困惑的 steps() 函數

animation默認以ease方式過渡，它會在每一個關鍵幀之間插入補間動畫，因此動畫效果是連貫性的

除了ease，linear、cubic-bezier之類的過渡函數都會爲其插入補間。但有些效果不須要補間，只須要關鍵幀之間的跳躍，這時應該使用steps過渡方式

 

animation-timing-function 規定動畫的速度曲線

image

以上w3school網站上給的使用方法，可是漏掉一個很重要的 steps

簡單的來講，咱們一直使用animation基本都是實現線性漸變的動畫

如

  • 位置在固定的時間從起點到終點
  • 尺寸在固定的時間線性變化
  • 顏色的線性改變等等

看效果 線性動畫

截取CSS以下

複製代碼
複製代碼 
.test1 {
    width: 90px;
    height: 60px;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite; /*無限循環*/
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}
複製代碼
複製代碼

timing-function:linear 定義的是一個勻速變化的動畫，就是在2秒內，從紅色過分到藍色到黃色，是一個很線性的顏色變化

若是要實現幀動畫效果而不是線性的變化就須要引入step這個值了，換句話就是沒有過渡的效果，而是一幀幀的變化

一樣能夠看測試 幀動畫

 

理解steps

steps 函數指定了一個階躍函數

第一個參數指定了時間函數中的間隔數量（必須是正整數）

第二個參數可選，接受 start 和 end 兩個值，指定在每一個間隔的起點或是終點發生階躍變化，默認爲 end。

step-start等同於steps(1,start)，動畫分紅1步，動畫執行時爲開始左側端點的部分爲開始；

step-end等同於steps(1,end)：動畫分紅一步，動畫執行時以結尾端點爲開始，默認值爲end。

看看W3C的規範 transition-timing-function

 

steps第一個參數的錯誤的理解：

steps(5，start)

steps() 第一個參數 number 爲指定的間隔數，即把動畫分爲 n 步階段性展現，估計大多數人理解就是keyframes寫的變化次數

例如:

複製代碼
複製代碼 
@-webkit-keyframes circle {
        0% {}
        25%{}
        50%{}
        75%{}
        100%{}
 }
複製代碼
複製代碼

我以前也一直認爲steps(5，start）中的5 就是指的keyframes中的0% 25% 50% 75% 100% 分紅5個間隔等分

爲何會出現這種理解錯誤，咱們看一個例子

keyframes的關鍵幀是隻有2個規則的時候，假如咱們有一張400px長度的雪碧圖

@-webkit-keyframes circle {
        0% {}
        100%{
 }background-position-x:0;background-position-x: -400px;}

此刻設置steps(5，start）那麼會發現5張圖會出現幀動畫的效果，由於steps中的5把 0% – 100%的規則，內部分紅5個等分

實際內部會執行這樣一個關鍵幀效果

複製代碼
複製代碼 
@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        25% {background-position-x: -100px;}
        50% {background-position-x:-200px;}
        75%{background-position-x: -300px;}
        100%{background-position-x: -400px;}
 }
複製代碼
複製代碼

將這個規則稍微修改下，加入一個50%的狀態

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        50% {background-position-x: -200px;}
        100%{background-position-x: -400px;}
 }

那麼一樣用steps(5，start）效果就會亂套

此刻你會很迷惑，因此關鍵要理解第一個參數的針對點，首先引入一個核心點：

timing-function 做用於每兩個關鍵幀之間，而不是整個動畫

那麼第一個參數很好理解了，steps的設置都是針對兩個關鍵幀之間的，而非是整個keyframes，因此第一個參數對 - 次數對應了每次steps的變化

換句話說也是 0-25 之間變化5次，  25-50之間 變化5次 ，50-75 之間變化5次，以此類推

 

第二個參數可選，接受 start 和 end 兩個值，指定在每一個間隔的起點或是終點發生階躍變化，默認爲 end

經過案例看下 step-start，step-end 的區別

@-webkit-keyframes circle {
        0% {background: red}
        50%{background: yellow}
        100% {background: blue}
    }

step-start ： 黃色與藍色相互切換

step-end  ： 紅色與黃色相互切換

2個參數都會選擇性的跳過先後部分，start跳過0%，end跳過100%

step-start在變化過程當中，都是如下一幀的顯示效果來填充間隔動畫，因此0% 到 50%  直接就顯示了黃色yellow

step-end與上面相反，都是以上一幀的顯示效果來填充間隔動畫，因此0% 到 50% 直接就顯示了紅色red

引用w3c的一張step的工做機制圖

總結：

steps函數，它能夠傳入兩個參數，第一個是一個大於0的整數，他是將間隔動畫等分紅指定數目的小間隔動畫，而後根據第二個參數來決定顯示效果。

第二個參數設置後其實和step-start，step-end同義，在分紅的小間隔動畫中判斷顯示效果。能夠看出：steps(1, start) 等於step-start，steps(1,end)等於step-end

最核心的一點就是：timing-function 做用於每兩個關鍵幀之間，而不是整個動畫

http://designmodo.com/steps-css-animations/

 

本文是轉載，轉載請註明出處！！！

by Aaron：http://www.cnblogs.com/aaronjs/p/4642015.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程