<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • Lottie 動(dòng)效設(shè)計(jì)

          2019-12-26    純純

          動(dòng)效設(shè)計(jì),是 UI 設(shè)計(jì)當(dāng)中不可或缺的一環(huán)。大家對(duì)動(dòng)效的認(rèn)知也從最初認(rèn)為動(dòng)效只是為了美觀(guān)酷炫,到逐漸理解了動(dòng)效對(duì)于提升用戶(hù)體驗(yàn)和產(chǎn)品需求的重要作用。而導(dǎo)致這種認(rèn)知的轉(zhuǎn)變,相當(dāng)一部分原因是因?yàn)橛布阅艿陌l(fā)展和動(dòng)效輸出方式的優(yōu)化。

          因?yàn)閯?dòng)效實(shí)現(xiàn)的過(guò)程就是設(shè)計(jì)師和開(kāi)發(fā)之間互相博弈的過(guò)程。設(shè)計(jì)師可能通過(guò) AE 或者其他工具做出炫酷的效果,和開(kāi)發(fā)對(duì)接就懵了。要么無(wú)法實(shí)現(xiàn),要么極其復(fù)雜。畢竟開(kāi)發(fā)工程師要通過(guò)代碼把動(dòng)效實(shí)現(xiàn)出來(lái),設(shè)計(jì)師得用開(kāi)發(fā)所能理解的語(yǔ)言來(lái)描述。就如同你能完美地解出一道數(shù)學(xué)題一樣,讓你把解題思路教給別人,你可能就沒(méi)那么順暢了。一方面取決于你的表述能力,而更重要的是對(duì)方的理解能力。過(guò)去所廣泛采用的通過(guò)動(dòng)效標(biāo)注輸出給開(kāi)發(fā)的方式,都存在還原度的問(wèn)題。很多時(shí)候還原度達(dá)到 80% 可能都算比較好的了。

          而今天要說(shuō)到的 Lottie 不僅可以 100% 還原動(dòng)效,而且無(wú)需動(dòng)效標(biāo)注。直接通過(guò) AE 輸出動(dòng)效文件給開(kāi)發(fā)。開(kāi)發(fā)人員直接調(diào)用,然后完美還原。

          Lottie是什么?

          Lottie 是 Airbnb 開(kāi)源的一個(gè)動(dòng)畫(huà)渲染庫(kù),同時(shí)支持 Android、iOS、React Native 平臺(tái)。Lottie 支持渲染播放 AE 動(dòng)畫(huà)。通過(guò) AE 插件 bodymovie 導(dǎo)出 json 文件作為動(dòng)畫(huà)數(shù)據(jù)。


          Lottie有什么用?

          Lottie 可以應(yīng)用在 UI 設(shè)計(jì)的很多場(chǎng)景中。以下舉出幾個(gè)常用例子。

          1. 動(dòng)態(tài)啟動(dòng)頁(yè)


          2. 動(dòng)態(tài)圖標(biāo)/按鈕

          3. 空頁(yè)面




          以上僅列舉了部分常用案例,其實(shí) Lottie 的應(yīng)用場(chǎng)景遠(yuǎn)不止這些。在 APP 的多個(gè)模塊中都可以運(yùn)用,那么我們要如何將 Lottie 運(yùn)用在自己的工作項(xiàng)目中呢?那就要了解 Lottie 的原理了。


          Lottie的原理是什么?

          前面已經(jīng)提過(guò) Lottie 是 Airbnb 開(kāi)源的一個(gè)動(dòng)畫(huà)渲染庫(kù)。我們可以理解為它是一個(gè)多功能的視頻播放器,開(kāi)發(fā)人員需要將這個(gè)播放器部署到相應(yīng)的環(huán)境中。然后設(shè)計(jì)人員提供視頻(動(dòng)效文件)給開(kāi)發(fā)人員,讓開(kāi)發(fā)人員按照要求播放視頻文件,即可完成動(dòng)效的應(yīng)用。


          假設(shè)該按鈕動(dòng)效一共10幀,整個(gè)按鈕切換分為兩部分,第一部分:從菜單切換到關(guān)閉(1-10幀);第二部分:從關(guān)閉切換到菜單(10-1)。我們可以讓開(kāi)發(fā)通過(guò)以下控制方式,完成我們想要的效果。

          按鈕動(dòng)效默認(rèn)顯示第1幀(菜單狀態(tài)),點(diǎn)擊按鈕以后開(kāi)始播放動(dòng)效,動(dòng)效播放到第10幀的時(shí)候停止,并停在第10幀(關(guān)閉狀態(tài))。當(dāng)按鈕為關(guān)閉狀態(tài)(第10幀)時(shí),點(diǎn)擊按鈕以后動(dòng)效從第10幀倒放到第1幀(關(guān)閉狀態(tài)),并停在第1幀(菜單狀態(tài))。

          通過(guò)以上方式就完成了對(duì)一個(gè)動(dòng)效按鈕的控制。而日常工作中我們可以靈活地運(yùn)用多種控制方式。

          首先動(dòng)效的觸發(fā),可以是一次交互事件,比如點(diǎn)擊、滑動(dòng);也可以是監(jiān)聽(tīng)到了廣播,比如網(wǎng)絡(luò)異常等。而觸發(fā)以后的動(dòng)效控制也多種多樣,可以從開(kāi)始播放到結(jié)束,也可以進(jìn)行倒放;可以循環(huán)播放某一段動(dòng)效;也可以從某一幀播放到另一幀,或者某一個(gè)時(shí)間點(diǎn)播放到另一個(gè)時(shí)間點(diǎn);更多的控制方式需要大家在工作中慢慢挖掘。

          Lottie支持的AE屬性

          Lottie雖然能夠滿(mǎn)足多種場(chǎng)景需要,但是并非支持所有的 AE 效果。設(shè)計(jì)制作時(shí),需要考慮該效果是否支持。否則,會(huì)導(dǎo)致出錯(cuò)或者所用效果無(wú)法生效。



          上圖為 Lottie 支持的主要 AE 屬性,此處有刪減掉部分不常用的屬性。可以打開(kāi)以下鏈接查看完整版http://airbnb.io/lottie/#/supported-features

          需要注意的是文檔中雖然說(shuō)支持漸變,但是會(huì)出錯(cuò),所以大家在使用矢量圖形時(shí),請(qǐng)勿使用漸變效果。關(guān)于漸變效果的修復(fù)后續(xù)文章會(huì)提到,官網(wǎng)以后也會(huì)修復(fù)相關(guān)問(wèn)題,但是沒(méi)有確切時(shí)間。

          通過(guò)上圖我們可以了解到,Lottie 支持的 AE 屬性基本包含以下幾類(lèi):

          • 基礎(chǔ)的形狀比如圓形、矩形、星形等,也可以支持鋼筆工具繪制的矢量形狀和從 AI 中導(dǎo)入的矢量圖形。
          • 支持位移、大小縮放、透明度、旋轉(zhuǎn)、修剪路徑、蒙版、遮罩這些基礎(chǔ)動(dòng)畫(huà)屬性。
          • 支持圖層間建立父子級(jí)關(guān)系(只支持圖層與圖層之間建立,當(dāng)圖層的屬性之間建立父子關(guān)系會(huì)失效,比如 A 圖層可以和 B 圖層建立父子關(guān)系,但是 A 圖層的位移屬性和 B 圖層的位移屬性單獨(dú)建立父子關(guān)系則不生效)。
          • 支持速度貝塞爾插值,可以搭配 Flow 插件生成各種緩動(dòng)效果。
          • 支持導(dǎo)入圖片。
          • 支持時(shí)間拉伸和時(shí)間重映射來(lái)通知時(shí)間和速度。

          (原文章來(lái)源于:https://www.uisdc.com/lottie-dynamic-design-guide





          日歷

          鏈接

          個(gè)人資料

          存檔

          无码八A片人妻少妇久久| 日本久久中文字幕| 色99久久久久高潮综合影院| 国产精品99久久精品爆乳| 国产精品亚洲综合专区片高清久久久 | 一本一道久久精品综合| 久久天天日天天操综合伊人av| 久久精品国产一区二区三区不卡| 久久久噜噜噜久久中文字幕色伊伊 | 中文字幕亚洲综合久久菠萝蜜| 蜜臀久久99精品久久久久久小说| 一本大道久久a久久精品综合| 久久夜色精品国产www| 久久久久亚洲AV无码永不| 久久中文字幕视频、最近更新| 影音先锋女人AV鲁色资源网久久 | 久久国产精品一国产精品金尊| 品成人欧美大片久久国产欧美| 久久精品一区二区三区AV| 99热精品久久只有精品| 亚洲精品tv久久久久久久久| 思思久久好好热精品国产| 国产精自产拍久久久久久蜜| 亚洲人成精品久久久久| 亚洲婷婷国产精品电影人久久| 国产亚洲欧美成人久久片| 狠狠88综合久久久久综合网| 亚洲日韩中文无码久久| 麻豆久久| 亚洲精品无码久久久| 大蕉久久伊人中文字幕| 久久精品99久久香蕉国产色戒 | 亚洲欧美成人久久综合中文网| jizzjizz国产精品久久| 99久久国产综合精品女同图片| 欧美亚洲另类久久综合婷婷| 久久精品国产只有精品66| 久久亚洲国产中v天仙www| 久久久人妻精品无码一区| 老司机国内精品久久久久| 91精品国产综合久久久久久|