產(chǎn)品如何快速構(gòu)建ui動效

產(chǎn)品如何快速構(gòu)建ui動效

      產(chǎn)品如何快速構(gòu)建ui動效？如果容器從屏幕邊界進(jìn)入，它會淡入并放大。它不從0%開始制作動畫，而是從95%開始，以避免元素之間過渡太多。下面來講講產(chǎn)品如何快速構(gòu)建ui動效，希望對你有幫助。

      移動性有助于使ui更具表現(xiàn)力，更易于使用。盡管它有很大的潛力，但它可能是ui設(shè)計(jì)家族中最新的成員之一，所以它可能是所有設(shè)計(jì)學(xué)科中最少的。為公眾所知。視覺設(shè)計(jì)和交互設(shè)計(jì)可以追溯到早期的Gui，但是由于動畫必須由現(xiàn)代硬件平滑地呈現(xiàn)，而且ui運(yùn)動和傳統(tǒng)動畫之間的重疊使得兩者之間的區(qū)別更加復(fù)雜。傳統(tǒng)動畫需要掌握迪士尼的12條基本原則。這是否意味著ui動畫和傳統(tǒng)動畫一樣復(fù)雜?我經(jīng)常聽到人們說動效設(shè)計(jì)很復(fù)雜，我不知道如何選擇相應(yīng)的動畫模式，但我認(rèn)為至少在ui領(lǐng)域，動效設(shè)計(jì)可以很簡單。

      動效設(shè)計(jì)主要作用是幫助用戶瀏覽應(yīng)用程序，通過ui元素之間的關(guān)系過渡。當(dāng)然，你也可以通過使用圖標(biāo)、獎?wù)潞筒鍒D效果為應(yīng)用程序添加顏色，但是構(gòu)建產(chǎn)品可用性應(yīng)該優(yōu)先于添加動態(tài)性能。在展示你的動效設(shè)計(jì)技能之前，讓我們先設(shè)計(jì)一個基本的運(yùn)動，即產(chǎn)品導(dǎo)航之間的轉(zhuǎn)換。

      過渡模式

      在設(shè)計(jì)導(dǎo)航之間進(jìn)行轉(zhuǎn)換時(shí)，簡單性和一致性是最關(guān)鍵的。為此，我們將在以兩種動畫模式進(jìn)行選擇:

      1. 基于容器的過渡

      2. 沒有到容器的轉(zhuǎn)換

      如果動畫包含按鈕、卡片或列表等內(nèi)容，那么使用基于容器的動畫設(shè)計(jì)，容器通常有明顯的邊界。這個模式分為三個步驟:

      1. 使用材質(zhì)的標(biāo)準(zhǔn)緩動使容器具有動畫效果(這意味著它可以快速加速，然后緩慢減速)。

      2. 縮放容器中的元素以適應(yīng)寬度，將元素固定在頂部，但仍然在容器中，在容器和內(nèi)部元素之間創(chuàng)建一個清晰的關(guān)系鏈。

      3.當(dāng)容器加速時(shí)，它會在轉(zhuǎn)換期間淡出。隨著容器變慢，輸入元素逐漸淡入。當(dāng)元素快速移動時(shí)，元素被淡入替換。

      將此模式應(yīng)用于所有涉及容器轉(zhuǎn)換的效果，這些轉(zhuǎn)換建立一致的運(yùn)動規(guī)則。這也使得開始和結(jié)束之間的關(guān)系更加清晰，因?yàn)樗鼈冇蓛蓚�動畫容器連接。為了展示這個模型的靈活性，它被分為五個不同的使用場景:

      有些容器只是使用材質(zhì)的標(biāo)準(zhǔn)緩動功能從屏幕上滑動進(jìn)來，它滑動的方向取決于與之關(guān)聯(lián)的組件位置。例如，單擊左上角的折疊項(xiàng)導(dǎo)航，圖標(biāo)將從左側(cè)滑動容器。

      如果容器從屏幕邊界進(jìn)入，它會淡入并放大。它不從0%開始制作動畫，而是從95%開始，以避免元素之間過渡太多。變焦動畫使用了材質(zhì)的減速，這意味著它從峰值速度開始，然后逐漸減速。當(dāng)元素退出時(shí)，容器將在沒有縮放動畫的情況下淡出。

      過渡沒有容器

      有些作品會使用沒有容器的轉(zhuǎn)換來構(gòu)建動態(tài)設(shè)計(jì)，例如點(diǎn)擊底部導(dǎo)航欄中的圖標(biāo)，將用戶帶到一個新的頁面，在這種情況下，將使用以下兩個步驟:

      1. 開始的元素通過淡入消失，然后最后的元素通過淡入進(jìn)入。

      2. 當(dāng)最后一個元素出現(xiàn)時(shí)，使用材料的減速運(yùn)動來微妙地顯示。但同時(shí)縮放只適用于新舊內(nèi)容的替換。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://elsolbar.com/news-id-40677.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050