android炫酷的效果 android动效

转载

mob64ca140a8e67 2023-08-13 19:32:38

文章标签 android炫酷的效果 android 动画 ide 自定义 文章分类 Android 移动开发

Android动画特效之自定义view：

由于上期Android动画特效之自定义View中，通过例子可以看出，如何自定义View以及使用步骤，这是重中之重，为后期一方面实现Animator动画效果铺垫作用，另一方面对Android自定义View以及View绘制基本流程具备基本技能。

实现Animator属性动画，通过这次例子，先看下效果。

上面可以看出，实现了三种动画效果，出现时的动画效果、消失时的动画效果、平移时动画效果。接下来看看下如何实现呢。

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，可根据业务需求设置默认值
    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);
        // 设置一个默认值，就是这个View的默认宽度为xxx,
        int result = Constants.CENTER_LAYOUT_PIX_SIZE;
        if (specMode == MeasureSpec.AT_MOST) { // 相当于我们设置成wrap_content
            result = specSize;
        } else if (specMode == MeasureSpec.EXACTLY) { // 相当于我们设置成match_content或者一个具体的值
            result = specSize;
        }
        return result;
    }

    private int measureHeight(int measureSpec) {
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        // 设置一个默认值，就是这个View的默认宽度为xxx,
        int result = Constants.CENTER_LAYOUT_PIX_SIZE;
        if (specMode == MeasureSpec.AT_MOST) { // 相当于我们设置成wrap_content
            result = specSize;
        } else if (specMode == MeasureSpec.EXACTLY) { // 相当于我们设置成match_content或者一个具体的值
            result = specSize;
        }
        return result;
    }
}

该类做了如下两件事：

首先，初始化三个Button控件，并提供公有方法提供外部调用，拿到三个Button实例。

其次是onMeasure方法。

android炫酷的效果 android动效_动画_02

上面的注释写得很清楚，BaseLayoutView是基础视图，需要占满整个屏幕，因此需要通过onMeasure方法进行测量，通过setMeasuredDimension方法保存测量数据，告诉父View我需要占满整个屏幕。这样CenterView或者其他自定义的View在BaseLayoutView视图里面可以确定显示坐标位置，这样可以在屏幕的范围内实现动画效果了。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，可根据业务需求设置默认值
    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父布局的参数，也就是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

/**
 * 插入或出现动画的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, "执行start");
    }

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

    private void performMakeUpAppearAnimator(Object target) {
        LogUtil.info(TAG, "执行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类实现缩放、透明度动画效果，缩放过程由0.6放大至1.2，其次缩小至1，透明度由0到1，实现组合的View出现动画。

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, "执行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, "执行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类实现缩放、透明度动画效果，缩放过程由1缩小至至0.5，透明度由1到0，实现组合的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类的方法执行平移的动画效果，使用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实例，在不同按钮监听事件实行不同的动画逻辑。运行此项目，看到处于文章开头的界面动画效果。

通过例子可以看出，实现Animator动画效果并不复杂，实现起来比较简单，主要是如何使用ObjectAnimator类、PropertyValuesHolder类来实现简单的动画效果，但实现Animator动画效果并离不开Android自定义View，因此主要掌握如何编写复杂的自定义View类，配合Animator类来完成动画效果。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。