屬性影片

屬性影片

參考網址
Android 屬性影片：這是一篇全面 & 詳細的 屬性影片 總結&攻略

ValueAnimator.ofInt

布局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

   <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="ofInt"
        android:id="@+id/btn1"/>

    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="ofARGB"
        android:id="@+id/btn2"/>
 

</LinearLayout>

MainAcitvity.java檔案

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.ValueAnimator;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
     private Button btn1;
    private Button btn2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

       btn1 = findViewById(R.id.btn1);
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeButtonSize();
            }
        });

        btn2 = findViewById(R.id.btn2);
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeButtonColor();
            }
        });
    }
}

實作按鈕大小的變化

/**
     * 改變btn的寬高
     */
    private void changeButtonSize() {
        // 拿到btn1的初始寬度
        int width = btn1.getLayoutParams().width;
        Log.e("onClick", "width = " + width );
        ValueAnimator valueAnimator = ValueAnimator.ofInt(width,1000);
        valueAnimator.setDuration(5000);
        valueAnimator.setRepeatCount(5);
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
//                        Log.e("onAnimationUpdate", "value = " + value);
                // 修改按鈕btn1的寬度
                btn1.getLayoutParams().width = value;
                btn1.getLayoutParams().height = value;
                btn1.requestLayout();
            }
        });
        valueAnimator.start();
    }

實作按鈕顏色的變化

  /**
     * 改變按鈕的顏色
     */
    private void changeButtonColor() {
        ValueAnimator animator = ValueAnimator.ofArgb(Color.WHITE, Color.RED, Color.BLUE, Color.YELLOW);
        animator.setDuration(5000);
        animator.setRepeatCount(5);
        animator.setRepeatMode(ValueAnimator.REVERSE);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int color = (int) animation.getAnimatedValue();
                btn2.setBackgroundColor(color);
            }
        });
        animator.start();
    }

修改按鈕的位置

private void  changeButtonPosition(){
        LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) btn1.getLayoutParams();
        ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 1000);
        valueAnimator.setDuration(3000);
        valueAnimator.setRepeatCount(3);
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
//                        Log.e("onAnimationUpdate", "value = " + value);
                // 使用這個值來修改view的屬性
                layoutParams.leftMargin = value;
                layoutParams.topMargin = value;
                btn1.setLayoutParams(layoutParams);
                btn1.requestLayout();
            }
        });
        valueAnimator.start();
    }

組合使用屬性影片

  /**
     * 組合使用屬性影片
     */
    private void useAnimatorSet() {
        AnimatorSet animatorSet = new AnimatorSet();

        ValueAnimator animator = ValueAnimator.ofInt(0, 1000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) btn4.getLayoutParams();
                params.topMargin = value;
                btn4.requestLayout();
            }
        });

        ValueAnimator animator2 = ValueAnimator.ofArgb(Color.RED, Color.BLUE);
        animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int color = (int) animation.getAnimatedValue();
                btn4.setBackgroundColor(color);
            }
        });

        animatorSet.setDuration(5000);
//                animatorSet.playTogether(animator, animator2);
        animatorSet.play(animator).with(animator2);
        animatorSet.start();
    }

ValueAnimator.ofFloat

 ValueAnimator animator = ValueAnimator.ofFloat(0.0F, 1000F);
                animator.setDuration(3000);
                animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (float) animation.getAnimatedValue();
                        Log.e("onAnimationUpdate","value = " + value);
                    }
                });
                animator.start();

ValueAnimator.ofObject

第一步 創建MyView 繼承系統的View 注意兩個引數的建構式一定要實作 因為布局檔案繪制時要用到

package com.example.demo;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import androidx.annotation.Nullable;

public class MyView extends View {
    Paint paint = new Paint();
    Point curPoint = new Point(200, 200);

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.RED);
        paint.setAntiAlias(true);
        canvas.drawCircle(curPoint.x,curPoint.y,100, paint);
    }

}

第2步 在主界面的 布局檔案中使用MyView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="開始影片"
        android:id="@+id/btn_start"/>

    <com.example.demo.MyView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/myview"/>


</LinearLayout>

此時可以先看一下有沒有繪制出一個小的圓形

第3步 自定義Point型別的估值器

package com.example.demo;

import android.animation.TypeEvaluator;
import android.graphics.Point;

public class PointEvaluator implements TypeEvaluator<Point> {
    @Override
    public Point evaluate(float fraction, Point startValue, Point endValue) {
        int deltaX = endValue.x - startValue.x;
        int deltaY = endValue.y - startValue.y;
        int curX = (int) (startValue.x + fraction * deltaX);
        int curY = (int) (startValue.y + fraction * deltaY);

        Point point = new Point(curX, curY);
        return point;
    }
}

第4步 在MyView中實作startAnim方法

    public void startAnim() {
        Point startPoint = new Point(200, 200);
        Point endPoint = new Point(600, 800);
        ValueAnimator valueAnimator = ValueAnimator.ofObject(new PointEvaluator(),
                startPoint, endPoint);

        valueAnimator.setDuration(5000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                curPoint = (Point) animation.getAnimatedValue();
                Log.e("onAnimationUpdate", "curPoint = " + curPoint);
                invalidate();
            }
        });
        valueAnimator.start();
    }

第5步 在MainActivity中實作按鈕的點擊事件 點擊后呼叫Myview的startAnim方法 實作移動

package com.example.demo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Button btnStart;
    private MyView myView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnStart = findViewById(R.id.btn_start);
        myView = findViewById(R.id.myview);

        btnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.startAnim();
            }
        });
    }
}