首先绘制三个形状
public class ShapeView extends View {
private Paint mPaint;
private Shape mCurrentShape = Shape.Circle;
private Path mPath;
public ShapeView(Context context) {
this(context, null);
}
public ShapeView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ShapeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
@Override
protected void onMeasure(int widthMeasureSpec, int 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) {
super.onDraw(canvas);
int center = getWidth() / 2;
switch (mCurrentShape) {
case Circle:
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://绘制等边三角形
mPaint.setColor(ContextCompat.getColor(getContext(), R.color.triangle));
if (mPath == null) {
mPath = new Path();
mPath.moveTo(center, 0);
mPath.lineTo(0, (float) (center * Math.sqrt(3)));
mPath.lineTo(getWidth(), (float) (center * Math.sqrt(3)));
mPath.close();
}
canvas.drawPath(mPath, mPaint);
break;
}
}
public enum Shape {
Circle, Square, Triangle
}
/**
* 切换形状
*/
public void exchange() {
switch (mCurrentShape) {
case Circle:
mCurrentShape = Shape.Square;
break;
case Square:
mCurrentShape = Shape.Triangle;
break;
case Triangle:
mCurrentShape = Shape.Circle;
break;
}
invalidate();
}
/**
* 获得当前形状
*/
public Shape getCurrentShape() {
return mCurrentShape;
}
}
<color name="triangle">#aa72d572</color>
<color name="circle">#aa738ffe</color>
<color name="rect">#aae84e40</color>
分析布局有三个部分:shapeView+View+TextView
<?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"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#FFFFFF"
android:gravity="center"
android:layout_height="match_parent">
<com.hbwj.a14_58.ShapeView
android:id="@+id/shape_view"
android:layout_width="25dp"
android:layout_marginBottom="82dp"
android:layout_height="25dp" />
<View
android:id="@+id/shadow_view"
android:background="@drawable/loading_shadow_bg"
android:layout_width="25dp"
android:layout_height="3dp"/>
<TextView
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:text="玩命加载中..."
android:layout_height="wrap_content" />
</LinearLayout>
activity_main主布局直接使用即可
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:onClick="start"
android:layout_centerInParent="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.hbwj.a14_58.LoadingView
android:id="@+id/loading_view"
android:onClick="click"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
自定义view继承LinearLayout,实现动画效果
public class LoadingView extends LinearLayout {
private View mShadeView;//阴影
private ShapeView mShapeView;//形状
private int mTranslationDistance = 0;
// 动画执行的时间
private final long ANIMATOR_DURATION = 350;
private boolean mIsStopAnimation=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 = dp2x(80);
initLayout();
}
private int dp2x(int dpValue) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, getResources().getDisplayMetrics());
}
private void initLayout() {
// 1. 记载写好的 ui_loading_view
/* //1.1实例化view
View view = inflate(getContext(), R.layout.ui_loading_view, null);
// 1.2 添加到该View
addView(view);*/
//将ui_loading_view布局加载到改布局中
inflate(getContext(), R.layout.ui_loading_view, this);
mShadeView = findViewById(R.id.shadow_view);
mShapeView = (ShapeView) findViewById(R.id.shape_view);
post(new Runnable() {
@Override
public void run() {
// onResume 之后View绘制流程执行完毕之后(View的绘制流程源码分析那一章)
startFallAnimator();
}
});
// onCreate() 方法中执行 ,布局文件解析 反射创建实例
//startFallAnimator();
}
/**
* 开始下落动画
*/
private void startFallAnimator() {
if(mIsStopAnimation){
return;
}
//设置mShapeView的位移动画
ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", 0, mTranslationDistance);
//设置mShadeView的透明度变化
ObjectAnimator scaleAnimation = ObjectAnimator.ofFloat(mShadeView, "scaleX", 1f, 0.3f);
AnimatorSet animationSet = new AnimatorSet();
animationSet.setDuration(ANIMATOR_DURATION);//设置时长
animationSet.playTogether(translationAnimator, scaleAnimation);//两个动画一起播放
//有序播放
//animationSet.playSequentially(translationAnimator,scaleAnimation);
animationSet.setInterpolator(new AccelerateInterpolator());//加速
animationSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//下落完毕后,上抛
startUpAnimation();
}
});
animationSet.start();
}
/**
* 开始上抛
*/
private void startUpAnimation() {
if(mIsStopAnimation){
return;
}
Log.e("TAG", "startUpAnimation");
//设置mShapeView的位移动画
ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", mTranslationDistance, 0);
//设置mShadeView的透明度变化
ObjectAnimator scaleAnimation = ObjectAnimator.ofFloat(mShadeView, "scaleX", 0.3f, 1f);
AnimatorSet animationSet = new AnimatorSet();
animationSet.setDuration(ANIMATOR_DURATION);//设置时长
animationSet.playTogether(translationAnimator, scaleAnimation);//两个动画一起播放
//有序播放
//animationSet.playSequentially(translationAnimator,scaleAnimation);
animationSet.setInterpolator(new DecelerateInterpolator());//减速
animationSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//上抛完毕后,下落
startFallAnimator();
}
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
//旋转
startRotationAnimator();
//改变形状
mShapeView.exchange();
}
});
animationSet.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:
rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, -120);
break;
}
rotationAnimator.setDuration(ANIMATOR_DURATION);
rotationAnimator.setInterpolator(new DecelerateInterpolator());
rotationAnimator.start();
}
//当后台数据返回的时候我们要把当前页面,设置成 gone (隐藏),只是用代码设置为了
// 隐藏,但是动画View的内存还在跑
@Override
public void setVisibility(int visibility) {
super.setVisibility(INVISIBLE);// 不要再去排放和计算,少走一些系统的源码
//清理所有动画
mShapeView.clearAnimation();
mShadeView.clearAnimation();
//移除父布局
ViewGroup parent = (ViewGroup) getParent();
if (parent != null) {
parent.removeView(this);//父布局中移除当前view
removeAllViews();//移除自己的所有view
}
//此时上诉步骤完成,内存中有所以还是在运行
mIsStopAnimation=true;
}
}