Android屬性動畫


  自Android 3.0版本開始,系統給我們提供了一種全新的動畫模式,屬性動畫(property animation),它的功能非常強大,彌補了之前補間動畫的一些缺陷,幾乎是可以完全替代掉補間動畫了。

屬性動畫與補間動畫的區別

最大的區別是補間動畫就算控件移動到任何位置,控件本身位置還是不變。而屬性動畫是直接改變控件的位置。

屬性動畫資源文件的常用屬性

propertyName屬性。動畫類型名字

l "rotation" 自身平面旋轉

l "rotationX" 3D翻轉 X軸不變

l "rotationY" 3D翻轉 Y軸不變

l "alpha" 透明度

l "scaleX" 縮放

l "scaleY" 縮放

l "translationY" Y軸上移動

l "translationX" X軸上橫向移動

現在通過一個案例來更了解屬性動畫的基本用法。

資源文件布局:

 

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_my_animator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background_star"
tools:context="com.jogger.propertiesanim.MyAnimator">

<ImageView
android:visibility="invisible"
android:id="@+id/iv_star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="@drawable/star"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="45dp"
android:text="輕觸屏幕開始動畫"
android:textColor="@color/colorPrimary"
android:textSize="20sp"/>
</RelativeLayout>

代碼:
public class MyAnimator extends AppCompatActivity {

private RelativeLayout activity_my_animator;
private ImageView iv_star;
private TextView tv_msg;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my_animator);
activity_my_animator = (RelativeLayout) findViewById(R.id.activity_my_animator);
iv_star = (ImageView) findViewById(R.id.iv_star);
activity_my_animator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//showStarAnim1();//對角線平移、縮放
//showStarAnim2();//平移--->縮放--->旋轉並透明--->使用動畫集
//showStarAnim3();//透明、旋轉、平移
}
});
}

private void showStarAnim3() {
iv_star.setVisibility(View.VISIBLE);
iv_star.animate().alpha(0.1f).rotation(360).translationX(-400).setDuration(3000).start();
}

private void showStarAnim2() {
iv_star.setVisibility(View.VISIBLE);
//設置平移動畫
ObjectAnimator transXAnim = ObjectAnimator.ofFloat(iv_star, "translationX", 0, -400);
transXAnim.setDuration(5000);
//設置縮放動畫
ObjectAnimator scaleXAnim = ObjectAnimator.ofFloat(iv_star, "scaleX", 0.2f, 1);
scaleXAnim.setDuration(3000);
ObjectAnimator scaleYAnim = ObjectAnimator.ofFloat(iv_star, "scaleY", 0.2f, 1);
scaleYAnim.setDuration(3000);
//設置旋轉動畫
ObjectAnimator rotateAnim = ObjectAnimator.ofFloat(iv_star, "rotation", 0, 360);
rotateAnim.setDuration(3000);
//set.play(transXAnim).before(rotateAnim).after(scaleXAnim).with(scaleYAnim);
AnimatorSet set = new AnimatorSet();
//平移--->縮放--->旋轉(縮放在旋轉之前,平移之后)
set.play(scaleXAnim).with(scaleYAnim).before(rotateAnim).after(transXAnim);
rotateAnim.addListener(new AnimatorListenerAdapter() {//添加動畫監聽
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
ObjectAnimator alphaAnim=ObjectAnimator.ofFloat(iv_star,"alpha",1,0.1f);
alphaAnim.setDuration(3000);
alphaAnim.start();
}
});
set.start();
}

private void showStarAnim1() {
iv_star.setVisibility(View.VISIBLE);
int endX = getResources().getDisplayMetrics().widthPixels - iv_star.getMeasuredWidth();
//設置X軸平移量
int endY = getResources().getDisplayMetrics().heightPixels - iv_star.getMeasuredHeight()
* 2;
//設置Y軸平移量
PropertyValuesHolder transXHolder = PropertyValuesHolder.ofFloat("translationX", 0, -endX);
PropertyValuesHolder transYHolder = PropertyValuesHolder.ofFloat("translationY", 0, endY);
PropertyValuesHolder scaleXHolder=PropertyValuesHolder.ofFloat("scaleX",1,0);
PropertyValuesHolder scaleYHolder=PropertyValuesHolder.ofFloat("scaleY",1,0);
ObjectAnimator objectAnimator=ObjectAnimator.ofPropertyValuesHolder(iv_star,transXHolder,transYHolder,scaleXHolder,scaleYHolder);
objectAnimator.setDuration(3000);
objectAnimator.start();//播放完后,圖片會回到原來的位置
}

}
這個代碼塊提供了3個演示屬性動畫的3個方法,效果如下:
showStarAnim1()的效果:

showStarAnim2()的效果:

showStarAnim3()的效果:

方法一使用的是PropertyValuesHolder,調用ofFloat()方法,參數一傳入要操作的屬性,參數二和參數三分別表示操作量的變化,然后使用objectAnimator對象的ofPropertyValuesHolder方法,傳入要作用的對象,這里即星型圖片,后面接的是可變參數,再把之前設置的PropertyValuesHolder放入即可。這個方法播放的動畫結束后控件會回到最初的位置。
方法二使用的是set集合,通過ObjectAnimator的ofFloat()方法傳入三個參數,分別表示作用的對象、操作屬性、操作量的變化。然后創建AnimatorSet對象,通過play()、with()、before()、after()等方法對動畫效果進行控制,后面的方法均以play()里的對象為准,這里要展示的效果是平移--->縮放--->旋轉並透明,透明並不能直接使用with()加到旋轉后面,因為都是以play里的對象(這里是縮放)為准的,所以如果放后面,為跟着縮放的同時一起播放,因此,要達到要求的效果,需要在旋轉動畫時添加監聽,在旋轉動畫開始時去播放透明動畫。

方法三是直接使用操作對象的animate()方法去調用要操作的動畫,這樣可以滿足一些簡單的操作需求,動畫是同時播放的,並且不能設置初始值,一切初始值均以控件對象本身為准。

屬性動畫的xml文件實現:

第一步:在res/animator目錄下創建文件anim_file.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"

   

android:ordering="sequentially">

<!--動畫執行順序 sequentially:順序執行;together:同時執行。 -->

 

    <objectAnimator

        android:propertyName="translationX"

        android:valueFrom="0"

        android:valueTo="200"

   android:duration="2000"

 

        android:valueType="floatType" />

 

    <set android:ordering="together">

        <objectAnimator

            android:propertyName="scaleX"

            android:valueFrom="1"

            android:valueTo="2"

 android:duration="2000"

 

            android:valueType="floatType" />

        <objectAnimator

            android:propertyName="rotationX"

            android:valueFrom="0"

            android:valueTo="90"

 android:duration="2000"

 

            android:valueType="floatType" /><!--動畫值的類型-->

    </set>

</set>

第二步,在代碼中加載動畫文件

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file);  

animator.setTarget(view);  

animator.start();  

 

ordering表示的時播放方式,有按順序播放和同時播放兩種方式,propertyName即設置操作的屬性,之后只需在代碼塊通過AnimatorInflater.loadAnimator加載屬性動畫的資源文件,用setTarget()方法設置到用作用的控件對象,在start()播放即可。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM