安卓補間動畫屬性學會這些平時的開發足夠了

體系結構

objectAnimator extend ValueAnimator extend Animator implement Cloneable

1屬性動畫

平移動畫

<span>		</span>//給button設置x軸平移動畫,從100開始到200,再到300,
                ObjectAnimator transX = ObjectAnimator.ofFloat(button, "translationX", 100f, 200f, 300f);
                transX.setDuration(2000);//時間2秒
                transX.setRepeatCount(1);//重複一次,總共兩次
                transX.setRepeatMode(ObjectAnimator.RESTART);//重複播放時從頭開始再次播放
                transX.start();//開始

平移方向:由ofFloat的第二個參數決定:

translationX爲x軸,<pre name="code" class="java">translationY爲y軸方向

平移距離怎麼確定

相對於控件的中心點,向上或者向下移動**像素

移動完之後會不會回到原來位置

不會,可以在後面繼續加數值,比如先移動到100,再移動到0就會回到原點,<span style="color:#ff0000;">移動後控件的位置發生永久改變</span>

縮放動畫

<span style="white-space:pre">		</span>ObjectAnimator scaleX = ObjectAnimator.ofFloat(button2, "scaleX", 1f, 0f, 1f);
                button2.setPivotX(5000);
               <span style="color:#ff0000;">//加入這句代碼可以控制以x方向500點出豎直線爲中心縮放,x軸縮放就給控件設置pivotX,y軸縮放就給控件設置pivotY</span>
                scaleX.setDuration(2000);
                scaleX.setRepeatCount(1);
                scaleX.setRepeatMode(ObjectAnimator.RESTART);
                scaleX.start();

默認相對於那條線縮放,不可以相對於某一點縮放,要實現此方法可以用x軸縮放和y軸動畫的set動畫來實現

參數爲scaleX,軸線爲過控件中心點的水平線
參數爲scaleY,軸線爲過控件中心點的豎直線

透明動畫

 <span style="white-space:pre">		</span>ObjectAnimator alpha = ObjectAnimator.ofFloat(button4, "alpha", 0f, 1f);//取值是0f-1f
                alpha.setDuration(2000);
                alpha.setRepeatCount(1);
                alpha.setRepeatMode(ObjectAnimator.RESTART);
                alpha.start();

旋轉動畫

<span style="white-space:pre">		</span>ObjectAnimator rotationX = ObjectAnimator.ofFloat(button3, "rotationX", 0f, 360f);//角度值
                rotationX.setDuration(2000);
                rotationX.setRepeatCount(1);
                rotationX.setRepeatMode(ObjectAnimator.RESTART);
                rotationX.start();

相對於誰旋轉

參數爲<span style="font-family: Arial, Helvetica, sans-serif;">rotationX</span><span style="font-family: Arial, Helvetica, sans-serif;">,軸線爲過控件中心點的水平線</span>
參數爲<span style="font-family: Arial, Helvetica, sans-serif;">rotationY</span><span style="font-family: Arial, Helvetica, sans-serif;">,軸線爲過控件中心點的豎直線</span>

