激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

原生app開發(fā)技巧——底部導航欄動畫按鈕ps制作gif動畫-過渡動畫

發(fā)布時間：2024-03-07 11:22:33 瀏覽量：214次

本文伊凡投稿一顆優(yōu)雅草科技，僅代表伊凡個人觀點，優(yōu)雅草科技歡迎大家投稿

我們要做的效果是如下，就像這個app一樣底部的每個菜單點擊是有動畫的：

此問題來源于我們的一位ui設計師他無法制作Lottie動畫無法輸出.json格式給到我們的安卓工程師，因此還有一種方法就是做個gif圖，而這個目前他也不會只有給大家來一手了，順便學習記憶下。

這是ui原始給到的圖，是我讓他這樣切得看起來是滿足的，我打算訂閱，發(fā)現(xiàn)，我的圖標做放大效果，首頁的笑臉做慢慢出來，小視頻同理，本文就以第一個首頁笑臉為例子即可，其他便可舉一反三。

1，準備工作

下載好藍湖ui設計師做好的圖，選擇最大的就行了現(xiàn)在的app都要做適應，

然后打開ps，我們放入第一張首頁未被選中（active）的圖。

  1. 創(chuàng)建幀動畫

打開窗口-時間軸-創(chuàng)建幀動畫，

第一幀初始效果，第二幀為最終顯示的效果，

第一幀用圖層一，第二幀用圖層二并且圖層二放入我們最終效果圖，這樣直接gif是鬼畜感沒有任何絲滑感，做原生app要的就是絲滑，進入下一步。

  1. 創(chuàng)建過渡動畫

我們總共有兩個動畫效果，一個是房子從小變大，另一個是笑臉微笑，微笑，微笑起來。

先做房子從小變大，增加一個第二幀等比縮小一個紅色小房子的圖層，然后點擊過渡動畫幀，

這里數(shù)值我們寫15，數(shù)值越大越絲滑但是時間也越長合適就行了，播放了一遍雖然絲滑但是不是我想要的效果，看來做到這效果害的視頻關鍵幀。

  1. 創(chuàng)建視頻關鍵幀

視頻時間軸這里我們刪除掉小房子這層因為用不上了，我把圖層重新命名了下方便大家看，

然后對紅房子這里開始的地方創(chuàng)建變換關鍵幀，這是起的位置創(chuàng)建一個，尾部位置再創(chuàng)建一個，

由于起的時候我們需要房子從小變大，所以把起的關鍵幀的房子變成小房子。

微笑也是同理可得，好來看看我們的效果吧，

ok滿意，可能還要對速度和顏色以及起點的白房子進行調(diào)整下這樣看著合理，做完后可以交給安卓工程師了，等我們這一版app的demo上線大家可以去觀摩下。

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定