十分鐘搞定酷炫動畫,Android自定義 View 入門

2021-02-18 非著名程式設計師

【回復「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 開發的每一個技術乾貨。長按圖片二維碼識別或者各大應用市場搜索「掘金」,技術乾貨盡在掌握中。


點擊閱讀原文,了解詳情。

相關焦點

  • Android View 動畫
    --android:animation="@anim/item_animation_from_bottom」-->    <!--定義布局中的每個item所要應用的動畫-->    <!--android:animationOrder="normal"-->    <!
  • Android 自定義 view 動畫按鈕
    這個View用到的知識點比較簡單:view的坐標系知識,(大家沒有不熟悉的吧)view的canvas基本API(畫矩形,畫扇形,)view的自定義屬性(attr提供選項)>屬性動畫的知識(老生常談的知識,ObjectAnimation和ValueAniamtion)下面我們就一步步實現這個button我們寫一個自定義的類繼承View實現其構造,在構造函數中獲取自定義屬性的值
  • Android 中的轉場動畫及兼容處理
    定義轉場動畫在 res/ 目錄下創建了 transition 資源文件夾後,就可以在該文件夾下對每一種動畫進行定義。一般來說,對 Activity 定義一個過渡動畫可以寫成下面的形式:標籤裡面定義需要轉場(或者不需要轉場)的目標 id ,這個 id 可以使系統自帶的,也可以是我們自己視圖中的 view 的 id,每一個 id 需要單獨在 標籤中定義,android:targetId 表示目標ID需要進行過渡轉換的 view,而 android:excludeId 表示我們不需要該 ID 的 view 進行過渡轉場。
  • 高逼格Android轉場動畫
    3、同一個activity中的view的動畫效果。下面分別詳細的介紹這三種方式。1、兩個activity之間切換時界面的過渡效果兩個activity切換時的,有兩個動畫,如下圖,從activity A 切換到activity B時,會有A的退出動畫和B的進入動畫。
  • Android Notes|BottomNavigationView 愛上 Lottie
    而關於選中狀態切換時,對應標題字體大小發生改變以及導航欄高度,都可以通過在 dimens 定義如下解決:    <!     *     * @param view the view to set the tooltip text on     * @param tooltipText the tooltip text     */    public static void setTooltipText(@NonNull View view, @Nullable CharSequence
  • Android自定義View-視圖動畫
    ="50%" * android:repeatCount="infinite" * android:repeatMode="reverse" * android:toXScale="0.5" * android:toYScale="0.5"> * </scale> *  * 完成一次動畫的持續時間,單位毫秒 * 動畫結束後
  • Android之屬性動畫Animator
    Android 3.0之前已有動畫框架Animation(詳見:Android之視圖動畫Animation),但存在一些局限性,當某個元素發生視圖動畫後,其響應事件位置還在動畫前的地方。於是3.0之後,Google提出了屬性動畫。
  • Android動畫:這些補間動畫的使用你必須要了解!
    4.1 XML設置方式步驟1:在 res/anim的文件夾裡創建動畫效果.xml文件:view_animation.xml步驟2:根據 不同動畫效果的語法 設置 不同動畫參數,從而實現動畫效果。平移動畫效果設置具體如下:<?xml version="1.0" encoding="utf-8"?
  • Android 自定義錄音、播放動畫View,讓你的錄音浪起來
    for Android: 一個Facebook的高效的聲明式UI框架Android架構之App 模塊化實戰經驗總作者:BlinCheng (下載地址:點擊文末「閱讀原文」)地址:http://blog.csdn.net/qq_25867141最近公司項目有一個錄音的錄製和播放動畫需求
  • Android 轉場動畫
    聲明轉載自:顏家大少原文連結:https://juejin.im/post/5b0e8554f265da08ed7a15d1轉載已獲得作者授權,如需轉載請聯繫原作者轉場動畫: 是Android L 引入的動畫效果, 可以說是api19引入的場景(Scene)動畫的擴展. 使開發者更加方便的實現布局(界面)變化時候的過渡動畫.
  • 一個炫酷的SearchView動畫庫
    假期結束,各位收收心,來看看今天推薦給大家的一個SearchView動畫庫吧,簡直酷炫。
  • 自定義通過PopupWindow實現通用菜單
    會經常用戶到菜單選項提供給用戶選擇,例如選擇圖片,圖庫和相機選擇等一系列場景吧,根據為了以後更加方便使用通過自定義封裝了一個菜單,主要是通過一個列表展示,將菜單項列表傳入設置參數就可以顯示,使用方便簡單只需要幾行代碼就可以,可以顯示在底部,居中和某個控制項的下方。
  • Android屬性動畫:這是一份全面 & 詳細的核心使用類ObjectAnimator學習攻略
    /set_animation.xmlset_animation.xml// ObjectAnimator 採用<animator> 標籤<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:valueFrom
  • Android幀動畫和補間動畫看這篇足夠了
    你可能還對我上面所說的第二種使用場景表示懷疑,前幾天我看到一個應用有一個非常酷炫的效果,3D特效旋轉的畫面,請腦補一下數碼寶貝進化的樣子,我剛開始還納悶,這個用代碼怎麼實現啊,想了下我想通了,這個用幀動畫其實最好實現了,難為的可能就是設計師了( 那可就不關能怪我推責任了哦~)。介紹完了應用場景,那現在就應該來介紹到底如何在代碼中使用了。
  • 3分鐘搞定酷炫PPT動畫,這是一種怎樣的體驗!
    「不敢用」  前面解釋了「為什麼我們喜歡PPT中的動畫」的三個原因,很多人喜歡動畫,而往往在PPT中絕大多數人很少用動畫,甚至出現不敢加動畫。為了能夠把自己喜歡的動畫很好運用到PPT中,你需要明白自己「不敢用」的根源。
  • 如何實現高逼格轉場動畫?
    3、同一個activity中的view的動畫效果。下面分別詳細的介紹這三種方式。1、兩個activity之間切換時界面的過渡效果兩個activity切換時的,有兩個動畫,如下圖,從activity A 切換到activity B時,會有A的退出動畫和B的進入動畫。
  • GitHub Top 100的Android開源庫
    AndroidViewAnimations開發者是代碼家, 這個庫實現很多很酷炫的 Android 動畫, 動畫效果是借鑑 Animate.css 來實現的, 非常酷, 而且這個使用起來也是非常簡單33.
  • Android 有近10種動畫,你都知道嗎?
    屬性動畫上手難度較高,對於 propertyName 需要自己去挖掘,或者自己通過 Wrapper 的方式去自定義 propertyName。屬性動畫是 Android3.0 以上系統提供的能力,在 3.0 以下需導入 nineoldandroids 三方庫解決兼容性問題。那屬性動畫的使用場景有哪些呢?
  • Android到底有多少種動畫?準確告訴你
    屬性動畫使用更方便,可以用更簡潔的代碼實現相關的動畫效果。屬性動畫上手難度較高,對於 propertyName 需要自己去挖掘,或者自己通過 Wrapper 的方式去自定義 propertyName。屬性動畫是 Android3.0 以上系統提供的能力,在 3.0 以下需導入 nineoldandroids 三方庫解決兼容性問題。
  • 對於Android Button,你可能並不了解
    幾個常用的方法都是繼承自該類.比起他的父類Button其實也就新增了四個布局屬性.屬性描述android:button設置一張圖片來作為顯示android:buttonTint渲染顏色android:buttonTintMode渲染模式android:checked設置為選中狀態用來重寫進行自定義控制項的方法我不夠熟悉我就不講了.