一文帶你看CSS過渡動畫藝術,附帶常見動效分享

2021-03-02 掘金開發者社區

作者:@wnagly19,本文已授權掘金開發者社區公眾號獨家使用,包括但不限於編輯、標註原創等權益。

❞🎈 簡介

在使用手機時,都會或多或少都會接觸到 過渡動畫 的使用場景。從最基本的頁面切換到一個按鈕的點擊後的常態都是動畫的應用場景。這些動畫無時無刻不在 優化 (欺騙)著我們的大腦,加強我們對一件事情的認知度。不同情況下不同的動畫操作能夠無形中引導用戶進行接下來的行為。並給人腦一定反應的交互時間。

在我們的日常開發中, 過渡動畫 扮演的角色非常的巧妙。大部分前端其實並不是很懂 過渡動畫 之間的 交互協調 概念,在沒有 互動設計師 的基礎上,只能通過大腦的直觀印象給出一個動畫大概的執行時間和線性速度,但這往往因為個人感官的偏差導致 動效價值 的流失。

🪁 動效價值

那麼我們從 Ant Motion 的動效價值來看下,為什麼做動畫?

它們認為,動效的價值應該是這樣的:

**增加界面活力:**第一時間吸引注意力,突出重點。

**描述層級關係:**體現元素之間的層級與空間關係。

人都會有獵奇性,人們往往願意接受一些大膽的創新,在確保不會對人腦產生障礙的情況下,好的 過渡動畫 對用戶來說是最直接體驗產品的感官,相比於沒有動畫的產品來說,兩者可謂是失之毫釐,差之千裡。

可以嘗試對手機的動畫進行關閉和開啟分別使用一短時間,就能有直接的感官了。

動效的體驗須是流暢的,在不影響體驗性能的前提下才能更好的體驗價值,大量使用無意義動畫導致產品卡頓實則是一個敗筆。(三流產品的基本操作)

❞⚡CSS中的動畫世界

在 CSS 中我們看過很多不可思議的操作,其實都來自於動畫的 欺詐 效果。所以,我們應該認真的看看 Transition 和 Animation 是如何完成一些神奇的吧。

動畫周期

動畫周期是動畫的核心點,它根據 時間 和 貝塞爾曲線(cubic-bezier) 的特徵進行對應組合,產生視覺上的效果。

同樣的,時間和線性動畫都是動畫中設計的難點,在大多數時候,動畫應該更加高效的完成。可以看下 螞蟻Ant Design 對動畫提出的建議。

在企業級應用的設計中,動效需要在儘可能短的時間內有效的完成過渡。那麼如何把握這個時間的長短呢?倫敦城市學院神經學創立者 Davina Bristow 曾提出, 眨眼是人體最快的潛意識動作,大多數人每分鐘眨眼 15 次,眨眼平均持續 100-150 毫秒;所以我們將這個時間段定義成 Ant Design 動效的基本時間單位。

下面幾張圖分別是 transition 默認的一些 貝塞爾曲線 動畫展示。

(效果圖來自Google瀏覽器Cubic Bezier Editor)

速度與激情

在 Ant-Design 中,它的設計對其把控的效果拿捏是具有深思熟慮的,細緻的拿捏會讓動畫呈現起來恰到好處,我們不妨來看看這張圖吧:

Ant-Design  組件裡的基本時間單位分別是:最快時間: 100ms , 基本時間: 200ms , 較大時間:300ms ... 100 的倍增的方式,那麼基於此,我對比了其他UI組件庫,總結出了一些動畫較為合理的時間把控程度。我也在這裡分享下吧。

$animation-time-fast: .1s;
$animation-time-base: .2s;
$animation-time-even: .3s;
$animation-time-slow: .4s;
$animation-time-cut: .7s;

🚞 方塊的一生

在網頁中,有我們熟知的盒模型,所有的頁面都是由大大小小的盒子拼湊而成。如下圖,就是一個基本的盒子模型。

因此,對於動畫來說,最直觀的就是對於方塊運用的一些交互行為。而我們又可以將其分為幾類不同的交互:

**單元素動畫動畫:**該動畫在整個頁面中獨立的觸發,稱之為單元素動畫。**交互動畫:**涉及到多個元素之間可能發生序列的動畫,稱之為交互動畫。**轉場動畫:**頁面與頁面之間的切換,稱之為轉場動畫。呈現方式

在 CSS 中,對於動畫的產生有兩個 API , transition , animation 都可能定義過渡動畫。但是兩者的區別是很大的。transition  只能聲明元素變化從開始到結束之間的變化關係。而 animation 則是可以自由的定義一段動畫在元素上的開始和結束。甚至於,還能控制動畫的執行次數。

單點元素

我們先來看一個單元素(單點)動畫:

這是我們常見的一個聲波信號的一個圖片,我們實現起來非常的簡單,

.dot {
    position: relative;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: #1890ff;

    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: inherit;
      border-radius: inherit;
      // animation: scale 2s ease-out infinite;
      transition: all 1s;
    }
    &:hover::before {
    transform: scale(3);
    }

這個時候,其實我們已經很明顯的發現了 transition 的弊端了,它並不能自由的控制元素的形變,所有的形變都是預先設置在元素上的,而 animation 則是可以自由的組織元素發生變化的內容和次數,而不完全依賴於用戶觸發。

需要注意的是,如果元素從文檔流直接消失,那麼CSS動畫和過渡屬性就對其沒有效果了。如:display

可以看的出, transition 的存在更多是為元素 過渡行為 而使用的,當元素發生過渡行為的時候,較為簡單的動畫,我們並不需要使用 animation 進行控制。因此,可以總結出:

「transition」:強調的是單一動畫屬性的過渡效果,由開始到結束的過程,中間不存在動畫轉折。「animation」:強調的是多種動畫屬性的結合,能夠有效的排列動畫執行時間的 某時做某事 ,從開始到結束的過程可以是簡單,也可以是複雜。算是 transition 的加強版。「交互動畫」

在 web 頁面中,我們往往涉及到很多的交互動畫,我們可能會涉及到部分動畫的穿插,那麼這個時候就需要對動畫元素進行一部分的延遲操作了。

需要注意的是 animation-delay 元素依舊會顯示,下圖只是做一個基本的演示,完整效果可以看另一篇文章寫的案例,是完全通過延遲 DOM 來實現的。

對比兩者 DEMO ,左側的是使用Vue鉤子添加 setTimeout 分批去控制動畫的行為,右邊則是使用 animation-delay 設置了基礎延遲時間,可以看到,動畫只是做了延遲,但是DOM還是加載了,很明顯會有瑕疵。

示例動畫來自@ mmdjj:優美的v-for列表加載動畫:vue動畫鉤子實踐

⭐使用動畫

誠然, Vue 提供了 transition-group 和 transition 組件,能夠很好的控制一張卡片的一生,從進入到離開但是在動畫的行為上,還是寫成了一個 animation.scss 作為基本動畫的管理,具體可以根據當前需要的動畫,拼湊成為對應的 動畫類 。

在寫動畫類的時候,我們需要注意的是,一個動畫如無意外,肯定是雙向的,比如最耳熟能詳的淡入淡出。淡入和淡出其實就是  開始 和 結束 相反的一個過程。

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

多數時候,我們只需要進行在class中進行 類 的引用就可以使用了,如果是 vue.js 需要使用 transition 組件的話可以自己拼湊出一個動畫狀態類進行綁定。

list-5.gif🍻動畫分享和閱讀資源

下面來分享標題的動畫資源吧,不拿出點資源估計今天很難走出掘金了。首先是一些推薦的作者寫的文章,非常的棒,看完概念篇再去看實踐,直接起飛。

@mmdjj:優美的v-for列表加載動畫:vue動畫鉤子實踐

下面是我個人覺得比較好的動畫資源,寫成了一個 scss 文件給大家了,獨樂樂不如眾樂樂。

動畫樣式下載地址:立即下載

❞總結

本片文章算是我對過渡動畫體系的一個小總結,看起來很簡單的過渡動畫,難的不是 API 而是設計動畫的過程,在一個團隊中, 設計 和 交互 對於前端的體驗也是重中之重,我們在開發的時候,對於其他領域的知識應該保持學習的態度。同樣的,對於部分複雜的動畫,如無必要也需要和互動設計進行溝通,好的動畫可以給人眼前一亮的視覺體驗,拖沓的動畫也同樣會讓人疲勞。看完文章後,不妨在自己項目中去實踐實踐吧。

