Android動畫特效之自定義view：
http://www.lxweimin.com/p/a74704da0db3

由于上期Android動畫特效之自定義View中，通過例子可以看出，如何自定義View以及使用步驟，這是重中之重，為后期一方面實現(xiàn)Animator動畫效果鋪墊作用，另一方面對Android自定義View以及View繪制基本流程具備基本技能。
實現(xiàn)Animator屬性動畫，通過這次例子，先看下效果。

b9775cce023520cf527796af3a612f57.gif

上面可以看出，實現(xiàn)了三種動畫效果，出現(xiàn)時的動畫效果、消失時的動畫效果、平移時動畫效果。接下來看看下如何實現(xiàn)呢。
1.layout_base_view.xml布局文件增加三個按鈕控件。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <Button
        android:id="@+id/appearAniamtor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="appearAniamtor"
        android:textAllCaps="false"
        />
    <Button
        android:id="@+id/disAppearAniamtor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="disAppearAniamtor"
        android:layout_below="@+id/appearAniamtor"
        android:textAllCaps="false"
        />

    <Button
        android:id="@+id/translationAniamtor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="translationAniamtor"
        android:layout_below="@+id/disAppearAniamtor"
        android:textAllCaps="false"
        />

</RelativeLayout>

2.BaseLayoutView.java

// 因為我們的布局采用RelativeLayout，所以這里繼承RelativeLayout
public class BaseLayoutView extends RelativeLayout {
    private static final String TAG = "BaseLayoutView";

    private float centerX = 0f;

    private float centerY = 0f;

    private Button appearAniamtor,disAppearAniamtor,translationAniamtor;

    public BaseLayoutView(Context context) {
        this(context, null);
    }

    public BaseLayoutView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BaseLayoutView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    // 初始化UI，可根據(jù)業(yè)務(wù)需求設(shè)置默認值
    private void initView(Context context) {
        View view = LayoutInflater.from(context).inflate(R
                .layout.layout_base_view, null, false);
        addView(view);
        centerX = Constants.SCREEN_WIDTH / Constants.FLOAT_TWO;
        centerY = Constants.SCREEN_HEIGHT / Constants.FLOAT_TWO - ScreenDensityUtil.getStatusBarHeight();
        LogUtil.info(TAG, "initView centerX= " + centerX + " centerY= " + centerY);
        LogUtil.info(TAG, "initView getStatusBarHeight= " + ScreenDensityUtil.getStatusBarHeight());
        appearAniamtor = view.findViewById(R.id.appearAniamtor);
        disAppearAniamtor = view.findViewById(R.id.disAppearAniamtor);
        translationAniamtor = view.findViewById(R.id.translationAniamtor);
    }

    // 返回中心X坐標
    public float getCenterX() {
        return centerX;
    }

    // 返回中心Y坐標
    public float getCenterY() {
        return centerY;
    }

    public Button getAppearAniamtor() {
        return appearAniamtor;
    }

    public Button getDisAppearAniamtor() {
        return disAppearAniamtor;
    }

    public Button getTranslationAniamtor() {
        return translationAniamtor;
    }

