View(3) 的屬性動畫

參考鏈接 向劉老師學習,所以摘抄了老師的筆記,只想作為自己的技術積累。

前言

View 的屬性動畫可以使其展現時更加帥氣,結合好的動畫可以優化用戶體驗。

視圖動畫

視圖動畫不具有交互性,當某個元素發生視圖動畫后,其響應事件的位置依然在動畫前的地方,所以視圖動畫只能做普通的動畫效果,避免交互的發生。但是它的優點也非常明顯:效率比較高使用也方便。

AlphaAnimationRotateAnimation,TranslateAnimation,ScaleAnimation四種動畫方式,并提供了AnimationSet動畫集合來混合使用多中動畫。

屬性動畫

由于android3.0之前已有的動畫框架Animation存在一些局限性:動畫改變的只是顯示,并不能響應事件。因此,在android3.0之后,谷歌就推出了新的動畫框架,幫助開發者實現更加豐富的動畫效果。

Animator框架中使用最多的就是AnimatorSetObjectAnimator配合,使用ObjectAnimator進行更精細化的控制,控制一個對象和一個屬性值,而使用多個ObjectAnimator組合到AnimatorSet形成一個動畫。屬性動畫通過調用屬性get,set方法來真實地控制了一個View的屬性值,因此強大的屬性動畫框架,基本可以實現所有的動畫效果。

ObjectAnimator

ObjectAnimator是屬性動畫最重要的類,創建一個ObjectAnimator只需通過他的靜態工廠類直接返還一個ObjectAnimator對象。參數包括一個對象和對象的屬性名字,但這個屬性必須有getset函數,內部會通過java反射機制來調用set函數修改對象的屬性值。
來看看平移動畫是如何實現的:

利用Java實現

ObjectAnimator mObjectAnimator=ObjectAnimator.ofFloat(view,"translationX",200);
mObjectAnimator.setDuration(300);
mObjectAnimator.start();

利用kotlin實現

        objectAnimatior = ObjectAnimator.ofFloat(mv_test, "translationX", 200.toFloat())
        objectAnimatior.duration = 3000
        objectAnimatior.start()

通過ObjectAnimator 的靜態工廠方法,創建一個ObjectAnimator 對象,第一個對象是要操作的View,第二個參數則是要操縱的屬性,最后一個參數是一個可變的數組參數,需要傳進去一個該屬性變化的一個取值的過程,這里設置了一個參數,變化到200。與視圖動畫一樣,也可以給屬性動畫設置顯示時長,差值器等屬性。在使用ObjectAnimator的時候,有一個非常重要,那就是是要操縱的屬性必須要有get,set方法,不然ObjectAnimator 就無法起效。下面就是一些常用的可以直接使用的屬性動畫的屬性值:

  • translationXtranslationY:這兩個屬性作為增量控制View對象從他的布局容器的左上角開始位置。負責View位置的改變。
  • rotationrotationXrotationY:這三個屬性控制View對象圍繞它的支點進行2D和3D旋轉。
  • PrivotXPrivotY:控制View對象的支點位置,圍繞這個支點進行旋轉和縮放變換處理。默認該支點位置就是View對象的中心點。
  • alpha:透明度,默認是1(不透明),0代表完全透明。
  • xy:描述View對象在它容器中的最終位置,它是最初的做上角坐標和translationXtranslationY值的累計的和。

如果一個屬性沒有get,set方法,也可以通過自定義一個屬性類或則包裝類來間接地給這個屬性增加get和set方法。來看看如何通過包裝類的方法給一個屬性增加get和set方法:

private static class MyView{
    private View mTarget;
    private MyView(View mTarget){
    this.mTarget=mTarget;
    }
    public int getWidth(){
        return mTarget.getLayoutParams().width;
    }
    public void setWidth(int width){
        mTarget.getLayoutParams().width=width;
        mTarget.requestLayout();
    }
}

使用時只需要操縱包類就可以調用get,set方法:

MyView mMyView=new MyView(mButton); 
ObjectAnimator.ofInt(mMyView,"width",500).setDuration(500).start();

ValueAnimator

ValueAnimator不提供任何動畫效果,它更像一個數值發生器,用來產生一定規律數字,從而讓調用者來控制動畫的實現過程。通常情況下,在ValueAnimatorAnimatorUpdateListener中監聽數值的變化,從而完成動畫的變換:

ValueAnimator mValueAnimator=ValueAnimator.ofFloat(0,100);
mValueAnimator.setTarget(view);
mValueAnimator.setDuration(1000).start();
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Float mFloat=(Float)animation.getAnimatedValue();
            }
        });
    }

我自己的Demo代碼如下:

private fun valueSimpleTest() {
    valueAnimator = ValueAnimator.ofInt(0, 400)
    valueAnimator.duration = 3000
    valueAnimator.addUpdateListener { valueAnimator ->
        val currentValue: Int = valueAnimator.animatedValue as Int
        tv_test.layout(tv_test.left, currentValue, tv_test.right, currentValue + tv_test.height)
    }
    valueAnimator.start()
}
效果圖

