android动画实例源码,Android动画实战：打造炫酷的加载动画

前言很多时候，我们的页面需要网络请求完毕再根据数据加载 UI，而在此过程中，用户等待时，一般会有一个加载中的提示。本文结合自定义 View/ViewGroup 以及属性动画相关知识，讲述较为炫酷的动画效果的 LoadingView，并在细节上优化了代码。

1.LoadingView 效果分析

1.1 最终实现的效果图如下

1.2 效果分析

LoadingView 有三个不同形状的 View 进行下落回弹并且不断切换，与此同时，底部有阴影在不断的切换大小，最底下是文字说明。

2.实现分析先自定义 ShapeView 打造三个形状变换的 View。public class ShapeView extends View {

private Shape mCurrentShape = Shape.Circle;

Paint mPaint;    private Path mPath;    public ShapeView(Context context) {        this(context, null);

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

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

mPaint = new Paint();

mPaint.setAntiAlias(true);

}    @Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        // 只保证是正方形

int width = MeasureSpec.getSize(widthMeasureSpec);        int height = MeasureSpec.getSize(heightMeasureSpec);

setMeasuredDimension(Math.min(width, height), Math.min(width, height));

}    @Override

protected void onDraw(Canvas canvas) {        switch (mCurrentShape) {            case Circle:                // 画圆形

int center = getWidth() / 2;

mPaint.setColor(ContextCompat.getColor(getContext(), R.color.circle));

canvas.drawCircle(center, center, center, mPaint);                break;            case Square:                // 画正方形

mPaint.setColor(ContextCompat.getColor(getContext(), R.color.rect));

canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);                break;            case Triangle:                // 画三角  Path 画路线

mPaint.setColor(ContextCompat.getColor(getContext(), R.color.triangle));                if (mPath == null) {                    // 画路径

mPath = new Path();

mPath.moveTo(getWidth() / 2, 0);

mPath.lineTo(0, (float) ((getWidth() / 2) * Math.sqrt(3)));

mPath.lineTo(getWidth(), (float) ((getWidth() / 2) * Math.sqrt(3)));                    // path.lineTo(getWidth()/2,0);

mPath.close();// 把路径闭合

}

canvas.drawPath(mPath, mPaint);                break;

}

}    /**

* 改变形状

*/

public void exchange() {        switch (mCurrentShape) {            case Circle:

mCurrentShape = Shape.Square;                break;            case Square:

mCurrentShape = Shape.Triangle;                break;            case Triangle:                // 画三角  Path 画路线

mCurrentShape = Shape.Circle;                break;

}        // 不断重新绘制形状

invalidate();

}    public enum Shape {

Circle, Square, Triangle

}    public Shape getCurrentShape() {        return mCurrentShape;

}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687自定义 ViewGroup 打造整体 View。public class LoadingView extends LinearLayout {

private ShapeView mShapeView;// 上面的形状

private View mShadowView;// 中间的阴影

private int mTranslationDistance = 0;    // 动画执行的时间

private final long ANIMATOR_DURATION = 500;    // 是否停止动画

private boolean mIsStopAnimator = false;    public LoadingView(Context context) {        this(context, null);

}    public LoadingView(Context context, @Nullable AttributeSet attrs) {        this(context, attrs, 0);

}    public LoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);

mTranslationDistance = dip2px(80);

initLayout();

}    private int dip2px(int dip) {        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics());

}    /**

* 初始化加载布局

*/

private void initLayout() {        // 1. 加载写好的 ui_loading_view

// 1.1 实例化View

// this 代表把 ui_loading_view 加载到 LoadingView 中

inflate(getContext(), R.layout.layout_loading, this);

mShapeView = (ShapeView) findViewById(R.id.shape_view);

mShadowView = findViewById(R.id.shadow_view);

post(new Runnable() {            @Override

public void run() {                // onResume 之后View绘制流程执行完毕之后(View的绘制流程源码分析那一章)

startFallAnimator();

}

});        // onCreate() 方法中执行 ，布局文件解析 反射创建实例

}    // 开始下落动画

