導語：在上一篇文章《交互體驗之動效深耕（上）》中，我們了解到了動效設計的意義與價值、動效的作用以及交互動效中的設計原則，接下來作者繼續和我們聊一聊動效的分類和落地方案。

四、產品中的動效分類

動效大致可以分為：引導類動效、轉場類動效、反饋類動效和品牌類動效四種。

1. 引導類動效

通過視覺和動效聚焦用戶視線，以此來達到吸引用戶注意力的目的，幫助產品業務達成某個模塊的KPI，例如：提示引導、活動入口、動態Banner圖等等。

作者：Johny vino?

2. 轉場類動效

轉場類動效，簡單的說就是幫助用戶理解頁面間的變化和層級關系，讓用戶清楚的知道自己當前所在的位置以及將要跳轉的頁面。

3. 反饋類動效

反饋類動效是告訴用戶當前系統的運行狀態，降低用戶迷失感，給予用戶一定的心里預期。

作者：James G.

4. 品牌類動效

品牌類動效就是通過動態展示的手法，突出產品核心功能和特點，打造產品情感化，給予用戶更深更強烈的記憶，起到品牌宣傳的目的。

作者：Alexander Pyatkov

五、動效時長

動效時長是指從動效開始到動效結束總共所需要的時間，對于動效時長的把控至關重要，時間過長會有明顯的滯留感，時間過短用戶還沒來得及感知就結束了。所以動效需要保證快速相應的同時還要兼顧從容優雅。

一位倫敦城市學院神經學創立者 Davina Bristow 曾經提出，大多數人每分鐘的眨眼次數為15次，而平均的持續時長為100～150ms。iOS和Android系統的動作反饋時間位于100～500ms之間，也就是100ms用戶就能夠產生感知了。

所以我們可以定義50ms為最小增減幅度，100ms為最大的增減幅度，統一定義不同場景及類型的動效時長規范。

六、動效落地的N種解決方案

為了能夠方便用戶快速獲取產品和加載產品資源，我們需要控制下載包的體積大小，以保證用戶能夠在較低的成本下獲取產品。

所以我們要控制動畫的體積大小，還有一個原因就是占用內存越大的動畫對系統性能的占用會相應變大，從而導致部分用戶手機出現卡頓，死機等情況，從而造成用戶流失。

1. 非交互類動效落地方案

1）GIF格式

GIF格式是1987年由 CompuServe 公司創造，由于壓縮技術好，即便是在當時的低速網絡時代也能夠無壓力的顯示，從而備受歡迎。由于年代久遠的原因也讓他擁有非常強的兼容性，目前市面上的大多數智能設備都能夠對其直接預覽。

但隨著互聯網的不斷發展GIF格式本身所存在的問題也逐漸顯現：

1. 對設備的內存和性能的占用非常大（GIF的持續時長和尺寸等都是影響因素）；
2. 在輸出透明背景的GIF時，常會出現鋸齒和白邊的情況；
3. 是一種有損輸出的文件格式，在色彩和畫質上都有所體現。

雖然GIF格式存在以上的問題，但由于在不同設備之間具有良好的兼容性，所以很多平臺都會選擇GIF作為預覽動畫的方式，那該如何輸出GIF呢？

方式一：第一種方式也是比較傳統的一種輸出方式，利用PS導出GIF。

雖然這是一種較為傳統的輸出方式，但是就目前來說這是唯一一種能夠高質量輸出GIF的方法。

方式二：利用AE腳本GIFGUN快速導出GIF，好處就是操作簡單，導出速度快。能夠自定義設置GIF文件的大小、幀數率等屬性。但導出GIF的質量不高，會出現掉幀卡頓的情況，色差也比較大。

方式三：通過Ezgif將視頻轉換成GIF，Ezgif支持上傳多種視頻格式，包含mp4、webm、avi、mpeg、flv、mov和3gp等，支持的最大視頻體積可達到100MB。可以通過參數設置，截取視頻中的一部分轉化成為GIF。

