導(dǎo)語(yǔ)：在上一篇文章《交互體驗(yàn)之動(dòng)效深耕（上）》中，我們了解到了動(dòng)效設(shè)計(jì)的意義與價(jià)值、動(dòng)效的作用以及交互動(dòng)效中的設(shè)計(jì)原則，接下來(lái)作者繼續(xù)和我們聊一聊動(dòng)效的分類(lèi)和落地方案。
動(dòng)效大致可以分為：引導(dǎo)類(lèi)動(dòng)效、轉(zhuǎn)場(chǎng)類(lèi)動(dòng)效、反饋類(lèi)動(dòng)效和品牌類(lèi)動(dòng)效四種。
通過(guò)視覺(jué)和動(dòng)效聚焦用戶(hù)視線(xiàn)，以此來(lái)達(dá)到吸引用戶(hù)注意力的目的，幫助產(chǎn)品業(yè)務(wù)達(dá)成某個(gè)模塊的KPI，例如：提示引導(dǎo)、活動(dòng)入口、動(dòng)態(tài)Banner圖等等。
作者：Johny vino?
轉(zhuǎn)場(chǎng)類(lèi)動(dòng)效，簡(jiǎn)單的說(shuō)就是幫助用戶(hù)理解頁(yè)面間的變化和層級(jí)關(guān)系，讓用戶(hù)清楚的知道自己當(dāng)前所在的位置以及將要跳轉(zhuǎn)的頁(yè)面。
反饋類(lèi)動(dòng)效是告訴用戶(hù)當(dāng)前系統(tǒng)的運(yùn)行狀態(tài)，降低用戶(hù)迷失感，給予用戶(hù)一定的心里預(yù)期。
作者：James G.
品牌類(lèi)動(dòng)效就是通過(guò)動(dòng)態(tài)展示的手法，突出產(chǎn)品核心功能和特點(diǎn)，打造產(chǎn)品情感化，給予用戶(hù)更深更強(qiáng)烈的記憶，起到品牌宣傳的目的。
作者：Alexander Pyatkov
動(dòng)效時(shí)長(zhǎng)是指從動(dòng)效開(kāi)始到動(dòng)效結(jié)束總共所需要的時(shí)間，對(duì)于動(dòng)效時(shí)長(zhǎng)的把控至關(guān)重要，時(shí)間過(guò)長(zhǎng)會(huì)有明顯的滯留感，時(shí)間過(guò)短用戶(hù)還沒(méi)來(lái)得及感知就結(jié)束了。所以動(dòng)效需要保證快速相應(yīng)的同時(shí)還要兼顧從容優(yōu)雅。
一位倫敦城市學(xué)院神經(jīng)學(xué)創(chuàng)立者 Davina Bristow 曾經(jīng)提出，大多數(shù)人每分鐘的眨眼次數(shù)為15次，而平均的持續(xù)時(shí)長(zhǎng)為100～150ms。iOS和Android系統(tǒng)的動(dòng)作反饋時(shí)間位于100～500ms之間，也就是100ms用戶(hù)就能夠產(chǎn)生感知了。
所以我們可以定義50ms為最小增減幅度，100ms為最大的增減幅度，統(tǒng)一定義不同場(chǎng)景及類(lèi)型的動(dòng)效時(shí)長(zhǎng)規(guī)范。
為了能夠方便用戶(hù)快速獲取產(chǎn)品和加載產(chǎn)品資源，我們需要控制下載包的體積大小，以保證用戶(hù)能夠在較低的成本下獲取產(chǎn)品。
所以我們要控制動(dòng)畫(huà)的體積大小，還有一個(gè)原因就是占用內(nèi)存越大的動(dòng)畫(huà)對(duì)系統(tǒng)性能的占用會(huì)相應(yīng)變大，從而導(dǎo)致部分用戶(hù)手機(jī)出現(xiàn)卡頓，死機(jī)等情況，從而造成用戶(hù)流失。
1）GIF格式
GIF格式是1987年由 CompuServe 公司創(chuàng)造，由于壓縮技術(shù)好，即便是在當(dāng)時(shí)的低速網(wǎng)絡(luò)時(shí)代也能夠無(wú)壓力的顯示，從而備受歡迎。由于年代久遠(yuǎn)的原因也讓他擁有非常強(qiáng)的兼容性，目前市面上的大多數(shù)智能設(shè)備都能夠?qū)ζ渲苯宇A(yù)覽。
但隨著互聯(lián)網(wǎng)的不斷發(fā)展GIF格式本身所存在的問(wèn)題也逐漸顯現(xiàn)：
雖然GIF格式存在以上的問(wèn)題，但由于在不同設(shè)備之間具有良好的兼容性，所以很多平臺(tái)都會(huì)選擇GIF作為預(yù)覽動(dòng)畫(huà)的方式，那該如何輸出GIF呢？
方式一：第一種方式也是比較傳統(tǒng)的一種輸出方式，利用PS導(dǎo)出GIF。
雖然這是一種較為傳統(tǒng)的輸出方式，但是就目前來(lái)說(shuō)這是唯一一種能夠高質(zhì)量輸出GIF的方法。
方式二：利用AE腳本GIFGUN快速導(dǎo)出GIF，好處就是操作簡(jiǎn)單，導(dǎo)出速度快。能夠自定義設(shè)置GIF文件的大小、幀數(shù)率等屬性。但導(dǎo)出GIF的質(zhì)量不高，會(huì)出現(xiàn)掉幀卡頓的情況，色差也比較大。
方式三：通過(guò)Ezgif將視頻轉(zhuǎn)換成GIF，Ezgif支持上傳多種視頻格式，包含mp4、webm、avi、mpeg、flv、mov和3gp等，支持的最大視頻體積可達(dá)到100MB。可以通過(guò)參數(shù)設(shè)置，截取視頻中的一部分轉(zhuǎn)化成為GIF。
方式四：使用Brewery3軟件導(dǎo)出GIF，雖然導(dǎo)出的內(nèi)存占用不大，但是輸出的質(zhì)量卻很低，無(wú)較高要求時(shí)可選擇使用。
2）視頻
視頻格式無(wú)可厚非肯定是普遍被眾多產(chǎn)品所兼容的，視頻格式要比GIF的內(nèi)存占用更小，但對(duì)透明通道的支持卻不太友好，并且他是一種有損的輸出格式。平時(shí)對(duì)視頻的壓縮可以使用這個(gè)工具-Handbrake。
3）Apng/Webp
兩者都是由目前的GIF、PNG、JPG等衍生而來(lái)的，其中Apng是一個(gè)基于PNG位圖動(dòng)畫(huà)格式的圖片，是PNG的位圖動(dòng)畫(huà)擴(kuò)展，能夠?qū)崿F(xiàn)PNG格式的動(dòng)態(tài)圖片效果，它的出現(xiàn)是為了代替舊版的GIF格式，但目前還尚未得到官方的認(rèn)可。
而Webp是Google在 2010 年開(kāi)發(fā)的一種全部通吃的圖片格式，因?yàn)樗粌H可以有損(替代JPG)也可以無(wú)損(替代PNG)，還可以動(dòng)(替代GIF)，并且在壓縮率上全面超越了這三種常用的格式。
目前在所有的主流瀏覽器上都可以完美支持，但是在移動(dòng)設(shè)備上需要通過(guò)代碼框架才可以完美支持。
如何輸出 Apng/Webp ？
方式一：第一種方式可以選擇工具：iSparta ，將生成的PNG序列導(dǎo)入 iSparta 當(dāng)中，調(diào)整參數(shù)導(dǎo)出即可。但如果序列幀較多的時(shí)候?qū)С鏊俣葧?huì)變得非常慢，而且偶爾還會(huì)出現(xiàn)卡死、閃退和圖片尺寸不統(tǒng)一等問(wèn)題。
方式二：使用AE插件——BX-Webp/Apng Exporter。
注意：導(dǎo)出地址不要設(shè)置為桌面否則會(huì)出現(xiàn)數(shù)據(jù)丟失的情況，務(wù)必要將導(dǎo)出地址改成「/xxx.webp」或者「/xxx.png」再導(dǎo)出！
4）序列幀
序列幀是把動(dòng)畫(huà)用一幀一幀的圖像文件來(lái)表示，可以通過(guò)一些工具對(duì)圖層序列進(jìn)行壓縮處理以達(dá)到降低內(nèi)存的目的。雖然序列幀是無(wú)損低內(nèi)存的，但是最好只在客戶(hù)端當(dāng)中使用，不建議在Web環(huán)境中使用。
因?yàn)閃eb中的圖片資源是需要向服務(wù)器請(qǐng)求下載的，如果序列幀過(guò)多無(wú)疑會(huì)增加資源請(qǐng)求的次數(shù)，并且在高頻次的請(qǐng)求中如果出現(xiàn)錯(cuò)誤就很容易造成動(dòng)畫(huà)無(wú)法正常播放的情況。
而在客戶(hù)端當(dāng)中序列幀資源是存儲(chǔ)在APP安裝包當(dāng)中的，所以不會(huì)出現(xiàn)問(wèn)題。在Web中如果想要解決上述問(wèn)題，就需要減少加載資源的請(qǐng)求次數(shù)，也就誕生了CSS Sprite—雪碧圖/精靈圖。
5）精靈圖/雪碧圖
精靈圖/雪碧圖（CSS Sprite）是針對(duì)序列幀素材應(yīng)運(yùn)而生的，是為了滿(mǎn)足Web端播放序列幀的訴求，CSS Sprite 是一種圖像拼合技術(shù)，這種方法是將元素拼合在一張圖片上，然后利用CSS的背景定位來(lái)顯示需要展示的圖片部分，以這種形式來(lái)減少加載資源的請(qǐng)求。
如何輸出：可以使用AE的插件 CSS Sprite Exporter 來(lái)輸出。
6）Lottie
lottie是由Airbnb推出，是用于解析使用Bodymovin導(dǎo)出為JSON的AE動(dòng)畫(huà)的第三方庫(kù)，支持ios、windows和web端。他的工作原理是把我們的各種矢量元素、位圖以及他們的效果關(guān)鍵節(jié)點(diǎn)以打包的形式行成一個(gè)JSON 格式的文件。
但是當(dāng)我們使用AE插件Bodymovin導(dǎo)出JSON后，開(kāi)發(fā)并不能直接使用導(dǎo)出的JSON文件，開(kāi)發(fā)人員還需要在代碼中引入Airbnb 提供的 Lottie 第三方庫(kù)來(lái)讀取播放JSON動(dòng)畫(huà)。
實(shí)現(xiàn)原理其實(shí)就是把動(dòng)畫(huà)中的元素進(jìn)行拆分，并且描述每個(gè)元素的動(dòng)畫(huà)執(zhí)行路徑和執(zhí)行時(shí)間。其次為了保證交付給開(kāi)發(fā)的JSON文件沒(méi)有任何問(wèn)題，我們需要在制作動(dòng)畫(huà)的時(shí)候格外注意Lottie不支持的屬性。
此外，雖然Lottie是一個(gè)非常強(qiáng)大的第三方動(dòng)畫(huà)庫(kù)，但是還是會(huì)存在很多不確定性和兼容性的問(wèn)題，例如他對(duì)緩動(dòng)曲線(xiàn)的解析會(huì)占用非常多的內(nèi)存，在不同設(shè)備和平臺(tái)上的支持效果也非常的不穩(wěn)定。
關(guān)于JSON的導(dǎo)出除了我們熟知的Bodymovin插件，還有一個(gè)Lottie平臺(tái)推出的LottieFile插件，他與Bodymovin類(lèi)似，只是功能更加豐富，理論上是能夠?qū)崟r(shí)預(yù)覽AE動(dòng)畫(huà)的，但由于網(wǎng)絡(luò)原因很難做到實(shí)時(shí)更新和同步。
使用Lottie的注意事項(xiàng)：
7）AE2CSS
這是一款A(yù)E插件，他是將AE的效果以CSS代碼的形式進(jìn)行導(dǎo)出，理論上支持AE的所有效果，并且輸出的動(dòng)畫(huà)質(zhì)量高內(nèi)存占用極小，而他的實(shí)現(xiàn)原理是將基礎(chǔ)屬性動(dòng)畫(huà)直接轉(zhuǎn)換成代碼，復(fù)雜效果轉(zhuǎn)為雪碧圖，并將兩者結(jié)合在一起合并輸出成一套文件。
雖然輸出質(zhì)量高且內(nèi)存占用極小，但是他只能夠應(yīng)用在Web和H5當(dāng)中。
注意：目前只能導(dǎo)出純色層和位圖的位移、旋轉(zhuǎn)、縮放、透明度動(dòng)畫(huà)，并且支持表達(dá)式和父子級(jí)。
8）SVGA
是類(lèi)似于lottie的另一種文件輸出格式，是一種同時(shí)兼容 iOS / Android / Flutter / Web 多個(gè)平臺(tái)的動(dòng)畫(huà)格式。更是目前禮物動(dòng)效領(lǐng)域的主流應(yīng)用格式，我們可以使用AE插件 SVGAConverter 輸出SVGA格式的文件，在使用SVGA時(shí)也是需開(kāi)發(fā)調(diào)用第三方庫(kù)的。
雖然他比lottie占用的內(nèi)存更高一些，支持的屬性也更少，但是它具有更強(qiáng)的兼容性和穩(wěn)定性。他與lottie的區(qū)別在于記錄動(dòng)畫(huà)的方式不同，lottie是按照AE中的關(guān)鍵幀及緩動(dòng)的結(jié)合體進(jìn)行記錄。
所以有對(duì)緩動(dòng)曲線(xiàn)解析差帶來(lái)的性能問(wèn)題和穩(wěn)定性問(wèn)題，而SVGA則是通過(guò)逐幀的記錄方式，類(lèi)似序列幀，但資源可復(fù)用，所以占用內(nèi)存更小。
9）VAP
VAP全稱(chēng)Video Animation Player，是由企鵝電競(jìng)開(kāi)發(fā)的一種用于播放酷炫動(dòng)畫(huà)的實(shí)現(xiàn)方案。他具有比Webp和Apng更高的壓縮率，也就是素材體積變得更小了，而且采用硬件解碼，使解碼速度更快。并且解決了Lottie和SVGA支持AE效果有限的問(wèn)題。
充電時(shí)刻：什么是硬解和軟解？
硬解就是硬件解碼，是將原來(lái)全部交由CPU來(lái)處理的視頻數(shù)據(jù)的一部分交由GPU來(lái)做，而GPU的并行運(yùn)算能力要遠(yuǎn)遠(yuǎn)高于CPU，這樣可以大大的降低對(duì)CPU的負(fù)載。而軟解就是軟件解碼，是指利用軟件讓CPU來(lái)進(jìn)行解碼。我們常用到的Lottie、GIF、Apng、Webp等都是軟件解碼，MP4和VAP則是硬件解碼。
10）第三方動(dòng)效庫(kù)
第三方動(dòng)效庫(kù)有很多，但是由于非官方維護(hù)存在諸多的不確定性因素，所以如果要使用第三方庫(kù)還需要慎重考慮，下面列舉一些動(dòng)效的第三方庫(kù)供參考使用：
當(dāng)然還有一些在線(xiàn)的動(dòng)效設(shè)計(jì)工具，例如：犸良、Rive、Flutter、Lotter-Editor等等。
11）PAG
PAG全稱(chēng) Portable Animated Graphics 一個(gè)聽(tīng)起來(lái)有些陌生的格式，他是由鵝廠(chǎng)研發(fā)，目前還沒(méi)有還沒(méi)有覆蓋全平臺(tái)，他不僅提供AE導(dǎo)出插件，還有桌面端的預(yù)覽工具和各端跨平臺(tái)渲染SDK。
PAG對(duì)文件的解碼速度更快壓縮率更高，而且PAG桌面端預(yù)覽工具還提供了性能檢測(cè)功能，能夠直觀(guān)的幫助我們對(duì)性能問(wèn)題進(jìn)行優(yōu)化。不僅如此，PAG還能夠動(dòng)態(tài)修改替換文本和圖片等資源。
手動(dòng)標(biāo)注VS自動(dòng)標(biāo)注…
原文鏈接：https://www.ui.cn/detail/582355.html
作者：Coldrain1，公眾號(hào)「CD動(dòng)效研究院」
本文由 @Coldrain1 發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
有一個(gè)需求，要在視頻中進(jìn)行截圖，人工處理的話(huà)，就是要求選擇一些比較精彩的鏡頭進(jìn)行手工截取圖片，這就意味著，每個(gè)視頻都要自己去看一遍，然后選擇比較好的鏡頭截圖保存。
但是這種方法有很多弊端：
于是迫切需要一個(gè)自動(dòng)化的工具，能夠?qū)σ曨l進(jìn)行截圖，按照一定的規(guī)則截取，比如按照時(shí)間間隔、時(shí)間點(diǎn)、幀數(shù)等等進(jìn)行截圖，哪怕是截出來(lái)的圖片可能鏡頭不是很好，截完圖后再去人工篩選也是比較快的。
Python是比較好上手的一個(gè)編程語(yǔ)言了，而且最近一直挺火的，主要是其強(qiáng)大的類(lèi)庫(kù)，省去了大量的造輪子的過(guò)程，讓編程更加專(zhuān)注于業(yè)務(wù)本身，更加專(zhuān)注于實(shí)現(xiàn)你的目的。
而且Python這門(mén)語(yǔ)言不難，會(huì)點(diǎn)計(jì)算機(jī)知識(shí)、會(huì)點(diǎn)編程的應(yīng)該一學(xué)都會(huì)了。
利用Python進(jìn)行視頻截圖，是一件相對(duì)比較容易實(shí)現(xiàn)的事情，而且一旦寫(xiě)成，一勞永逸，能節(jié)省掉后期大量手工截圖花的功夫，有那個(gè)時(shí)間，喝喝茶、看看劇不是挺好嗎？
這篇文章目的也是為了照顧各種小白，讓大家更好的理解，所以介紹的會(huì)比較通俗一些。
好了，那么就讓我們開(kāi)始吧！
這個(gè)就不用多說(shuō)了吧，大家直接去Python官網(wǎng)下載安裝包。
然后安裝即可。實(shí)在不會(huì)的話(huà)，百度一下有很多安裝教程，照葫蘆畫(huà)瓢一學(xué)就會(huì)。這不是本文的核心，因此不做過(guò)多展開(kāi)了。
這里筆者比較推薦使用vscode和pycharm。
vscode是微軟推出的一款強(qiáng)大的編輯器，支持各種語(yǔ)言的開(kāi)發(fā)，以及文本文檔的編寫(xiě)。其強(qiáng)大的插件機(jī)制，讓一款編輯器可以躍身成為一款強(qiáng)大的“IDE”。
pycharm是一款jetbrains公司推出的，專(zhuān)門(mén)用于python開(kāi)發(fā)的IDE，非常強(qiáng)大好用。
二者選其一，輕量級(jí)的選vscode會(huì)比較好。（推薦）
創(chuàng)建一個(gè)py腳本文件，取名的話(huà)，你可以隨意，我這里取名為：video_capture.py
這個(gè)腳本文件就是我們要寫(xiě)代碼的地方了。
opencv這個(gè)類(lèi)庫(kù)時(shí)需要先安裝才能使用。
按 Win + R組合鍵，調(diào)出搜索框，輸入cmd，回車(chē)打開(kāi)命令行。
在命令行中輸入下面這行內(nèi)容進(jìn)行安裝：
pip install opencv-python但是可能會(huì)安裝失敗：
這是因?yàn)樵吹膯?wèn)題，改成阿里源就能安裝成功了！
pip install opencv-python -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com嗯，這樣就安裝成功了。
如果你看不懂，或者實(shí)在不想看，可以直接劃到最后，點(diǎn)擊關(guān)注@IT研究僧大師兄，私信我，發(fā)送“視頻截圖Python腳本”，我看到后會(huì)直接發(fā)給你的。
首先，導(dǎo)入cv2：
import cv2再導(dǎo)入os庫(kù)，創(chuàng)建文件要用：
import os打開(kāi)視頻文件，這一步是獲取一個(gè)視頻截圖的對(duì)象。
cap=cv2.VideoCapture(video_path)獲取視頻的總幀數(shù)：
total_frames=int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) 獲取視頻的幀率：
fps=cap.get(cv2.CAP_PROP_FPS)然后就能得到視頻的總時(shí)長(zhǎng)：
duration=total_frames / fps拿到總時(shí)長(zhǎng)的目的，就是為了后面能夠根據(jù)時(shí)間來(lái)截圖。
提前創(chuàng)建好截圖保存的目錄：
try:
os.mkdir(self._output_path)
except OSError:
pass然后一個(gè)比較關(guān)鍵的地方是計(jì)算時(shí)間點(diǎn)：
msec=(1000 * start_time + count * 1000 * time_interval)其中start_time是起始時(shí)間的秒數(shù)，time_interval是時(shí)間間隔的描述，這個(gè)用來(lái)每隔多少秒進(jìn)行截圖。
計(jì)算得到的msec就是視頻時(shí)間點(diǎn)的毫秒數(shù)了，然后使用這個(gè)時(shí)間設(shè)置視頻的時(shí)間位置：
(1000 * self._start_time + count * 1000 * self._time_interval)這個(gè)函數(shù)，就是把視頻的拉到指定時(shí)間的位置，就和你自己在播放器上拖動(dòng)視頻的進(jìn)度條一樣。
然后讀取視頻的這一幀圖片。
success, image=cap.read()返回值success是bool值，true或者false，true就表示讀取成功，false就是失敗。
返回值image就是這個(gè)時(shí)間點(diǎn)的圖片了。
然后就是將這個(gè)圖片進(jìn)行保存，存儲(chǔ)在指定的路徑中。
cv2.imwrite(out_path, image, [int(cv2.IMWRITE_JPEG_QUALITY), 100])out_path就是要存儲(chǔ)的路徑+文件名，image是當(dāng)前截取的這張圖片，后面的參數(shù)是設(shè)置圖片質(zhì)量，這個(gè)設(shè)置100就行，最高質(zhì)量。
這就完成截取圖片了。
簡(jiǎn)單嗎？
其實(shí)簡(jiǎn)單來(lái)說(shuō)，就是分三步：
是非常簡(jiǎn)單了。這樣子，只要加上相應(yīng)的循環(huán)控制條件，從start_time循環(huán)到end_time，然后每一個(gè)時(shí)間間隔time_interval截取一張圖，這樣就能對(duì)視頻按時(shí)間間隔截取批量的圖片了。
這個(gè)可以想象一下，只要給出視頻的小時(shí)數(shù)、分鐘數(shù)、秒數(shù)，比如這種格式：
01:31:40
這就意味著要截取一小時(shí)三十一分四十秒處的圖片。
然后將這個(gè)時(shí)間格式轉(zhuǎn)化為毫秒數(shù)msec，然后通過(guò)
cap.set(cv2.CAP_PROP_POS_MSEC, msec)設(shè)置視頻的時(shí)間點(diǎn)，然后進(jìn)行讀取、保存就ok了。
然后通過(guò)這個(gè)就能夠進(jìn)行一些額外的擴(kuò)展，比如獲取指定時(shí)間范圍內(nèi)的視頻截圖？
只要制定開(kāi)始時(shí)間start_time，截止時(shí)間end_time，然后對(duì)這個(gè)范圍內(nèi)按照時(shí)間間隔進(jìn)行截圖，就ok了。
希望能給你們啟發(fā)！
完整的python代碼腳本，想要獲取的話(huà)，可以關(guān)注@IT研究僧大師兄并私信我，發(fā)送“視頻截圖Python腳本”，我看到后會(huì)直接發(fā)給你的。
我是大師兄，一枚計(jì)算機(jī)專(zhuān)業(yè)研究僧，如果你有什么疑問(wèn)，或者有什么觀(guān)點(diǎn)，都可以在評(píng)論區(qū)發(fā)表看法，或者私信我。大家一起共同探討。
如果你也和我一樣，熱衷于技術(shù)，熱衷于科技、互聯(lián)網(wǎng)，不妨點(diǎn)個(gè)關(guān)注吧，我會(huì)持續(xù)分享干貨知識(shí)、經(jīng)驗(yàn)和觀(guān)點(diǎn)總結(jié)。
本文由@IT研究僧大師兄原創(chuàng)，歡迎關(guān)注，帶你一起長(zhǎng)知識(shí)！
友情鏈接： 餐飲加盟
地址：北京市海淀區(qū) 電話(huà)：010- 郵箱：@126.com
備案號(hào)：冀ICP備2024067069號(hào)-3 北京科技有限公司版權(quán)所有