Web 技巧（14）

前段時間在微信羣聊了一個動效的話題：

鼠標懸浮的時候，三個區塊依次顯示；鼠標移開時，三個區塊反向依次消失。若是使用CSS的triansition是否能夠實現？

藉此話題，在這一期中就圍繞着Web的動效來展開。Web動效不論是從設計到實現都有不少的話題可聊，好比，動畫的設計、交互、實現等等。甚至是實現的技術方案或工具。

Web動效實現手段

說到動效，可能你們都會以爲Web動效是現代Web才具備的特性，事實上並不是如此，Web出現不久，甚至CSS還將來的時候，在Web上有動效的身影。

時至今日，有關於Web動效的實現手段常見的主要有：

• 最爲古老的HTML標籤<blink>和<marquee>，前者能夠實現閃爍的動效，後者能夠實現跑馬燈的動效
• 在Web中引用.gif文件格式，讓元素有動效
• 在Web中引用視頻
• CSS的transition和animation實現動效
• Web Animations API
• Canvas和SVG相關的動效
• WebGL動效(3D動效)

對於開發人員可能會更爲關注怎麼在Web中開發動效。事實上，要在Web上添加動效，除了技術實現以外，還有不少知識點能夠討論，好比。

如何設計出色的動效

有關於如何設計出色的動效，在互聯網上有關於這方面的討論很是的多，也有一些設計規範，好比：

• Material Motion
• IBM's Animation Principles
• The UX in Motion Manifesto

這些規範可讓咱們從設計的角度來理解Web的動效：

事實上要設計好出一個較爲盒理的動效，在設計的階段就須要對這方面有考慮。迪士尼通過基礎工做練習的長時間累積，在 1981 年出版的 The Illusion of Life: Disney Animation 一書中發表了動畫的十二個原則 (12 Principles of Animation) 。這些原則描述了動畫能怎樣用於讓觀衆相信本身沉浸在現實世界中。

擠壓和拉伸 (Squash and stretch)

預備動做 (Anticipation)

演出佈局 (Staging)

連續運動和姿態對應 (Straight-Ahead Action and Pose-to-Pose)

跟隨和重疊動做 (Follow Through and Overlapping Action)

緩入緩出 (Slow In and Slow Out)

弧線運動 (Arc)

次要動做 (Secondary Action)

時間節奏 (Timing)

誇張手法 (Exaggeration)

紮實的描繪 (Solid drawing)

吸引力 (Appeal)

若是你對Web動效設計和體驗相關的話題感興趣的話，能夠花點時間閱讀下面相關的文章：

• Animation & UX Resources
• The ultimate guide to proper use of animation in UX
• 6 Animation Guidelines for UX Design
• The Designer’s Guide to Adding Animation in UX Design
• How to fix dragging animation in UI with simple math

Web動效實現技術方案

前面提到過，實現Web動效的技術手段有不少種，在現代Web中，常見的Web動效實現方案主要有CSS動效，JavaScript動效，SVG動效，WebGL動效等。

CSS動效

在CSS中實現動效，除了咱們熟悉的transition和animation以外還有motion-path等。

CSS transition

CSS的transition實現的動效相對而言是較爲簡單的。就是實現從一個狀態到另外一個狀態過渡效果。簡單地說，就是從狀態A到狀態B時過程當中有必定的動畫效果：

使用CSS的transition能夠在一些交互上增添微動效的交互。該方案要控制動畫的過程，那相對而言會較難控制。

CSS animation

CSS中的animation和transiton相比最大不一樣是有一個@keyframes，能夠經過@keyframes來定義幀動效，能夠在每一幀指定動畫元素的各類狀態（在幀上設置元素的CSS樣式）：

若是你不想手擼一個@keyrames的話，能夠藉助Chrome的插件keyframes.app來輔助你。好比：

CSS路徑動效

在某些場景之下，須要讓一個動畫對象按照咱們指定的一個行動軌跡來運行：

雖然藉助@keyframes來繪製動畫對象的運行軌跡，但相對而言會較爲複雜，並且效果也較難還原。但CSS的motion-path的出現，可讓這件事情變得更爲簡易：

See the Pen Move Modal In on Path by Chris Coyier ( @chriscoyier) on CodePen.

CSS Houdini Animation

CSS Houdini能夠說是一個好東東，對於廣大CSSer而言更是一種福音。他能幫助咱們擴展CSS的能力。對於Animation也是同樣的，特地有一個Animation方面的內容，即Animation API：

好比下面這樣的一個效果：

暴露給CSSer使用的方式也很簡單：

.el {
    background-image: url(...);
}
.el::after {
    background-color: hsla(300, 100%, 50%, .75);
    mix-blend-mode: multiply;
}
.el.is-loaded::after {
    mask-image: paint(circle);
}

el.addEventListener('mousemove', evt => {
    el.style.cssText = `--size: 150; --x: ${evt.offsetX}; --y: ${evt.offsetY}`
})

el.addEventListener('mouseenter', evt => {
    el.style.cssText = `--size: 150; --x: ${evt.offsetX}; --y: ${evt.offsetY}`
})
el.addEventListener('mouseleave', evt => {
    el.style.cssText = `--size: 0; --x: ${evt.offsetX}; --y: ${evt.offsetY}`
})
複製代碼

實現該效果的底層源碼能夠點擊這裏查閱。

JavaScript實現動效

在Web中使用JavaScript實現動效也是最爲常見的，並且這方面的能力也很是的強大。時至今日有Web Animation API，Canvas和WebGL等技術手段，並且還有各式各樣式的動畫庫。

Web Animation API

Web Animation API中提供了一些實現Web動效的API，好比：

• Animation
• KeyframeEffect
• AnimationTimeline
• AnimationEvent
• DocumentTimeline
• EffectTiming
• document.timeline
• document.getAnimations()
• Element.animate()
• Element.getAnimations()

這些API能夠更好的幫助咱們實現Web動效。好比使用KeyframeEffect這個API就能夠像CSS中的@keyframes同樣聲明一個Keyframe：

var rabbitDownKeyframes = new KeyframeEffect( 
    whiteRabbit, // element to animate
    [
        { transform: 'translateY(0%)' }, // keyframe 
        { transform: 'translateY(100%)' } // keyframe
    ], 
    { duration: 3000, fill: 'forwards' } // keyframe options
);
複製代碼

來看一個Web Animation API寫的一個示例：

See the Pen WAAPI iterationComposite & composite by Airen ( @airen) on CodePen.

若是你對Web Animation API相關的知識感興趣的話，能夠在Twitter上關注@rachelnabors。他能夠說是Web Animation API之父，一直在致力於Web Animation API規範的推動。並且還錄製了不少有關於這方面的視頻和教程：

• Web Animation API guide
• Web Animations API Concepts

並且在Codepen上也有不少這方面的Demo能夠供你們參考：

有關於Web Animation API更多的教程能夠閱讀下面相關文章：

• Web Animation API相關教程 @w3cplus
• GETTING STARTED WITH THE WEB ANIMATIONS API
• Advantages of the Web Animations API
• Dan Wilson — When to Use the Web Animations API
• Should you use CSS or JavaScript for web animations?

Canvas動畫

<canvas>是HTML5的一個標籤元素，能夠被用來經過腳本繪製圖形。好比，它能夠被用來繪製圖形，製做圖片集合，甚至用來實現動畫效果。好比下面這樣的一個效果：

See the Pen HTML Canvas fun with Emojis by Flavio Copes ( @flaviocopes) on CodePen.

<canvas>中提供不少API，能夠用來繪製圖形，也能夠實現一些基本動畫，甚至一些高級動畫。

使用canvas來製做動畫，須要對Canvas相關的API瞭解的透徹，並且須要知道一些有關於動畫的一些實現邏輯和算法。特別是對象運動的軌跡、物理和數學相關的理論。

若是對Canvas相關的內容感興趣的話，能夠花點時間閱讀：

• Canvas 學習筆記
• HTML5 Canvas教程
• HTML5 Canvas半知半解
• Canvas教程

WebGL動畫

WebGL容許你建立3D動畫，它更適合沉浸式的全屏動畫體驗和VR。WebGL能夠建立較爲複雜的動畫場景，但複雜程度也相應的大。

See the Pen Run bunny run by Karim Maaloul ( @Yakudoo) on CodePen.

這裏蒐集了一些有關於WebGL相關的教程：

