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

（本文為個人筆記，我都用 Hype3 直接產(chǎn)出 Prototype 和 JS，避開和一堆數(shù)值的大混戰(zhàn)，但該知道「為什么要這樣做」的部份還是要懂。）

如果設計師要產(chǎn)出動態(tài)特效給 RD ，他們需要幾種信息。感謝邱政憲、Cateyes Lin 、謝孟哲的分享，綜合三位說法整理出下列 6 點：

1. 起始狀態(tài)、結(jié)束狀態(tài)
2. 變化屬性（寬度、高度、XY 坐標、XYZ 軸旋轉(zhuǎn)角度、透明度、顏色…）
3. 時間腳本（多少 ms 到多少 ms 做哪個屬性變化）
4. 漸變函式（Ex. ease-in）
5. 操作行為（停止并改為根據(jù)使用者操作、忽略、其他）
6. 參考范例

1. 起始狀態(tài)、結(jié)束狀態(tài)

動態(tài)效果開始和結(jié)束時的狀態(tài)。也就是動畫開始前、跑完動畫后，畫面會長什么樣子。

2. 變化屬性

有寫過標示文件的設計師都知道，一個組件需標出它的尺寸、距離、色碼、透明度等，如果是文字還要加上字體字級行高之類。在動畫的領域除了 X 軸和 Y 軸外，在 3D 空間里要再加上 Z 軸。

所有需要制作動態(tài)效果的組件通通要標出這些數(shù)值，注意是數(shù)值，不是一個「感覺」，RD 寫程序不能靠感覺。

百度搜索用戶體驗中心的?H5 實現(xiàn)酷炫水滴效果?文中對于「水滴」有非常可怕 + 兇惡的數(shù)值示范（抖）。

天馬行空般的設計甩到面前，含著淚也要做出來——百度前端工程師的內(nèi)心獨白

設計師很爽地把想象中的動態(tài)效果扔給 RD ，RD 要經(jīng)過這么復雜的計算才有辦法實現(xiàn)。如果有專門處理動畫的職務就算了，這是他的工作，但往往沒有這么美夢，RD 光是解 Bug 都沒時間了，哪有這么多心力處理錦上添花的部份呢？）

3. 時間腳本

在什么時間點、某個組件的屬性變化。同樣是關鍵影格的概念，配合「變化屬性」，從 A 時間點到 B 時間點之間，某組件的數(shù)值有什么變化。

若各組件變化時間不同，就會有很多不同的「時間經(jīng)過」搭配「屬性變化」要處理。

4. 漸變函式

可以用「動作的加減速」來理解。根據(jù)迪斯尼 12 項動畫原則，第 6 條是漸快與漸慢（Slow in and slow out），Material Design?有一整個章節(jié)在說明曲線的必要性，并附上許多動畫范例說明。當然這對設計師來講很有難度。

Easing 函數(shù)速查表?可以參考這個網(wǎng)址，和 RD 共同討論組件動作的路徑。

5. 操作行為

「觸發(fā)條件」，使用者的操作是否會影響動畫？游戲類特別會注意到這個部分。

6. 參考范例

展示動畫、模擬影片、Prototype 之類，對設計師來說不算太大的困難，難的絕對是上方提的這 5 項數(shù)值怎么標。這些屬性狀態(tài)數(shù)值沒寫清楚就要靠 RD 通靈了。

RD 現(xiàn)身說法

感謝 謝孟哲 在 FB 公開分享他的實作經(jīng)驗，已征得同意轉(zhuǎn)錄?？赐赀@篇文后，就會知道為什么 RD 會練滿通靈 Lv.99了。

全文如下：

其實動畫會有分兩種：

1. 一般的2D動畫（平移、旋轉(zhuǎn)、透明?）
2. 特殊或3D動畫（翻頁、mac的丟到垃圾桶?）

后者大概都只能用口頭或是影片溝通，而且開發(fā)成本很高。我遇過的情況是：有一個專業(yè)的設計 team，一個專業(yè)的特效函式庫 team，再加上完成一切作業(yè)的軟件研發(fā) team。

前者就比較有一定的規(guī)則可循，因為 engineer在開發(fā)時，系統(tǒng)已經(jīng)提供了相關的操作方式，只要給些相關的參數(shù)即可：

1. 動畫對象的參數(shù)變化（如坐標、透明度、旋轉(zhuǎn)角度）
2. 動畫持續(xù)的時間
3. 動畫加減速的曲線，f(x)=y 表示在時間點 x 的時候?qū)ο髤?shù)為 y。

這就是上面其他人所提到的。

前兩點是很簡單能量化的，但是光是動畫持續(xù)時間就能看出這個 team 在 ux 上的 sense：使用者覺得幾秒的動畫能被接受？動畫播放時是否能被中斷或者改變狀態(tài)（左滑到一半可以停止，或變成右滑）？或者，這個動畫是否是需要的？

我遇過新手 designer 或是 engineer 最常做的事情就是把動畫時間定義為 0.6 到 1sec，如果沒有特別的設計我通常會說「太長」而要求改為 0.3 到 0.5sec…這邊扯比較遠，點到為止就好了。

第三點那個方程式就好玩了。這個部分 designer 根本不知道該怎么描述，即使是 engineer，在這個素質(zhì)落差那么大的年代，也不是人人都能寫出那個 f(x)=y 的方程式。不過現(xiàn)在還是有些好用的工具可以用，如這種網(wǎng)頁：

http://matthewlein.com/ceaser/

你可以拉動方塊改變那個曲線，然后按那些按鈕看到實時的效果。

當然，如同上面其他人所言，這個方程式是有現(xiàn)成的可以套用，比如說漸減（ web engineer 喜歡說 ease-out，android 上會說 DecelerateInterpolator，由于各平臺用詞不同，除非是只跟特定某個平臺的 engineer 溝通，否則溝通上我覺得還是用通俗的語言「漸減」來描述比較好。至少 PM 看得懂）。一般而言能有這樣的描述就不錯了，不過若要求更高的質(zhì)量，就會需要更精確的描述。漸減這種詞就跟黃色一樣，是種很不精確的概念，黃色再精確一點 可能會說鵝黃或香蕉黃，但是要十分精確一定是用色碼來描述，否則你的香蕉黃跟我的香蕉黃可能會不同。漸減也是一樣，ease-out 跟 DecelerateInterpolator 是否相同呢？有興趣的可以研究一下，最精確的描述則一定是數(shù)學方程式。

在開發(fā)某個要求很高的手機 app 項目時，我是直接仿造上面網(wǎng)頁的概念，在手機上面做了一個長得很像的 app 來跟 designer 溝通。他們手指拉一拉，方程式會用到的參數(shù)就出來了，也能直接在手機上看到效果。

原文地址：blog.akanelee.me

作者：@Akane_Lee