-
先来看一下要分析实现的效果.
loading
-
先来整体的分析一下, 界面包含了 3 个区域, 底部的
loading文字显示区域, 中间的阴影区域, 还有顶部的图形变化区域. -
接着分析每个区域内的内容.
- 底部
loading没有变化, 是一个固定的文字 - 中间阴影区域, 应该就是一个缩放. 看起来好像是把一个黑色的圆形压扁了. 然后进行缩放.
- 顶部的的图形变化区域, 有3个形状, 圆形, 三角形, 正方形, 有落下和上抛两个动画, 并且在上抛的时候改变形状, 并且旋转. 旋转的时候, 如果是正方形就顺时针旋转, 三角形是逆时针旋转.
- 底部
-
难点应该就是在顶部区域中. 猜想顶部区域是一个单独的自定义
View, 在onDraw中根据一个变量来绘制不同的图形, 然后还有一个方法来改变要绘制的形状, 如果当前是圆形, 那么就绘制正方形, 如果是正方形那么就绘制三角形, 如果是三角形那么就绘制圆形. -
那么先来实现顶部区域的自定义
View
public class ShapeView extends View {
private Shape mCurrentShape = Shape.Circle;
Paint mPaint;
private Path mPath;
public enum Shape {
Circle, Square, Triangle
}
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);
}
/**
* 获取当前形状
* @return
*/
public Shape getCurrentShape() {
return mCurrentShape;
}
@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(Color.parseColor("#aa72d572"));
canvas.drawCircle(center, center, center, mPaint);
break;
case Square:
// 画正方形
mPaint.setColor(Color.parseColor("#aae84e40"));
canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);
break;
case Triangle:
// 画三角 Path 画路线
mPaint.setColor(Color.parseColor("#aa738ffe"));
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)));
//闭合路径
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();
}
}
- 然后在我们自定义的
ViewGroup中引入自定义图形布局.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#FFFFFF"
android:orientation="vertical">
<org.zyq.view_day15_loading.ShapeView
android:id="@+id/shape_view"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginBottom="80dp" />
<View
android:id="@+id/shadow_view"
android:layout_width="25dp"
android:layout_height="3dp"
android:background="@drawable/loading_bg" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="loading..." />
</LinearLayout>
-
ShapeView marginBottom = 80dp是为了 保持一个已经抛起的状态, 一进入界面就可以执行落下的动画.
public class LoadingView extends LinearLayout {
private ShapeView mShapeView;
private View mShadowView;
private int mTranslationYDistance = 0;
private final int ANIMATOR_DURATION = 300;
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);
mTranslationYDistance = dip2px(80);
initLayout();
}
private int dip2px(int dip) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics());
}
private void initLayout() {
//加载写好的 loading_view 布局
//这里传 this, 表示将 loading_view 这个布局加载到 loadingView 中
inflate(getContext(), R.layout.loading_view, this);
mShapeView = findViewById(R.id.shape_view);
mShadowView = findViewById(R.id.shadow_view);
post(new Runnable() {
@Override
public void run() {
//进入界面动画下落
//如果写到外面, 是在 onCreate 中执行.
//写在这里, 会在 onResume 之后执行. 也就是绘制流程执行完毕
startFallAnimator();
}
});
}
/**
* 下落缩放
*/
private void startFallAnimator() {
if (mIsStopAnimator) return;
//动画作用在谁的形状上面
//mShadowView.setTranslationY(); 下面字符串中不知道传什么值的话, 可以这样看
ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", 0, mTranslationYDistance);
ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 1f, 0.3f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(translationAnimator, scaleAnimator);
animatorSet.setDuration(ANIMATOR_DURATION);
animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
//按顺序执行
//set.playSequentially(translationAnimator,scaleAnimator);
animatorSet.start();
//监听动画执行完毕
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//执行完 下落 后 执行 上抛
mShapeView.exchange();
startUpAnimator();
}
});
}
//上抛
private void startUpAnimator() {
if (mIsStopAnimator) return;
//动画作用在谁的形状上面
//mShadowView.setTranslationY(); 下面字符串中不知道传什么值的话, 可以这样看
ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", mTranslationYDistance, 0);
ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 0.3f, 1f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(translationAnimator, scaleAnimator);
animatorSet.setDuration(ANIMATOR_DURATION);
animatorSet.setInterpolator(new DecelerateInterpolator());
//按顺序执行
//set.playSequentially(translationAnimator,scaleAnimator);
//监听动画执行完毕
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//执行完 上抛 后 执行 下落
startFallAnimator();
}
});
animatorSet.start();
}
}
运行后发现抛起和下落都可以了, 就差旋转了. 旋转是在上抛的时候开始旋转. 那我们再增加一个旋转动画, 放到执行上抛动画监听器的 onStart 中.
/**
* 旋转
*/
private void startRotationAnimator() {
ObjectAnimator rotationAnimator = null;
switch (mShapeView.getCurrentShape()) {
case Square: //旋转180
rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, 180);
break;
case Triangle: //旋转 120
rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, -120);
break;
default:
rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, 0);
break;
}
rotationAnimator.setDuration(ANIMATOR_DURATION);
rotationAnimator.setInterpolator(new DecelerateInterpolator());
rotationAnimator.start();
}
- 然后在上抛动画的监听器中添加监听
onAnimationStart, 将startRotationAnimator()写进去后, 运行发现就可以旋转啦. - 最后, 我们在外面使用的时候, 当请求服务器的数据回来了, 我们需要隐藏, 那么为了性能问题, 我们需要在这个
loadingView中重写setVisibility方法
@Override
public void setVisibility(int visibility) {
//设置为 INVISIBLE 会好一些, 因为GONE 会执行摆放和测量
super.setVisibility(View.INVISIBLE);
//清理动画
mShapeView.clearAnimation();
mShadowView.clearAnimation();
//把 loading_view 从父布局移除
ViewGroup parent = (ViewGroup) getParent();
if (parent != null) {
parent.removeView(this);
removeAllViews();
}
mIsStopAnimator = true;
}
网友评论