    /**
     * 在父布局需要顯示多大就顯示多大，也就是自身的BaseLayoutView
     * 在子視圖，也就是CenterView或者其他自定義的View
     * 在確定CenterView或者其他自定義的View在父布局BaseLayoutView的坐標位置。
     * 子視圖CenterView類或者其他自定義的View類里面不做自身測量，
     * 也就是CenterView類或者其他自定義的View類的onMeasure方法。
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measureWidth = measureWidth(widthMeasureSpec);
        int measureHeight = measureHeight(heightMeasureSpec);
        setMeasuredDimension(measureWidth, measureHeight);
    }

    private int measureWidth(int measureSpec) {
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        // 設(shè)置一個默認值，就是這個View的默認寬度為xxx,
        int result = Constants.CENTER_LAYOUT_PIX_SIZE;
        if (specMode == MeasureSpec.AT_MOST) { // 相當于我們設(shè)置成wrap_content
            result = specSize;
        } else if (specMode == MeasureSpec.EXACTLY) { // 相當于我們設(shè)置成match_content或者一個具體的值
            result = specSize;
        }
        return result;
    }

    private int measureHeight(int measureSpec) {
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        // 設(shè)置一個默認值，就是這個View的默認寬度為xxx,
        int result = Constants.CENTER_LAYOUT_PIX_SIZE;
        if (specMode == MeasureSpec.AT_MOST) { // 相當于我們設(shè)置成wrap_content
            result = specSize;
        } else if (specMode == MeasureSpec.EXACTLY) { // 相當于我們設(shè)置成match_content或者一個具體的值
            result = specSize;
        }
        return result;
    }
}

該類做了如下兩件事：
首先，初始化三個Button控件，并提供公有方法提供外部調(diào)用，拿到三個Button實例。
其次是onMeasure方法。

圖片1.png

上面的注釋寫得很清楚，BaseLayoutView是基礎(chǔ)視圖，需要占滿整個屏幕，因此需要通過onMeasure方法進行測量，通過setMeasuredDimension方法保存測量數(shù)據(jù)，告訴父View我需要占滿整個屏幕。這樣CenterView或者其他自定義的View在BaseLayoutView視圖里面可以確定顯示坐標位置，這樣可以在屏幕的范圍內(nèi)實現(xiàn)動畫效果了。CenterView或者其他自定義的View的onMeasure方法不需要在測量了。
CenterView.java

// 因為我們的布局采用RelativeLayout，所以這里繼承RelativeLayout
public class CenterView extends RelativeLayout {
    private static final String TAG = "CenterView";

    private ImageView ivDeviceView;

    private int deviceDpWith;

    private int devicePxWith;

    private Context context;

    public CenterView(Context context) {
        this(context, null);
    }

    public CenterView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CenterView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    // 初始化UI，可根據(jù)業(yè)務(wù)需求設(shè)置默認值
    private void initView(Context context) {
        this.context = context;
        View view = LayoutInflater.from(context).inflate(R
             .layout.layout_center_view, null, false);
        ivDeviceView = view.findViewById(R.id.ivDeviceView);
        devicePxWith = Constants.CENTER_LAYOUT_PIX_SIZE;
        // 先添加addView后，再獲取ivDeviceView.getLayoutParams()，否則會報空
        refreshing();
        addView(view);
    }

    private void refreshing() {
        ivDeviceView.setImageResource(R.mipmap.wifi_icon);
        // 拿到的是ivDeviceView父布局的參數(shù)，也就是RelativeLayout。
        LayoutParams params= (LayoutParams) ivDeviceView.getLayoutParams();
        params.width = devicePxWith;
        params.height = devicePxWith;
        ivDeviceView.setLayoutParams(params);
    }

    public void setDeviceWith(int deviceWith) {
        this.deviceDpWith = deviceWith;
        devicePxWith = ScreenDensityUtil.dp2px(context, deviceDpWith);
        refreshing();
    }

    public void setDeivceImageResource(int resId) {
        ivDeviceView.setImageResource(resId);
    }
}

該類CenterView里面沒有onMeasure方法了。
3.AppearDeviceAnimator.java

/**
 * 插入或出現(xiàn)動畫的View
 */
public class AppearDeviceAnimator extends Animator {
    private static final String TAG = "AppearDeviceAnimator";

    private long DEVICE_RUNNING_TIME = Constants.DEAULT_500MS;

    private static final float START_SCALE = 0.6F;

    private static final float MIDDLE_SCALE = 1.2F;

    private static final float END_SCALE = 1.0F;

    private static final float START_ALPHA = 0F;

    private static final float END_ALPHA = 1F;

    @Override
    public long getStartDelay() {
        return 0;
    }

    @Override
    public void setStartDelay(long startDelay) {

    }

    @Override
    public Animator setDuration(long duration) {
        DEVICE_RUNNING_TIME = duration;
        return this;
    }

    @Override
    public long getDuration() {
        return DEVICE_RUNNING_TIME;
    }

    @Override
    public void setInterpolator(TimeInterpolator value) {

    }

    @Override
    public boolean isRunning() {
        return false;
    }