相關焦點

  • CSS動畫示例(上一篇是CSS過渡…)
    大家好,歡迎來到雄雄的小課堂,前面,我們將CSS的變形和過渡都整理了,有需要的可以移步這裡看:CSS3中的動畫示例CSS3的幾個變形案例……今天,我們來看看CSS3的動畫。CSS3使用動畫分為兩個步驟:1.通過類似flash動畫的關鍵幀來聲明一個動畫。
  • 【前端-CSS動畫】製作聖誕節彩燈
    css動畫 animationcss動畫 keyframesbox-shadow一、效果二、代碼index.html,它可以取代許多網頁動畫圖像,Flash 動畫,和 Javascripts。CSS3 @keyframes 規則要創建CSS3動畫,你將不得不了解@keyframes規則。@keyframes規則是用來創建動畫。 @keyframes規則內指定一個 CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。
  • 【效果高能】你不知道的 Animation 動畫技巧
    引言—在 web 應用中,前端同學在實現動畫效果時往往常用的幾種方案:css3 transition / animation - 實現過渡動畫setInterval / setTimeout - 通過設置一個間隔時間來不斷的改變圖像的位置requestAnimationFrame - 通過一個回調函數來改變圖像位置,由系統來決定這個回調函數的執行時機
  • 第6期:《未定事件簿》UI動效分享與借鑑
    你將扮演新人律師,在與TA攜手解決離奇委託的過程中,被捲入不為人知的陰謀。這是一場戀愛x推理的冒險,你將做出怎樣的抉擇?通過動效引導點擊按鈕劇情轉場與動效銜接解鎖動效因為公眾號文章的排序規則改變了,需要點「在看」或「留言」進行互動,否則無法收到最新的文章。所以。。各位喜歡支持V動效的同學們,如果你希望繼續可以正常地收到我的新文章,麻煩各位同學點擊右下角的藍色「在看」,如果你有更多時間,可以選擇留言,哪怕打一個標點符號,都可以的,這樣又可以讓系統判斷我們的關係更加親密了。
  • 49期:利用clip-path製作css動畫
    引最近工作項目中有製作動畫效果的需求,查閱了一些網站之後,在一個名叫species-in-pieces的網站(species-in-pieces.com)看到了以下神奇的動畫效果:用Chrome的開發者工具窺探一番之後,發現這個酷炫的動畫效果基本是純css實現的!其實現核心就是css3中加入的 clip-path 屬性。
  • css動畫創建及使用
    animation-direction:規定動畫是否在下一周期逆向地播放。默認是 "normal"。動畫在動畫執行之前和之後不會應用任何樣式到目標元素;forwards:在動畫結束後(由 animation-iteration-count 決定),動畫將應用該屬性值;backwards:動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。
  • 動效老司機分享直播禮物 SVGA 動畫避坑指南
    ,作者有著豐富的直播禮物動效設計經驗,認真看完相信對你很有裨益。相關預覽gif和分享僅供交流,切勿商用。著作權歸屬公司,轉載請聯繫作者,請勿私自轉載,謝謝配合。前言因為工作的變故,在18年底開始使用svga,撿起AE做一做動效。相關資料能查到的不多,趟了些坑。今天開始陸陸續續整理分享些經驗乾貨給大家。一.
  • 使用CSS技術實現Netflix Logo動畫效果
    能在這裡分析他的案例也是非常榮幸的。我嘗試使用 Netflix(譯者註:一家在線影片租賃提供商)時,立即就把我吸引住了。我觀看了一些不得不在它處才能觀看的節目。每一集電視劇或者電影都以 Netflix 動畫作為開始。
  • css文字特效-冰凍文字(帶炫光)
    使用css製作冰凍文字(帶炫光效果)適用場景:通常此類效果在視頻片頭特效出現較多博客上,適用影評內容,
  • CSS自定義屬性製作動畫
    如果你想讓body背景顏色變成gray時,你只需要修改--primary-color。看上去是不是像CSS處理器中變量的使用方法。是不是很簡單,如果你覺得就這點內容不夠深入,可以閱讀早前譯的一篇文章《深入學習CSS自定義屬性》。這裡就不再深入,把篇幅留給後面的內容。CSS製作動畫CSS製作動畫已經不是什麼新課題了,大家在平常的業務中或許已經使用過了。
  • 純CSS實現常見的UI效果
    想想UI丟給你一套好看的界面,你卻只需一個img標籤,或者一個background-image屬性即可搞定了它,但日後某個地方需要調整某些外觀(顏色、文字等),你還不是會讓UI再修改之前的素材,然後替換上去完事?這樣就完全受制於UI,而無法發揮自己的能動性。那麼,如何打破這個僵局?
  • 公眾號h5動畫雜記
    作者: lightcai 蔡軍宏編輯: edwinzeng 曾鑫鵬公眾號環境下的H5分享傳播活動很常見,是非常有效的微信內傳播手段
  • 盆景化靜為動藝術手法(一)
    作者:張運山期待您分享給更多的朋友。記得關注@愛木盆景,更多盆景圖文視頻分享給你。歡迎轉發,贈人玫瑰手有餘香。盆景藝術要想師法自然,表現自然之真,就必然要表現動象,只有這樣「才能表現精神,表現生命。這種動象的表現,是藝術的最後目的。」(宗白華《看了羅丹的雕刻以後》)。表現動象,就是表現自然的靈魂,這也是盆景創作的最終目標。其二,在化靜為動技藝上不斷探索、創新和突破。動與靜是一對矛盾,既對立而又相互統一,而且在一定條件下相互轉化。
  • svg 動畫介紹(一)
    實現單屬性的動畫過渡效果。屬性描述attributeName要變化的元素屬性名稱。from動畫的起始值。to指定動畫的結束值。dur常規時間值或indefinite無限。repeatCount表示動畫執行次數或indefinite無限。
  • HTML DIV+CSS 命名規範大全
    一、命名規則說明1、所有的命名最好都小寫2、屬性的值一定要用雙引號("")括起來,且一定要有值如 , id="helloweb"3、每個標籤都要有開始和結束,且要有正確的層次,排版有規律工整4、空元素要有結束的tag或於開始的tag後加上"/"5、表現與結構完全分離,代碼中不涉及任何的表現元素,如
  • 你可能不知道的 CSS 動畫技巧與細節
    怕標題起的有點大,下述技巧如果你已經掌握了看看就好,歡迎斧正,本文希望通過介紹一些 CSS 不太常用的技巧,輔以一些實踐,讓讀者可以更加深入的理解掌握 CSS 動畫。廢話少說,直接進入正題,本文提到的動畫不加特殊說明,皆指 CSS 動畫。
  • CSS 黑魔法小技巧,讓你少寫不必要的JS,代碼更優雅
    我們往往稱不常見的東西為「生僻」,就像是不常見的文字我們叫「生僻字」,因此不常見的 CSS 屬性,我們可以叫做「生僻屬性」, writing-mode給我們的感覺就是一個「生僻屬性」,很弱,可有可無。這個屬性可以追溯到 IE5.5 時代,兼容性是相當好的。
  • 推薦一款不錯的動畫製作軟體--萬彩動畫大師
    最後做出來的視頻都不理想,無意間看到了萬彩動畫大師這款軟體,看網上的視頻覺得不錯,就下載使用了下,確實挺好。說了半天,萬彩動畫大師是什麼,能做什麼呢?這是一款好用的動畫視頻製作工具,操作簡單易上手,可用來製作企業宣傳片,動畫片,產品介紹短片,趣味課件視頻,微課視頻,演示演講動畫視頻等。萬彩動畫大師提供大量精美的場景模板讓用戶快速開始製作動畫視頻。
  • 【吉動·看新聞】吉林動畫學院2019年度總結表彰大會隆重召開
    1月13日,吉林動畫學院2019年度總結表彰大會在學校藝術中心隆重召開。吉林動畫學院學校領導,國外及港臺地區的專家,吉林動畫學院、吉林省教育實業集團的全體教職員工,吉動文化藝術集團長春、北京、上海三地團隊千餘人出席了總結表彰大會。吉林動畫學院副校長王曉巖主持會議。
  • vue+swiper+animate.css製作全屏滾動H5
    blog.csdn.net/qq_41725450    年底了,接到需求要製作年度帳單,形式就是全屏滾動H5頁面,翻頁時給頁面元素添加動畫