本文伊凡投稿一顆優(yōu)雅草科技，僅代表伊凡個(gè)人觀點(diǎn)，優(yōu)雅草科技?xì)g迎大家投稿

我們要做的效果是如下，就像這個(gè)app一樣底部的每個(gè)菜單點(diǎn)擊是有動(dòng)畫的：

編輯

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

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

編輯切換為居中

1，準(zhǔn)備工作

下載好藍(lán)湖ui設(shè)計(jì)師做好的圖，選擇最大的就行了現(xiàn)在的app都要做適應(yīng)，

編輯切換為居中

編輯切換為居中

編輯切換為居中

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

1. 創(chuàng)建幀動(dòng)畫 打開窗口-時(shí)間軸-創(chuàng)建幀動(dòng)畫，

編輯切換為居中

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

編輯切換為居中

1. 創(chuàng)建過渡動(dòng)畫 我們總共有兩個(gè)動(dòng)畫效果，一個(gè)是房子從小變大，另一個(gè)是笑臉微笑，微笑，微笑起來。 先做房子從小變大，增加一個(gè)第二幀等比縮小一個(gè)紅色小房子的圖層，然后點(diǎn)擊過渡動(dòng)畫幀，

編輯切換為居中

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

編輯切換為居中

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

視頻時(shí)間軸這里我們刪除掉小房子這層因?yàn)橛貌簧狭?，我把圖層重新命名了下方便大家看，

編輯切換為居中

編輯切換為居中

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

編輯切換為居中

由于起的時(shí)候我們需要房子從小變大，所以把起的關(guān)鍵幀的房子變成小房子。

編輯切換為居中

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

編輯

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