相對於某個點旋轉第二個參數設置成rotation,後面加x就是在x軸方向上旋轉,加y就是在y軸方向上旋轉

  <span style="white-space:pre">		</span>ObjectAnimator rotationY = ObjectAnimator.ofFloat(button5, "<span style="color:#ff0000;">rotation</span>", 0f, 180f);
                rotationY.setDuration(2000);
                rotationY.setRepeatCount(1);
                button5.setPivotX(0);
                button5.setPivotY(0);//相對於00點旋轉
                rotationY.setRepeatMode(ObjectAnimator.RESTART);
                rotationY.start();

組合動畫

  • after(Animator anim)   將現有動畫插入到傳入的動畫之後執行
  • after(long delay)   將現有動畫延遲指定毫秒後執行
  • before(Animator anim)   將現有動畫插入到傳入的動畫之前執行
  • with(Animator anim)   將現有動畫和傳入的動畫同時執行

<span style="white-space:pre">		</span>ObjectAnimator alpha1 = ObjectAnimator.ofFloat(button7, "alpha", 0f, 1f);
                alpha1.setDuration(2000);
                alpha1.setRepeatMode(ObjectAnimator.RESTART);
                ObjectAnimator scale1 = ObjectAnimator.ofFloat(button7, "scaleY", 0f, 1f);
                scale1.setDuration(2000);
                scale1.setRepeatMode(ObjectAnimator.RESTART);
                ObjectAnimator scale2 = ObjectAnimator.ofFloat(button7, "scaleX", 0f, 1f);
                scale2.setDuration(2000);
                scale2.setRepeatMode(ObjectAnimator.RESTART);
                AnimatorSet set = new AnimatorSet();
                <span style="color:#ff0000;">//先停3秒,一起縮放,最後透明//可以使用playTogether<span style="font-size: 14px; line-height: 30px; background-color: rgb(245, 248, 253);">(Animator… items)</span>方法讓所有動畫一起執行//</span><span style="font-family: 宋體; font-size: 9.7pt; color: rgb(255, 0, 0); background-color: rgb(217, 230, 255);">playSequentially<span style="font-family: monospace; font-size: 14px; line-height: 30px; text-indent: 28px; background-color: rgb(245, 248, 253);">(Animator… items)</span>可以讓動畫順序執行</span><span style="color:#ff0000;">
                //注意:下面的代碼中動畫不能重複,否則報錯,每個動畫可以單獨設置屬性,實現差異化,也可以set中一次性全部設置</span>
                set.play(scale1).with(scale2).after(3000).before(alpha1);
                set.start();

xml實現屬性動畫

<?xml version="1.0" encoding="utf-8"?><!-<span style="font-family: Arial, Helvetica, sans-serif;">R.animator.animator1</span><span style="font-family: Arial, Helvetica, sans-serif;">的內容如下-></span>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="2000"
        android:propertyName='scaleX'
        android:valueFrom='1'
        android:valueTo='2'
        android:valueType='floatType'/>
    <objectAnimator
        android:duration="1000"
        android:propertyName='rotation'
        android:valueFrom='0'
        android:valueTo='180'
        android:valueType='floatType'/>
</set>
 <span style="white-space:pre">		</span>Animator animator = AnimatorInflater.loadAnimator(getApplicationContext(), R.animator.animator1);
                button8.setPivotX(0);
                button8.setPivotY(0);
                animator.setTarget(button8);
                animator.start();

2.補間動畫

平移動畫

<span style="white-space: pre;"></span><pre style="font-family: 宋體; font-size: 9.7pt; background-color: rgb(255, 255, 255);"><span style="color: rgb(128, 128, 128); "><em>//或者TranslateAnimation translateAnimation = new TranslateAnimation(0, 100, 0, 100);</em></span><span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;">		</span>


TranslateAnimation translateAnimation = new TranslateAnimation(
                        Animation.RELATIVE_TO_SELF, 0,
                        Animation.RELATIVE_TO_SELF, 1,
                        Animation.RELATIVE_TO_SELF, 0,
                        Animation.RELATIVE_TO_SELF, 1);
                translateAnimation.setDuration(2000);
                translateAnimation.setRepeatMode(Animation.REVERSE);
                translateAnimation.setRepeatCount(1);
                button.startAnimation(translateAnimation);
                //這句代碼,相當於先setAnimation然後再start

縮放動畫

   		ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1);//默認相對於本身縮放,相對於0,0點縮放,而且xy軸可以同時縮放
                ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,300,100);//此時相對於本身,並且縮放的中心點是300,100,x軸從0-1,y軸從0-1,
		//比較靈活,可以設置參數,調節那個方向上縮放,縮放比例也可以不同
            	/*ScaleAnimation scaleAnimation = new ScaleAnimation(
                        0,1,//x軸,從0-1
                        0,1,//y軸,從0-1
                        Animation.RELATIVE_TO_SELF,2, //x方向上相對於本身縮放,
                        Animation.RELATIVE_TO_PARENT ,0.5f //y方向上相對於父控件縮放,相對於自己2倍*父控件的0.5倍的點開始縮放
                );//此方法不常用,不多介紹*/
                scaleAnimation.setDuration(2000);
                scaleAnimation.setRepeatMode(Animation.REVERSE);//重複模式,反轉
                scaleAnimation.setRepeatCount(1);
                button2.startAnimation(scaleAnimation);

