中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

精美的動畫對于提升產(chǎn)品體驗有很大幫助，如促進(jìn)用戶理解功能，緩解用戶情緒，調(diào)動用戶積極心理，為產(chǎn)品提供亮點等等。諸如此類的文章相信各位已經(jīng)看過不少了，不少人已經(jīng)開始越來越重視動效在產(chǎn)品中的應(yīng)用了，還沒有看過的同學(xué)不用急，谷歌官方的動效指南講解得很詳細(xì)，建議只看這個就夠了，配合一些動畫理解起來更容易。

你已經(jīng)有了大致的想法，那么怎么讓研發(fā)哥哥們實現(xiàn)呢？demo又改怎么做呢？可別說讓研發(fā)下一個app照著做。

一、工具的選取

目前的動效設(shè)計工具非常多，建議使用主流的工具，不僅教程多，后期更新也更方便。我用過主流的有以下幾種，各有不同，需要針對彼此的優(yōu)缺點使用。

1. flinto

這個比較適合做頁面跳轉(zhuǎn)，比如從點擊一個按鈕從一個頁面跳轉(zhuǎn)到另一個頁面，實際項目中很少用，比較適合一些小項目，上手比較容易。

2. principle

相當(dāng)于一個輕量級的AE，調(diào)節(jié)動畫非常方面，同步sketch使用，頁面跳轉(zhuǎn)或者單頁面小元素動畫都可以實現(xiàn)，缺點在于復(fù)雜的動畫難以實現(xiàn)，上手比較容易，可以同步手機(jī)演示。

3. origami studio

上手稍微有點門檻，實現(xiàn)動畫的方式是節(jié)點動畫，facebook推出的，前身為quartz composer 可以將動畫導(dǎo)出為android和iOS的代碼，需要引入的facebook的包，后續(xù)推出的origami studio中就不能再導(dǎo)出代碼了，另外使用origami studio 做的彈性動畫還需要接入pop引擎。綜合來說，可以方便地實現(xiàn)一些更復(fù)雜的動畫，如粘性，彈性，緩動等，不太適合頁面跳轉(zhuǎn)。

4. AE

可以是動效設(shè)計中的大殺器，你想要的特效都可以做出來，配合一些插件可以做出相當(dāng)驚艷的效果，缺點就是上手難度大，而且做出的動畫不利于交互。最近airbnb推出的lottie可以將AE做的動畫轉(zhuǎn)為代碼，有興趣的同學(xué)可以保持關(guān)注。

對于動效軟件的選擇，看個人的愛好了，新手比較推薦flinto和principle。

二、設(shè)計時的注意點

別以為demo做好了就結(jié)束了，接下來才是最麻煩的一步，如何讓研發(fā)哥哥們實現(xiàn)你的動效。你可別拿著demo就直接丟給研發(fā)哥哥了，運(yùn)動時間，淡化的百分比，運(yùn)動的形式，這些可別讓研發(fā)看著你的demo猜。

在寫動效需求文檔的時候，有這么幾個注意點：

1. 運(yùn)動模式

雖然研發(fā)會更喜歡勻速直線運(yùn)動（畢竟做起來簡單），但是讓人愉悅的動效應(yīng)該是模擬現(xiàn)實的，會有對應(yīng)的減速和加速運(yùn)動，這一點參考谷歌的動效指南就好，使用系統(tǒng)自帶的參數(shù)就好，不要再去調(diào)整加速曲線了。

2. 運(yùn)動時間

要注意研發(fā)的單位一般是毫秒，所以你就盡量別寫0.03秒這種了。

3. 動畫的實現(xiàn)類

這里就要說到代碼層了，不能理解的沒關(guān)系，看看就好。

iOS 的動畫可以被分為兩大類：

1. 系統(tǒng)提供的關(guān)鍵幀動畫實現(xiàn)方式：用戶指定關(guān)鍵信息，系統(tǒng)實現(xiàn)動畫過程，對用戶而言操作起來會簡單些。
2. 逐幀動畫實現(xiàn)方式：周期性的調(diào)用繪制方法，繪制每幀的動畫對象。系統(tǒng)操作方法簡單，但用戶操作的工作量就會大一些。著名的 facebook 的pop動畫框架，就是使用CADisplayLink這種逐幀繪制的方式實現(xiàn)的。