• WebGL 理論基礎
• WebGL2 理論基礎
• Learn WebGL
• WebGL 教程
• WebGL Samples

另外收集了幾個有關於Shaders相關的教程：

• The Book of Shaders
• Shader Lesson
• Into Vertex Shaders
• Shaders
• Ronja's Shader Tutorials
• Shadertoy

這裏有一些關於計算機圖形學以及計算機圖形學中有用的數學。

SVG動效

SVG能夠很好的用來繪製矢量圖，並且容許使用SMIL（SVG動畫的原生格式）建立動畫。不過SMIL即將被Chrome棄用，但因爲受到抵制，該團隊暫進取消了這個決定。另外，該團隊更想推進CSS動畫和Web Animation API，而不是SMIL。

See the Pen Underline.js by Ahmad Shadeed ( @shadeed) on CodePen.

若是你對CSS和SVG結合起來製做動效相關的話題感興趣的話，能夠閱讀下面相關的教程：

• SVG 教程
• 玩轉 SVG 讓設計更出彩
• 16 SVG Animation Tutorials
• Animating SVG with CSS
• HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript
• A Practical Guide To SVG And Design Tools

動畫中的緩動函數

不論是CSS動畫仍是JavaScript動畫，都會用到緩動函數。這些緩動函數能夠幫助咱們建立出更好的動畫效果。

• 緩動使您的動畫感受更天然
• 爲 UI 元素選擇緩出動畫
• 避免緩入或緩入緩出動畫，除非可使其保持簡短；這類動畫可能讓最終用戶以爲很遲鈍

而Web動畫和時間、速度和距離有關緊密的關係。有關於這方面更多的介紹能夠閱讀下面這些文章：

• 曲線和彈性動畫的定義與開發
• 關於動畫，你須要知道的
• 緩動的基礎知識
• 自定義緩動
• 在視圖之間設置動畫
• 選擇合適的緩動
• Easing Functions in CSS3
• S 動畫與貝塞爾緩動函數的實現
• 動畫的內部原理和對接實踐
• 運動曲線提高CSS動畫效果
• 軌跡移動
• Bezier curve
• A Primer on Bézier Curves
• Animated Bézier Curves
• 三角函數在前端動畫中的應用
• 貝塞爾曲線的一些事情

Javascript動畫庫

時至今日，有關於Web動效有不少種實方案，同時在社區中有出現了不少優秀的有關於Web動畫的庫。

常見的庫（或者說優秀的庫）

• AnimeJS
• Three JS
• Animate.css
• Particles JS
• Velocity.js
• Bounce.js
• Mo JS
• GSAP
• Kute.js
• SVG.js
• TweenJS
• Ant Motion
• Popmotion
• Lottie
• Loader CSS
• Parallax JS
• Bounce JS
• P5 JS
• Magic
• Create JS
• React-Motion

Web動效開發模式

最近幾年一直在思考動效的開發模式，早期可能因爲本身的認識，把動效的開發模式侷限於手把手的擼，即根據設計師提供的稿子，一步一步的將動效轉換成CSS或者JavaScript動效。但隨着技術的變革，咱們開發動效的模式也在變化：

就開發模式而言，近幾年經歷了：

• CSS驅動動效
• JavaScript驅動動效
• 數據驅動動效

有關於這方面的話題，要是感興趣的話，能夠閱讀：

• Web Animation 製做指南
• Web動畫
• 手淘互動動效的探索
• 漸進式動畫解決方案
• 你離高效製做動畫只差一篇文章的距離

小結

在這一期中咱們主要圍繞着Web動效展開，有關於實現Web動畫的手段有不少種，好比你們熟悉的CSS transtion、animation，或者說CSS的路徑動效；還有JavaScript動效，Canvas動效以及SVG動效。還有一此更爲複雜的動效，好比WebGL實現的3D動效。在是咱們更爲關心的是如何快速的實現動效，因此咱們除了探討如何實現動效以外，還須要一塊兒探討如何以最低成功的開發動效，甚至說以最低的成功，最快的方式，還原最好的動效。這一切的一切都值得咱們不斷的去探討。但願本文中提供的內容對你們有所幫助，若是大家在這方面有更多的經驗，歡迎在下面的評論中一塊兒分享。