方式四：使用Brewery3軟件導出GIF，雖然導出的內存占用不大，但是輸出的質量卻很低，無較高要求時可選擇使用。

2）視頻

視頻格式無可厚非肯定是普遍被眾多產品所兼容的，視頻格式要比GIF的內存占用更小，但對透明通道的支持卻不太友好，并且他是一種有損的輸出格式。平時對視頻的壓縮可以使用這個工具-Handbrake。

3）Apng/Webp

兩者都是由目前的GIF、PNG、JPG等衍生而來的，其中Apng是一個基于PNG位圖動畫格式的圖片，是PNG的位圖動畫擴展，能夠實現PNG格式的動態圖片效果，它的出現是為了代替舊版的GIF格式，但目前還尚未得到官方的認可。

而Webp是Google在 2010 年開發的一種全部通吃的圖片格式，因為他不僅可以有損(替代JPG)也可以無損(替代PNG)，還可以動(替代GIF)，并且在壓縮率上全面超越了這三種常用的格式。

目前在所有的主流瀏覽器上都可以完美支持，但是在移動設備上需要通過代碼框架才可以完美支持。

• Apng優點：相比 GIF 支持的色彩范圍更廣，也更加清晰，占用的內存更低，并且支持透明通道；
• Webp優點：與Apng特點相似，但ios設備需要借助Google 發布的函數庫才能夠支持。

如何輸出 Apng/Webp ？

方式一：第一種方式可以選擇工具：iSparta ，將生成的PNG序列導入 iSparta 當中，調整參數導出即可。但如果序列幀較多的時候導出速度會變得非常慢，而且偶爾還會出現卡死、閃退和圖片尺寸不統一等問題。

方式二：使用AE插件——BX-Webp/Apng Exporter。

注意：導出地址不要設置為桌面否則會出現數據丟失的情況，務必要將導出地址改成「/xxx.webp」或者「/xxx.png」再導出！

4）序列幀

序列幀是把動畫用一幀一幀的圖像文件來表示，可以通過一些工具對圖層序列進行壓縮處理以達到降低內存的目的。雖然序列幀是無損低內存的，但是最好只在客戶端當中使用，不建議在Web環境中使用。

因為Web中的圖片資源是需要向服務器請求下載的，如果序列幀過多無疑會增加資源請求的次數，并且在高頻次的請求中如果出現錯誤就很容易造成動畫無法正常播放的情況。

而在客戶端當中序列幀資源是存儲在APP安裝包當中的，所以不會出現問題。在Web中如果想要解決上述問題，就需要減少加載資源的請求次數，也就誕生了CSS Sprite—雪碧圖/精靈圖。

5）精靈圖/雪碧圖

精靈圖/雪碧圖（CSS Sprite）是針對序列幀素材應運而生的，是為了滿足Web端播放序列幀的訴求，CSS Sprite 是一種圖像拼合技術，這種方法是將元素拼合在一張圖片上，然后利用CSS的背景定位來顯示需要展示的圖片部分，以這種形式來減少加載資源的請求。

如何輸出：可以使用AE的插件 CSS Sprite Exporter 來輸出。

6）Lottie

lottie是由Airbnb推出，是用于解析使用Bodymovin導出為JSON的AE動畫的第三方庫，支持ios、windows和web端。他的工作原理是把我們的各種矢量元素、位圖以及他們的效果關鍵節點以打包的形式行成一個JSON 格式的文件。

但是當我們使用AE插件Bodymovin導出JSON后，開發并不能直接使用導出的JSON文件，開發人員還需要在代碼中引入Airbnb 提供的 Lottie 第三方庫來讀取播放JSON動畫。

實現原理其實就是把動畫中的元素進行拆分，并且描述每個元素的動畫執行路徑和執行時間。其次為了保證交付給開發的JSON文件沒有任何問題，我們需要在制作動畫的時候格外注意Lottie不支持的屬性。