    @Override
    public void start() {
        super.start();
        LogUtil.info(TAG, "執(zhí)行start");
    }

    @Override
    public void setTarget(@Nullable Object target) {
        super.setTarget(target);
        performMakeUpAppearAnimator(target);
    }

    private void performMakeUpAppearAnimator(Object target) {
        LogUtil.info(TAG, "執(zhí)行setTarget");
        CenterView centerView = (CenterView) target;
        PropertyValuesHolder scaleHolderX = PropertyValuesHolder.ofFloat(Constants.SCALE_X, START_SCALE, MIDDLE_SCALE, END_SCALE);
        PropertyValuesHolder scaleHolderY = PropertyValuesHolder.ofFloat(Constants.SCALE_Y, START_SCALE, MIDDLE_SCALE, END_SCALE);
        PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofFloat(Constants.ALPHA, START_ALPHA, END_ALPHA);
        ObjectAnimator scaleAnimator = ObjectAnimator.ofPropertyValuesHolder(centerView, scaleHolderX, scaleHolderY);
        ObjectAnimator alphaAnimator = ObjectAnimator.ofPropertyValuesHolder(centerView, alphaHolder);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(scaleAnimator).with(alphaAnimator);
        animatorSet.setDuration(DEVICE_RUNNING_TIME);
        animatorSet.start();
    }
}

AppearDeviceAnimator類繼承自Animator，PropertyValuesHolder、ObjectAnimator類實現(xiàn)縮放、透明度動畫效果，縮放過程由0.6放大至1.2，其次縮小至1，透明度由0到1，實現(xiàn)組合的View出現(xiàn)動畫。
4.DisAppearDeviceAnimator.java

/**
 * 消失的動畫
 */
public class DisAppearDeviceAnimator extends Animator {
    private static final String TAG = "DisAppearDeviceAnimator";

    private long DEVICE_RUNNING_TIME = Constants.DEAULT_500MS;

    private static final float START_SCALE = 1.0F;

    private static final float END_SCALE = 0.5F;

    private static final float START_ALPHA = 1F;

    private static final float END_ALPHA = 0F;
    @Override
    public long getStartDelay() {
        return 0;
    }

    @Override
    public void setStartDelay(long startDelay) {

    }

    @Override
    public Animator setDuration(long duration) {
        DEVICE_RUNNING_TIME = duration;
        return this;
    }

    @Override
    public long getDuration() {
        return 0;
    }

    @Override
    public void setInterpolator(TimeInterpolator value) {

    }

    @Override
    public boolean isRunning() {
        return false;
    }

    @Override
    public void start() {
        super.start();
        LogUtil.info(TAG, "執(zhí)行start");
    }

    @Override
    public void setTarget(@Nullable Object target) {
        super.setTarget(target);
        LogUtil.info(TAG, "setTarget");
        performMakeUpDisAppearAnimator(target);
    }

    private void performMakeUpDisAppearAnimator(Object target) {
        LogUtil.info(TAG, "執(zhí)行setTarget");
        CenterView centerView = (CenterView) target;
        PropertyValuesHolder scaleHolderX = PropertyValuesHolder.ofFloat(Constants.SCALE_X, START_SCALE, END_SCALE);
        PropertyValuesHolder scaleHolderY = PropertyValuesHolder.ofFloat(Constants.SCALE_Y, START_SCALE, END_SCALE);
        PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofFloat(Constants.ALPHA, START_ALPHA, END_ALPHA);
        ObjectAnimator scaleAnimator = ObjectAnimator.ofPropertyValuesHolder(centerView, scaleHolderX, scaleHolderY);
        ObjectAnimator alphaAnimator = ObjectAnimator.ofPropertyValuesHolder(centerView, alphaHolder);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(scaleAnimator).with(alphaAnimator);
        animatorSet.setDuration(DEVICE_RUNNING_TIME);
        animatorSet.start();
    }
}

DisAppearDeviceAnimator類繼承自Animator，PropertyValuesHolder、ObjectAnimator類實現(xiàn)縮放、透明度動畫效果，縮放過程由1縮小至至0.5，透明度由1到0，實現(xiàn)組合的View消失動畫。
5.TranslationAnimator.java

public class TranslationAnimator {
    private static final String TAG = "TranslationAnimator";