private void startFallAnimator() {        if (mIsStopAnimator) {            return;

}        // 动画作用在谁的身上

// 下落位移动画

ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", 0, mTranslationDistance);        // 配合中间阴影缩小

ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 1f, 0.3f);

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.setDuration(ANIMATOR_DURATION);        // 下落的速度应该是越来越快

animatorSet.setInterpolator(new AccelerateInterpolator());

animatorSet.playTogether(translationAnimator, scaleAnimator);

animatorSet.start();        // 下落完之后就上抛了，监听动画执行完毕

// 是一种思想，在 Adapter 中的 BannerView 写过

animatorSet.addListener(new AnimatorListenerAdapter() {            @Override

public void onAnimationEnd(Animator animation) {                // 改变形状

mShapeView.exchange();                // 下落完之后就上抛了

startUpAnimator();                // 开始旋转

}

});

}    /**

* 开始执行上抛动画

*/

private void startUpAnimator() {        if (mIsStopAnimator) {            return;

}

Log.e("TAG", "startUpAnimator" + this);        // 动画作用在谁的身上

// 下落位移动画

ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", mTranslationDistance, 0);        // 配合中间阴影缩小

ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 0.3f, 1f);

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.setDuration(ANIMATOR_DURATION);

animatorSet.setInterpolator(new DecelerateInterpolator());

animatorSet.playTogether(translationAnimator, scaleAnimator);        // 先执行 translationAnimator 接着执行 scaleAnimator

// 上抛完之后就下落了，监听动画执行完毕

animatorSet.addListener(new AnimatorListenerAdapter() {            @Override

public void onAnimationEnd(Animator animation) {                // 上抛完之后就下落了

startFallAnimator();

}            @Override

public void onAnimationStart(Animator animation) {                // 开始旋转

startRotationAnimator();

}

});        // 执行 -> 监听的 onAnimationStart 方法

animatorSet.start();

}    /**

* 上抛的时候需要旋转

*/

private void startRotationAnimator() {

ObjectAnimator rotationAnimator = null;        switch (mShapeView.getCurrentShape()) {            case Circle:            case Square:                // 180

rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, 180);                break;            case Triangle:                // 120

rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, -120);                break;

}

rotationAnimator.setDuration(ANIMATOR_DURATION);

rotationAnimator.setInterpolator(new DecelerateInterpolator());

rotationAnimator.start();

}    @Override

public void setVisibility(int visibility) {        super.setVisibility(View.INVISIBLE);// 不要再去排放和计算，少走一些系统的源码(View的绘制流程)

// 清理动画

mShapeView.clearAnimation();

mShadowView.clearAnimation();        // 把LoadingView从父布局移除

ViewGroup parent = (ViewGroup) getParent();        if (parent != null) {

parent.removeView(this);// 从父布局移除

removeAllViews();// 移除自己所有的View

}

mIsStopAnimator = true;

}

}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152layout_loading.xml<?xml  version="1.0" encoding="utf-8"?>

android:layout_width="match_parent"

android:orientation="vertical"

android:background="#FFFFFF"

android:gravity="center"

android:layout_height="match_parent">

android:layout_width="25dp"

android:layout_marginBottom="82dp"

android:layout_height="25dp" />

android:background="@drawable/bg_loading_shadow"

android:layout_width="25dp"

android:layout_height="3dp"/>

android:layout_width="wrap_content"

android:text="玩命加载中..."

android:layout_height="wrap_content" />

1234567891011121314151617181920212223242526

3.总结在 LoadingView.java 中，我们重写了 setVisibility(int visibility)，就是当加载完毕需要 GONE/INVISIBLE 掉 LoadingView 时，统一调 setVisibility(View.INVISIBLE)，目的是不要再去摆放布局和计算，少走一些系统的源码，并做一些清理工作。@Override

public void setVisibility(int visibility) {        super.setVisibility(View.INVISIBLE);// 不要再去摆放布局和计算，少走一些系统的源码(View的绘制流程)

// 清理动画

mShapeView.clearAnimation();

mShadowView.clearAnimation();        // 把LoadingView从父布局移除

ViewGroup parent = (ViewGroup) getParent();        if (parent != null) {

parent.removeView(this);// 从父布局移除

removeAllViews();// 移除自己所有的View

}

mIsStopAnimator = true;

}1234567891011121314