透明動畫

<span style="font-size:14px;"><span style="white-space:pre">		</span>AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
                alphaAnimation.setDuration(2000);
                button3.startAnimation(alphaAnimation);</span>

旋轉動畫

<span style="font-size:14px;">                RotateAnimation rotateAnimation = new RotateAnimation(0, 360, 100, 200);//相對於100,200旋轉
                rotateAnimation.setDuration(2000);
                button3.startAnimation(rotateAnimation);</span>

組合動畫,add到set中再啓動動畫

<span style="font-size:14px;"> <span style="white-space: pre;">		</span>AlphaAnimation alphaAnimation1 = new AlphaAnimation(0,1);
                alphaAnimation1.setDuration(2000);
                RotateAnimation rotateAnimation1 = new RotateAnimation(0, 360, 100, 200);//相對於100,200旋轉
                rotateAnimation1.setDuration(2000);
                AnimationSet animationSet = new AnimationSet(true);
                animationSet.addAnimation(alphaAnimation1);
                animationSet.addAnimation(rotateAnimation1);
                button7.startAnimation(animationSet);</span>

xml實現動畫

<span style="font-size:14px;"><span style="white-space:pre">		</span>Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim1);
                button8.startAnimation(animation);</span>
<span style="font-size:14px;">R.anim.anim1內容如下:</span><pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="false" >
    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="100%"
        android:pivotY="50%"
        android:toXScale="2"
        android:toYScale="2"
        android:duration="2000"/>
    <rotate
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:duration="2000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="720" >
    </rotate>
</set>


3.兩種動畫比較

屬性動畫控件會永久改變位置,而補間動畫不會

縮放動畫用補間動畫顯然更加方便

補間動畫一個動畫可以給多個控件使用,而屬性動畫不是很方便

Android 屬性動畫使用解析-屬性動畫基本用法此文中有詳細說明,在此簡單總結一下

1.屬性動畫是Android3.0引入了一個新的動畫,如果想要在低版本上面使用屬性動畫,可以使用第三方 NineOldAndroids jar包,屬性動畫功能相當強大,幾乎可以完全替換掉以前所講的幀動畫了。

2.View Animation僅僅作用於View,在Android補間動畫Tween Animation使用解析文章開始就已經介紹了,並且它只對View部分屬性有效果,如果我們想要改變一個View的背景色,補間動畫是做不到的。也就是說用屬性動畫不僅僅是視覺上的改變,控件的實際值也改變了,包括他的高,寬等都是實實在在的更改了;

開發中根據二者對比去選擇,一般來說兩者都可以勝任

附錄1屬性動畫代碼(全)

package com.z.ani;