此外，雖然Lottie是一個非常強大的第三方動畫庫，但是還是會存在很多不確定性和兼容性的問題，例如他對緩動曲線的解析會占用非常多的內存，在不同設備和平臺上的支持效果也非常的不穩定。

關于JSON的導出除了我們熟知的Bodymovin插件，還有一個Lottie平臺推出的LottieFile插件，他與Bodymovin類似，只是功能更加豐富，理論上是能夠實時預覽AE動畫的，但由于網絡原因很難做到實時更新和同步。

使用Lottie的注意事項：

1. lottie不支持任何形式的表達式；
2. mask/軌道遮罩 會很大程度上影響lottie在安卓上的性能；
3. AE本身不支持內外描邊，所以lottie只能導出中心描邊；
4. mask-反轉遮罩，這個功能在最終輸出并不支持；
5. 如果動畫中涉及到大量位圖，會影響最終的性能；
6. 不支持圖層效果以及各類AE效果和濾鏡；
7. 在不影響動畫的前提下，盡量減少圖層的數量；
8. Bodymovin自帶的預覽功能很多時候并不是實際效果，實際測試一下（可以利用Framer進行實際測試），可以減少很多與工程師后期的溝通；
9. lottie更新特別頻繁，高版本對android版本有較高的要求；
10. 輸出json的時候盡量把合成大小裁剪到與你的動畫剛好適應的大小，這樣對開發人員有利；
11. 如果必須需要用到位圖，在輸出位圖之后，圖片最好壓縮處理一下；
12. 軌道遮罩和蒙版雖然效果上是類似的，但是在Lottie的導出上是不一樣的，所以選用軌道遮罩；
13. 關于3D旋轉和Z軸的位置，Lottie Web支持3D旋轉，但在Android上這個動畫是完全不生效的，而Z軸的設置是在兩個平臺是不生效的；
14. 盡可能的減少關鍵幀，可以多使用父子級的方式而不是在每一個圖層上都添加一遍關鍵幀；
15. 避免使用路徑關鍵幀，因為使用后會創建一個非常大的文檔；
16. 空圖層可以使用，但為了讓它正常工作，我們需要將可見打開，并將透明度設置為0。

7）AE2CSS

這是一款AE插件，他是將AE的效果以CSS代碼的形式進行導出，理論上支持AE的所有效果，并且輸出的動畫質量高內存占用極小，而他的實現原理是將基礎屬性動畫直接轉換成代碼，復雜效果轉為雪碧圖，并將兩者結合在一起合并輸出成一套文件。

雖然輸出質量高且內存占用極小，但是他只能夠應用在Web和H5當中。

注意：目前只能導出純色層和位圖的位移、旋轉、縮放、透明度動畫，并且支持表達式和父子級。

8）SVGA

是類似于lottie的另一種文件輸出格式，是一種同時兼容 iOS / Android / Flutter / Web 多個平臺的動畫格式。更是目前禮物動效領域的主流應用格式，我們可以使用AE插件 SVGAConverter 輸出SVGA格式的文件，在使用SVGA時也是需開發調用第三方庫的。

雖然他比lottie占用的內存更高一些，支持的屬性也更少，但是它具有更強的兼容性和穩定性。他與lottie的區別在于記錄動畫的方式不同，lottie是按照AE中的關鍵幀及緩動的結合體進行記錄。

所以有對緩動曲線解析差帶來的性能問題和穩定性問題，而SVGA則是通過逐幀的記錄方式，類似序列幀，但資源可復用，所以占用內存更小。

9）VAP

VAP全稱Video Animation Player，是由企鵝電競開發的一種用于播放酷炫動畫的實現方案。他具有比Webp和Apng更高的壓縮率，也就是素材體積變得更小了，而且采用硬件解碼，使解碼速度更快。并且解決了Lottie和SVGA支持AE效果有限的問題。

充電時刻：什么是硬解和軟解？

硬解就是硬件解碼，是將原來全部交由CPU來處理的視頻數據的一部分交由GPU來做，而GPU的并行運算能力要遠遠高于CPU，這樣可以大大的降低對CPU的負載。而軟解就是軟件解碼，是指利用軟件讓CPU來進行解碼。我們常用到的Lottie、GIF、Apng、Webp等都是軟件解碼，MP4和VAP則是硬件解碼。

10）第三方動效庫

第三方動效庫有很多，但是由于非官方維護存在諸多的不確定性因素，所以如果要使用第三方庫還需要慎重考慮，下面列舉一些動效的第三方庫供參考使用：

當然還有一些在線的動效設計工具，例如：犸良、Rive、Flutter、Lotter-Editor等等。

11）PAG

PAG全稱 Portable Animated Graphics 一個聽起來有些陌生的格式，他是由鵝廠研發，目前還沒有還沒有覆蓋全平臺，他不僅提供AE導出插件，還有桌面端的預覽工具和各端跨平臺渲染SDK。

PAG對文件的解碼速度更快壓縮率更高，而且PAG桌面端預覽工具還提供了性能檢測功能，能夠直觀的幫助我們對性能問題進行優化。不僅如此，PAG還能夠動態修改替換文本和圖片等資源。

手動標注VS自動標注…

原文鏈接：https://www.ui.cn/detail/582355.html

作者：Coldrain1，公眾號「CD動效研究院」

本文由 @Coldrain1 發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

需求背景

有一個需求，要在視頻中進行截圖，人工處理的話，就是要求選擇一些比較精彩的鏡頭進行手工截取圖片，這就意味著，每個視頻都要自己去看一遍，然后選擇比較好的鏡頭截圖保存。

但是這種方法有很多弊端：

1. 視頻有很多，一個一個地看浪費時間和精力。
2. 一個視頻里要截很多圖片，手動截取比較慢。
3. 手工截取的圖片如果不注意，會把視頻邊緣的播放器邊框、外部背景給截到，然后會有黑邊、白邊等問題。

于是迫切需要一個自動化的工具，能夠對視頻進行截圖，按照一定的規則截取，比如按照時間間隔、時間點、幀數等等進行截圖，哪怕是截出來的圖片可能鏡頭不是很好，截完圖后再去人工篩選也是比較快的。

利用現在比較火的語言——Python進行視頻截圖

Python是比較好上手的一個編程語言了，而且最近一直挺火的，主要是其強大的類庫，省去了大量的造輪子的過程，讓編程更加專注于業務本身，更加專注于實現你的目的。

而且Python這門語言不難，會點計算機知識、會點編程的應該一學都會了。

利用Python進行視頻截圖，是一件相對比較容易實現的事情，而且一旦寫成，一勞永逸，能節省掉后期大量手工截圖花的功夫，有那個時間，喝喝茶、看看劇不是挺好嗎？

這篇文章目的也是為了照顧各種小白，讓大家更好的理解，所以介紹的會比較通俗一些。

好了，那么就讓我們開始吧！

首先安裝Python

這個就不用多說了吧，大家直接去Python官網下載安裝包。

然后安裝即可。實在不會的話，百度一下有很多安裝教程，照葫蘆畫瓢一學就會。這不是本文的核心，因此不做過多展開了。

選擇你喜歡的IDE（開發工具）或者編輯器寫代碼

這里筆者比較推薦使用vscode和pycharm。

vscode是微軟推出的一款強大的編輯器，支持各種語言的開發，以及文本文檔的編寫。其強大的插件機制，讓一款編輯器可以躍身成為一款強大的“IDE”。

pycharm是一款jetbrains公司推出的，專門用于python開發的IDE，非常強大好用。

二者選其一，輕量級的選vscode會比較好。（推薦）

創建video_capture.py

創建一個py腳本文件，取名的話，你可以隨意，我這里取名為：video_capture.py

這個腳本文件就是我們要寫代碼的地方了。

安裝opencv-python這個類庫

opencv這個類庫時需要先安裝才能使用。

