【回復「1024」,送你一個特別推送】
投稿作者:Anonymous___
原文連結:http://www.jianshu.com/p/138ad32540ce
特別聲明:本文為Anonymous___原創並授權發布,未經原作者允許請勿轉載,轉載請聯繫原作者。
前幾天 Ui 突然給我一個 gif 圖說要把這個做成啟動動畫,看到效果圖的我表示一臉懵逼。
好吧,懵逼歸懵逼,效果還是要做出來,作為一隻沒怎麼寫過動效的猿,第一反應就是讓 Ui 做成 gif 圖,然後 Ios 的哥們說 gif 圖內存大,容易失真,我們都已經用貝塞爾曲線做出來了(Ios 比我們 android 先跑半個版本)。好吧,那就手擼動效吧,寶寶不哭。
首先對著 gif 圖一幀一幀觀察了一遍,分析動畫的過程。把動畫拆解成兩部分:
四個顏色的圓運動。
Logo的出現
logo 的出現就是簡單的alpha 動畫,難點就在四個圓運動。
找 Ui 拿到了四個圓的運動軌跡,如下圖所示:
根據軌跡,我把運動軌跡拆分成平移和半圓旋轉,創建出Path路徑,再讓圓沿著 Path 運動,在運動的時候加上 alpha 和縮放的屬性,結束的時候把圓移除掉並顯示 logo 就好。
分析結束,接下來就上代碼:
第一步:創建 LauncherView 繼承 RelativeLayout,在構造方法裡面 init()添加四個顏色的圓
private void init(){
LayoutParamslp=newLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
lp.addRule(CENTER_HORIZONTAL,TRUE);//這裡的TRUE 要注意 不是true
lp.addRule(CENTER_VERTICAL,TRUE);
lp.setMargins(0,0,0,dp80);
purple=newImageView(getContext());
purple.setLayoutParams(lp);
purple.setImageDrawable(getResources().getDrawable(R.drawable.shape_circle_purple));
addView(purple);
yellow=newImageView(getContext());
yellow.setLayoutParams(lp);
yellow.setImageDrawable(getResources().getDrawable(R.drawable.shape_circle_yellow));
addView(yellow);
blue=newImageView(getContext());
blue.setLayoutParams(lp);
blue.setImageDrawable(getResources().getDrawable(R.drawable.shape_circle_blue));
addView(blue);
red=newImageView(getContext());
red.setLayoutParams(lp);
red.setImageDrawable(getResources().getDrawable(R.drawable.shape_circle_red));
addView(red);
}
ObjectAnimator動畫原理
ObjectAnimator.ofObject(….,」xxx」,估值值,區間數組); 【定義動畫屬性xxx和區間】
插值器/加速器(Interpolator)【返回當前數字進度t】
估值值(Evaluator)【根當前數字進度計算並返回當前值】
調用setXxx函數 【根據封裝好的setXxx函數並反射調用,將第三步返回當前值以參數傳入】
自定義ObjectAnimator屬性請戳這裡:http://blog.csdn.net/cxmscb/article/details/52485878
繪製四個圓圈的 Path,這裡以紅色圓圈為例,三階貝塞爾曲線描點不會的話,可以參考 Ui 的設計路徑描點,Ps 的鋼筆工具就是貝塞爾曲線。
ViewPathredPath1=newViewPath();//偏移坐標
redPath1.moveTo(0,0);
redPath1.lineTo(mWidth/5-mWidth/2,0);
ViewPathredPath2=newViewPath();
redPath2.moveTo(mWidth/5-mWidth/2,0);
redPath2.curveTo(-700,-mHeight/2,mWidth/3*2,-mHeight/3*2,0,-dp80);
setAnimation(red,redPath1,redPath2);
接下來將 Path 轉換成 ObjectAnimation
private void setAnimation(final ImageView target,ViewPath path1,ViewPath path2){
//左右平移
ObjectAnimator redAnim1=ObjectAnimator.ofObject(newViewObj(target),"fabLoc",newViewPathEvaluator(),path1.getPoints().toArray());
redAnim1.setInterpolator(newAccelerateDecelerateInterpolator());
redAnim1.setDuration(800);
//貝塞爾曲線
ObjectAnimator redAnim2=ObjectAnimator.ofObject(newViewObj(target),"fabLoc",newViewPathEvaluator(),path2.getPoints().toArray());
redAnim2.setInterpolator(newAccelerateDecelerateInterpolator());
//組合動畫
addAnimation(redAnim1,redAnim2,target);
}
然後組合動畫得到一個圓的完整運行軌跡。
private void addAnimation(ObjectAnimatoranimator1,ObjectAnimatoranimator2,ImageViewtarget){
ObjectAnimator alpha=ObjectAnimator.ofFloat(target,View.ALPHA,1f,0.5f);
ObjectAnimator scaleX=ObjectAnimator.ofFloat(target,View.SCALE_X,1,getScale(target),1.0f);
ObjectAnimator scaleY=ObjectAnimator.ofFloat(target,View.SCALE_Y,1,getScale(target),1.0f);
AnimatorSet all2=newAnimatorSet();
all2.setDuration(1800);
all2.playTogether(alpha,scaleX,scaleY,animator2);
all2.addListener(newAnimEndListener(target));
AnimatorSetall=newAnimatorSet();
all.playSequentially(animator1,all2);
all.start();
}
最後,顯示 logo 動畫
private void showLogo(){
Viewview=View.inflate(getContext(),R.layout.widget_load_view,this);
Viewlogo=view.findViewById(R.id.iv_logo);
finalViewslogo=view.findViewById(R.id.iv_slogo);
ObjectAnimatoralpha=ObjectAnimator.ofFloat(logo,View.ALPHA,0f,1f);
alpha.setDuration(800);
alpha.start();
newHandler().postDelayed(newRunnable(){
@Override
public voidrun(){
ObjectAnimator alpha=ObjectAnimator.ofFloat(slogo,View.ALPHA,0f,1f);
alpha.setDuration(200);
alpha.start();
}
},400);
}
好,到這裡,炫酷的啟動頁動畫已經擼出來了,就是一個簡單的ObjectAnimator使用,大家不要被自定義 view 這個紙老虎嚇到。
項目源碼地址:https://github.com/diamondlin2016/LauncherView
作者簡介:作者是Anonymous___,他有簡書博客,裡面有很多有質量的文章,歡迎大家點擊閱讀原文去關注和學習。
● ● ●
掘金是一個高質量的技術社區,從 RxJava 到 Android Studio,性能優化到優秀開源庫,讓你不錯過 Android 開發的每一個技術乾貨。長按圖片二維碼識別或者各大應用市場搜索「掘金」,技術乾貨盡在掌握中。
點擊閱讀原文,了解詳情。