如果繪制過程過于復(fù)雜，不能在屏幕刷新一幀的時間內(nèi)完成，可以考慮改為每隔一幀繪制，相當(dāng)于是 30 FPS的刷新率。不然可能會使動畫不連貫，有卡頓感。

采用關(guān)鍵幀的方式來實現(xiàn)動畫，要講的內(nèi)容相對逐幀的方式就多的多了。

動畫過程實際是一個時間的函數(shù)，橫坐標(biāo)是時間的變化值，縱坐標(biāo)是動畫屬性的變化量。那么我們就可以在一個直角坐標(biāo)系中，通過作圖來畫出這個函數(shù)。比如勻速運(yùn)動的圖形，就是一條通過原點的直線。

所以這個類的功能就是畫出一條曲線，來表示時間和屬性變化之間的關(guān)系。而畫圖的方法，是使用的是畫貝葉斯曲線的方法。

系統(tǒng)提供了幾個常用的函數(shù)，比如kCAMediaTimingFunctionLinear就是勻速運(yùn)動；kCAMediaTimingFunctionEaseInEaseOut就是一般系統(tǒng)動畫的默認(rèn)值，漸入漸出，即在動畫開始和結(jié)束的時候速度稍慢些。

三、具體范例

如圖，一個點擊分享按鈕后，各個分享圖標(biāo)依次減速入場的動畫的需求如下

說明：
1.優(yōu)化直播間分享面板，增加特效
2.當(dāng)用戶點擊分享按鈕時（*包括傳統(tǒng)直播間主播面板的分享按鈕和上方分享按鈕，手機(jī)直播間的分享按鈕*），從下方彈出分享面板，逐個彈出分享icon，并淡入顯示分享獎勵。
3.用戶關(guān)閉分享面板時，分享icon從右到左依次下落淡化消失

相關(guān)參數(shù)：
1.分享面板減速彈出，運(yùn)動時間225ms

2.分享icon從左到右依次彈出，運(yùn)動時間225ms。帶有獎勵圖標(biāo)的，當(dāng)對應(yīng)分享icon彈出后，分享圖標(biāo)淡入顯示（時間225ms），第二個圖標(biāo)比第一個遲100ms開始運(yùn)動
eg：如圖第一個為qq圖標(biāo)，當(dāng)用戶點擊分享按鈕，分享面板彈出后，qq圖標(biāo)開始彈出（時間225ms），100ms后第二個圖標(biāo)（qq空間）彈出，當(dāng)qq圖標(biāo)完全彈出時，淡入顯示分享獎勵圖標(biāo)，時間225ms。

3.分享icon從右往左依次收回，分享面板收回，所有運(yùn)動的時間減少30毫秒，如分享面板收回時間195ms，分享icon收回時間195ms。
andorid端動畫曲線采用系統(tǒng)自帶：AccelerateDecelerateInterpolator（在動畫開始與結(jié)束的地方速率改變比較慢，在中間的時候加速）
iOS端動畫采用系統(tǒng)自帶：kCAMediaTimingFunctionEaseInEaseOut （在動畫開始和結(jié)束的時候速度稍慢些）

具體效果可參考附件視頻

四、Android和iOS可能的區(qū)別

1.在研發(fā)哥哥寫完代碼后，檢查的時候你會發(fā)現(xiàn)andorid似乎比iOS卡了那么一點點，這也是受很多一些因素影響，如果追求體驗，可以嘗試加快20ms。

2.一些動效，本身就是系統(tǒng)自帶的，如果不清楚，建議多閱讀官方文檔，或者設(shè)計前多請教研發(fā)吧。

也是學(xué)習(xí)動效沒多久，如果文章中哪里寫的不對，歡迎各位指出，共同討論。

本文由 @Placeless 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。