import android.animation.Animator;
import android.animation.AnimatorInflater;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class AnimatorActivity extends AppCompatActivity implements View.OnClickListener {
    private android.widget.Button button;
    private android.widget.Button button2;
    private android.widget.Button button3;
    private android.widget.Button button4;
    private android.widget.Button button5;
    private android.widget.Button button6;
    private android.widget.Button button7;
    private android.widget.Button button8;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animator);
        this.button8 = (Button) findViewById(R.id.button8);
        this.button7 = (Button) findViewById(R.id.button7);
        this.button6 = (Button) findViewById(R.id.button6);
        this.button5 = (Button) findViewById(R.id.button5);
        this.button4 = (Button) findViewById(R.id.button4);
        this.button3 = (Button) findViewById(R.id.button3);
        this.button2 = (Button) findViewById(R.id.button2);
        this.button = (Button) findViewById(R.id.button);
        button8.setOnClickListener(this);
        button7.setOnClickListener(this);
        button6.setOnClickListener(this);
        button5.setOnClickListener(this);
        button4.setOnClickListener(this);
        button3.setOnClickListener(this);
        button2.setOnClickListener(this);
        button.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                //給button設置x軸平移動畫,從100開始到200,再到300,
                ObjectAnimator transX = ObjectAnimator.ofFloat(button, "translationX", 100f, 200f, 300f);
                transX.setDuration(2000);//時間2秒
                transX.setRepeatCount(1);//重複一次,總共兩次
                transX.setRepeatMode(ObjectAnimator.RESTART);//重複播放時從頭開始再次播放
                transX.start();//開始
                break;
            case R.id.button2:

                ObjectAnimator scaleX = ObjectAnimator.ofFloat(button2, "scaleX", 1f, 0f, 1f);
                button2.setPivotX(500);
                scaleX.setDuration(2000);
                scaleX.setRepeatCount(1);
                scaleX.setRepeatMode(ObjectAnimator.RESTART);
                scaleX.start();
                break;
            case R.id.button3:

                ObjectAnimator rotationX = ObjectAnimator.ofFloat(button3, "rotationX", 0f, 360f);
                button3.setPivotX(0);
                button3.setPivotY(0);
                rotationX.setDuration(2000);
                rotationX.setRepeatCount(1);
                rotationX.setRepeatMode(ObjectAnimator.RESTART);
                rotationX.start();
                break;
            case R.id.button4:
                ObjectAnimator alpha = ObjectAnimator.ofFloat(button4, "alpha", 0f, 1f);
                alpha.setDuration(2000);
                alpha.setRepeatCount(1);
                alpha.setRepeatMode(ObjectAnimator.RESTART);
                alpha.start();
                break;
            case R.id.button5:
                ObjectAnimator rotationY = ObjectAnimator.ofFloat(button5, "rotation", 0f, 180f);
                rotationY.setDuration(2000);
                rotationY.setRepeatCount(1);
                button5.setPivotX(0);
                button5.setPivotY(0);
                rotationY.setRepeatMode(ObjectAnimator.RESTART);
                rotationY.start();
                break;
            case R.id.button6:
                ObjectAnimator scaleY = ObjectAnimator.ofFloat(button6, "scaleY", 0f, 1f);
                scaleY.setDuration(2000);
                scaleY.setRepeatCount(1);
                button6.setPivotY(0);
                scaleY.setRepeatMode(ObjectAnimator.RESTART);
                scaleY.start();
                break;
            case R.id.button7:
                ObjectAnimator alpha1 = ObjectAnimator.ofFloat(button7, "alpha", 0f, 1f);
                alpha1.setDuration(2000);
                alpha1.setRepeatMode(ObjectAnimator.RESTART);
                ObjectAnimator scale1 = ObjectAnimator.ofFloat(button7, "scaleY", 0f, 1f);
                scale1.setDuration(2000);
                scale1.setRepeatMode(ObjectAnimator.RESTART);
                ObjectAnimator scale2 = ObjectAnimator.ofFloat(button7, "scaleX", 0f, 1f);
                scale2.setDuration(2000);
                scale2.setRepeatMode(ObjectAnimator.RESTART);
                AnimatorSet set = new AnimatorSet();
                //先挺3秒,一起縮放,最後透明
                //注意:下面的代碼中動畫不能重複,否則報錯
                set.play(scale1).with(scale2).after(3000).before(alpha1);
                set.start();
                break;
            case R.id.button8:
                Animator animator = AnimatorInflater.loadAnimator(getApplicationContext(), R.animator.animator1);
                button8.setPivotX(0);
                button8.setPivotY(0);
                animator.setTarget(button8);
                animator.start();
                break;
            default:
                break;
        }

    }
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="com.z.ani.AnimationActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="平移"
        android:id="@+id/button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="縮放"
        android:id="@+id/button2"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="旋轉"
        android:id="@+id/button3"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="透明"
        android:id="@+id/button4"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Y軸旋轉"
        android:id="@+id/button5"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Y軸縮放"
        android:id="@+id/button6"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="先挺3秒,xy軸一起縮放,最後來個透明"
        android:id="@+id/button7"/>

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="xml方式動畫"/>
</LinearLayout>