    private static ObjectAnimator objectAnimator;

    public static void changePositonAnimator(CenterView centerView, float dstX, float dstY) {
        PropertyValuesHolder holderX = PropertyValuesHolder.ofFloat(Constants.TRANSLATION_X, dstX);
        PropertyValuesHolder holderY = PropertyValuesHolder.ofFloat(Constants.TRANSLATION_Y, dstY);
        objectAnimator = ObjectAnimator.ofPropertyValuesHolder(centerView, holderX, holderY);
        objectAnimator.setDuration(2000);
        objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                LogUtil.info(TAG, "onAnimationUpdate = " + animation.getAnimatedValue());
            }
        });
        objectAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                LogUtil.info(TAG, "onAnimationStart X= " + centerView
                    .getX() + "Y= " + centerView.getY());
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                LogUtil.info(TAG, "onAnimationEnd X= " + centerView
                    .getX() + "Y= " + centerView.getY());
            }
        });
        objectAnimator.start();
    }
}

TranslationAnimator類的方法執(zhí)行平移的動畫效果，使用ObjectAnimator類以及ObjectAnimator對象的addUpdateListener、addListener事件打印更新的值。
6.SolarControl.java

public class SolarControl {
    private static final String TAG = "SolarControl";

    private ViewGroup parentView;

    private BaseLayoutView baseView;

    private CenterView centerView;

    public SolarControl(ViewGroup parent) {
        parentView = parent;
        baseView = new BaseLayoutView(parentView.getContext());
        initView();
        initOnClickEvent();
    }

    private void initView() {
        centerView = new CenterView(baseView.getContext());
        float centerX = baseView.getCenterX() - Constants.CENTER_LAYOUT_PIX_SIZE / Constants.FLOAT_TWO;
        float centerY = baseView.getCenterY() - Constants.CENTER_LAYOUT_PIX_SIZE / Constants.FLOAT_TWO;
        centerView.setX(centerX);
        centerView.setY(centerY);
        LogUtil.info(TAG, "initView centerX= " + centerX + " centerY= " + centerY);
        baseView.addView(centerView);
        parentView.addView(baseView);
     }

    public void release() {
        if (baseView != null) {
            baseView.removeView(centerView);
            parentView.removeView(baseView);
            baseView = null;
            parentView = null;
        }
        if (centerView != null) {
            centerView = null;
        }
    }

    private void initOnClickEvent() {
        baseView.getAppearAniamtor().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AppearDeviceAnimator appearDeviceAnimator = new AppearDeviceAnimator();
                appearDeviceAnimator.setTarget(centerView);
            }
        });
        baseView.getDisAppearAniamtor().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                DisAppearDeviceAnimator disAppearDeviceAnimator = new DisAppearDeviceAnimator();
                disAppearDeviceAnimator.setTarget(centerView);
            }
        });
        baseView.getTranslationAniamtor().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               TranslationAnimator.changePositonAnimator(centerView, centerView.getX() / Constants.FLOAT_TWO, centerView.getY());
            }
        });
    }
}

SolarControl類里面主要拿到三個Button實例，在不同按鈕監(jiān)聽事件實行不同的動畫邏輯。運行此項目，看到處于文章開頭的界面動畫效果。
通過例子可以看出，實現(xiàn)Animator動畫效果并不復雜，實現(xiàn)起來比較簡單，主要是如何使用ObjectAnimator類、PropertyValuesHolder類來實現(xiàn)簡單的動畫效果，但實現(xiàn)Animator動畫效果并離不開Android自定義View，因此主要掌握如何編寫復雜的自定義View類，配合Animator類來完成動畫效果。小伙伴們有興趣的話，搜索并關(guān)注公眾號“Android技術(shù)迷”關(guān)注后可閱讀更多文章，感謝各位關(guān)注。
Android動畫特效之自定義view：
http://www.lxweimin.com/p/a74704da0db3