按 Win + R組合鍵，調出搜索框，輸入cmd，回車打開命令行。

在命令行中輸入下面這行內容進行安裝：

pip install opencv-python

但是可能會安裝失敗：

這是因為源的問題，改成阿里源就能安裝成功了！

pip install opencv-python -i http://mirrors.aliyun.com/pypi/simple/  --trusted-host mirrors.aliyun.com

開始寫代碼

如果你看不懂，或者實在不想看，可以直接劃到最后，點擊關注@IT研究僧大師兄，私信我，發送“視頻截圖Python腳本”，我看到后會直接發給你的。

首先，導入cv2：

import cv2

再導入os庫，創建文件要用：

import os

打開視頻文件，這一步是獲取一個視頻截圖的對象。

cap=cv2.VideoCapture(video_path)

獲取視頻的總幀數：

total_frames=int(cap.get(cv2.CAP_PROP_FRAME_COUNT))  

獲取視頻的幀率：

fps=cap.get(cv2.CAP_PROP_FPS)

然后就能得到視頻的總時長：

duration=total_frames / fps

拿到總時長的目的，就是為了后面能夠根據時間來截圖。

提前創建好截圖保存的目錄：

try:
            os.mkdir(self._output_path)
except OSError:
						pass

然后一個比較關鍵的地方是計算時間點：

msec=(1000 * start_time + count * 1000 * time_interval)

其中start_time是起始時間的秒數，time_interval是時間間隔的描述，這個用來每隔多少秒進行截圖。

計算得到的msec就是視頻時間點的毫秒數了，然后使用這個時間設置視頻的時間位置：

(1000 * self._start_time + count * 1000 * self._time_interval)

這個函數，就是把視頻的拉到指定時間的位置，就和你自己在播放器上拖動視頻的進度條一樣。

然后讀取視頻的這一幀圖片。

success, image=cap.read()

返回值success是bool值，true或者false，true就表示讀取成功，false就是失敗。

返回值image就是這個時間點的圖片了。

然后就是將這個圖片進行保存，存儲在指定的路徑中。

cv2.imwrite(out_path, image, [int(cv2.IMWRITE_JPEG_QUALITY), 100])

out_path就是要存儲的路徑+文件名，image是當前截取的這張圖片，后面的參數是設置圖片質量，這個設置100就行，最高質量。

這就完成截取圖片了。

簡單嗎？

其實簡單來說，就是分三步：

1. 設置視頻時間點。
2. 讀取圖片。
3. 保存圖片。

是非常簡單了。這樣子，只要加上相應的循環控制條件，從start_time循環到end_time，然后每一個時間間隔time_interval截取一張圖，這樣就能對視頻按時間間隔截取批量的圖片了。

擴展實現：獲取指定時間點的圖片

這個可以想象一下，只要給出視頻的小時數、分鐘數、秒數，比如這種格式：

01:31:40

這就意味著要截取一小時三十一分四十秒處的圖片。

然后將這個時間格式轉化為毫秒數msec，然后通過

cap.set(cv2.CAP_PROP_POS_MSEC, msec)

設置視頻的時間點，然后進行讀取、保存就ok了。

總結

然后通過這個就能夠進行一些額外的擴展，比如獲取指定時間范圍內的視頻截圖？

只要制定開始時間start_time，截止時間end_time，然后對這個范圍內按照時間間隔進行截圖，就ok了。

希望能給你們啟發！

完整的python代碼腳本，想要獲取的話，可以關注@IT研究僧大師兄并私信我，發送“視頻截圖Python腳本”，我看到后會直接發給你的。

我是大師兄，一枚計算機專業研究僧，如果你有什么疑問，或者有什么觀點，都可以在評論區發表看法，或者私信我。大家一起共同探討。

如果你也和我一樣，熱衷于技術，熱衷于科技、互聯網，不妨點個關注吧，我會持續分享干貨知識、經驗和觀點總結。

本文由@IT研究僧大師兄原創，歡迎關注，帶你一起長知識！