附錄2,補間動畫(全,上面是Activity,下面是xml代碼)
package com.z.ani;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;

public class AnimationActivity extends AppCompatActivity implements View.OnClickListener {

    private android.widget.Button button;
    private android.widget.Button button2;
    private android.widget.Button button3;
    private android.widget.Button button4;
    private android.widget.Button button5;
    private android.widget.Button button6;
    private android.widget.Button button7;
    private android.widget.Button button8;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animator);
        this.button8 = (Button) findViewById(R.id.button8);
        this.button7 = (Button) findViewById(R.id.button7);
        this.button6 = (Button) findViewById(R.id.button6);
        this.button5 = (Button) findViewById(R.id.button5);
        this.button4 = (Button) findViewById(R.id.button4);
        this.button3 = (Button) findViewById(R.id.button3);
        this.button2 = (Button) findViewById(R.id.button2);
        this.button = (Button) findViewById(R.id.button);
        button8.setOnClickListener(this);
        button7.setOnClickListener(this);
        button6.setOnClickListener(this);
        button5.setOnClickListener(this);
        button4.setOnClickListener(this);
        button3.setOnClickListener(this);
        button2.setOnClickListener(this);
        button.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
//                TranslateAnimation translateAnimation = new TranslateAnimation(0, 100, 0, 100);
                TranslateAnimation translateAnimation = new TranslateAnimation(
                        Animation.RELATIVE_TO_SELF, 0,
                        Animation.RELATIVE_TO_SELF, 1,
                        Animation.RELATIVE_TO_SELF, 0,
                        Animation.RELATIVE_TO_SELF, 1);
                translateAnimation.setDuration(2000);
                translateAnimation.setRepeatMode(Animation.REVERSE);
                translateAnimation.setRepeatCount(1);
                button.startAnimation(translateAnimation);
                //這句代碼,相當於先setAnimation然後再start
                break;
            case R.id.button2:
//                ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1);//默認相對於本身縮放,相對於0,0點縮放,而且xy軸可以同時縮放
                ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1, 300, 100);//此時相對於本身,並且縮放的中心點是300,100,x軸從0-1,y軸cong0-1
            /*    ScaleAnimation scaleAnimation = new ScaleAnimation(
                        0,1,//x軸,從0-1
                        0,1,//y軸,從0-1
                        Animation.RELATIVE_TO_SELF,2, //x方向上相對於本身縮放,
                        Animation.RELATIVE_TO_PARENT ,0.5f //y方向上相對於父控件縮放,相對於自己2倍*父控件的0.5倍的點開始縮放
                );//此方法不常用,不多介紹*/
                scaleAnimation.setDuration(2000);
                scaleAnimation.setRepeatMode(Animation.REVERSE);//重複模式,反轉
                scaleAnimation.setRepeatCount(1);
                button2.startAnimation(scaleAnimation);
                break;
            case R.id.button3:
//                RotateAnimation rotateAnimation = new RotateAnimation(0, 360);//默認相對於0,0點旋轉
                RotateAnimation rotateAnimation = new RotateAnimation(0, 360, 100, 200);//相對於100,200旋轉
                rotateAnimation.setDuration(2000);
                button3.startAnimation(rotateAnimation);
                break;
            case R.id.button4:
                AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
                alphaAnimation.setDuration(2000);
                button3.startAnimation(alphaAnimation);
                break;
            case R.id.button5:
                break;
            case R.id.button6:
                break;
            case R.id.button7:
                AlphaAnimation alphaAnimation1 = new AlphaAnimation(0,1);
                alphaAnimation1.setDuration(2000);
                RotateAnimation rotateAnimation1 = new RotateAnimation(0, 360, 100, 200);//相對於100,200旋轉
                rotateAnimation1.setDuration(2000);
                AnimationSet animationSet = new AnimationSet(true);
                animationSet.addAnimation(alphaAnimation1);
                animationSet.addAnimation(rotateAnimation1);
                button7.startAnimation(animationSet);
                break;
            case R.id.button8:
                Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim1);
                button8.startAnimation(animation);
                break;
            default:
                break;
        }

    }
}



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章