動畫的監聽

完整的動畫具有start,Repeat,End,Cancel四個過程:

ObjectAnimator animator=ObjectAnimator.ofFloat(view,"alpha",1.5f);
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }
            @Override
            public void onAnimationEnd(Animator animation) {
            }
            @Override
            public void onAnimationCancel(Animator animation) {
            }
            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
    }

大部分時候我們只關心onAnimationEnd事件,android也提供了AnimatorListenterAdaper來讓我門選擇必要的事件進行監聽:

ObjectAnimator animator=ObjectAnimator.ofFloat(view,"alpha",1.5f);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }
        });

組合動畫-AnimatorSet

這個類提供了一個play()方法,如果我們向這個方法中傳入一個Animator對象(ValueAnimatorObjectAnimator)將會返回一個AnimatorSet.Builder的實例,AnimatorSet.Builder中包括以下四個方法:

  • after(Animator anim) 將現有動畫插入到傳入的動畫之后執行
  • after(long delay) 將現有動畫延遲指定毫秒后執行
  • before(Animator anim) 將現有動畫插入到傳入的動畫之前執行
  • with(Animator anim) 將現有動畫和傳入的動畫同時執行
ObjectAnimator animator1 = ObjectAnimator.ofFloat(mCustomView, "translationX", 0.0f, 200.0f, 0f);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(mCustomView, "scaleX", 1.0f, 2.0f);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(mCustomView, "rotationX", 0.0f, 90.0f, 0.0F);
AnimatorSet set=new AnimatorSet();
set.setDuration(1000);
set.play(animator1).with(animator2).after(animator3);
set.start();

首先我們創建三個ObjectAnimator,分別是animator1、animator2和animator3。然后創建AnimatorSet,在這里我們先執行animator3,然后同時執行animator1和animator2的動畫,當然也可以調用set.playTogether(animator1,animator2);來使這兩種動畫同時執行。

我的例子代碼如下:

private fun animationSet() {
   val animator1 = ObjectAnimator.ofFloat(tv_test, "translationX", 0.0f, 200.0f, 0f)
   val animator2 = ObjectAnimator.ofFloat(tv_test, "scaleX", 1.0f, 2.0f)
    val animator3 = ObjectAnimator.ofFloat(tv_test, "rotationX", 0.0f, 90.0f, 0.0f)
    val set = AnimatorSet()
    set.duration = 1000
    set.play(animator1).with(animator2).after(animator3)
    set.start()
}
效果圖

組合動畫-PropertyValuesHolder

除了上面AnimatorSet類還可以使用PropertyValuesHolder類來實現組合動畫,不過這個組合動畫就沒有上面的豐富了,使用PropertyValuesHolder類只能多個動畫一起執行。當然我們得結合ObjectAnimator.ofPropertyValuesHolder(Object target,PropertyValuesHolder… values);方法來使用。第一個參數是動畫的目標對象,之后的參數是PropertyValuesHolder類的實例,可以有多個這樣的實例。代碼如下:

PropertyValuesHolder valuesHolder1 = PropertyValuesHolder.ofFloat('scaleX', 1.0f, 1.5f);
PropertyValuesHolder valuesHolder2 = PropertyValuesHolder.ofFloat('rotationX', 0.0f, 90.0f, 0.0F);
PropertyValuesHolder valuesHolder3 = PropertyValuesHolder.ofFloat('alpha', 1.0f, 0.3f, 1.0F);
ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(imageView,  valuesHolder1, valuesHolder2, valuesHolder3);
objectAnimator.setDuration(2000).start();

這個不難,偷個懶。

xml中使用屬性動畫

和視圖動畫一樣,屬性動畫也可以直接寫在xml中:
在res文件中新建animator文件,在里面新建一個scale.xml,里面的內容如下:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:duration="1000"
    android:propertyName="scaleX"
    android:valueFrom="1.0"
    android:valueTo="2.0"
    android:valueType="floatType"
    >
</objectAnimator>

程序中引用xml定義的屬性動畫:

Animator animator=AnimatorInflater.loadAnimator(this,R.animator.scale);
animator.setTarget(view);
animator.start();

我的實現代碼如下:

private fun moveViaAnimation() {
    // 使用動畫使其位移
    mv_test.animation = AnimationUtils.loadAnimation(this, R.anim.translate)
    ObjectAnimator.ofFloat(mv_test, "translationX", 0.toFloat(), 300.toFloat()).setDuration(1000).start()
}
效果圖

源碼鏈接

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,048評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,414評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,169評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,722評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,465評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,823評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,813評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,000評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,554評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,295評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,513評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,722評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,125評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,430評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,237評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,482評論 2 379

推薦閱讀更多精彩內容