產品如何快速構建ui動效

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

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

      動效設計主要作用是幫助用戶瀏覽應用程序，通過ui元素之間的關系過渡。當然，你也可以通過使用圖標、獎章和插圖效果為應用程序添加顏色，但是構建產品可用性應該優先于添加動態性能。在展示你的動效設計技能之前，讓我們先設計一個基本的運動，即產品導航之間的轉換。

      過渡模式

      在設計導航之間進行轉換時，簡單性和一致性是最關鍵的。為此，我們將在以兩種動畫模式進行選擇:

      1. 基于容器的過渡

      2. 沒有到容器的轉換

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

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

      2. 縮放容器中的元素以適應寬度，將元素固定在頂部，但仍然在容器中，在容器和內部元素之間創建一個清晰的關系鏈。

      3.當容器加速時，它會在轉換期間淡出。隨著容器變慢，輸入元素逐漸淡入。當元素快速移動時，元素被淡入替換。

      將此模式應用于所有涉及容器轉換的效果，這些轉換建立一致的運動規則。這也使得開始和結束之間的關系更加清晰，因為它們由兩個動畫容器連接。為了展示這個模型的靈活性，它被分為五個不同的使用場景:

      有些容器只是使用材質的標準緩動功能從屏幕上滑動進來，它滑動的方向取決于與之關聯的組件位置。例如，單擊左上角的折疊項導航，圖標將從左側滑動容器。

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

      過渡沒有容器

      有些作品會使用沒有容器的轉換來構建動態設計，例如點擊底部導航欄中的圖標，將用戶帶到一個新的頁面，在這種情況下，將使用以下兩個步驟:

      1. 開始的元素通過淡入消失，然后最后的元素通過淡入進入。

      2. 當最后一個元素出現時，使用材料的減速運動來微妙地顯示。但同時縮放只適用于新舊內容的替換。

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.hebeijilong.cn/news-id-40677.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注UI設計頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050