效果
aux2g-off1p.gif
1、效果分析
1.1、加载显示组合控件（布局）
1.2 、分析动画实现
1.2.1：下落动画同时阴影缩小，当下落动画执行完成，开始上抛动画同时阴影放大，当上抛动画执行完成开始下落动画。一直轮训执行。
1.2.2 ： 下落动画执行完毕的时候ShapeView改变形状。
1.2.3 ： 上抛动画开始的时候执行 旋转动画，正方形旋转180°，三角形旋转120°。
2、代码实现
2.1、 加载显示组合控件（布局）
布局包含三个部分 = ShapeView（图形切换View，之前博客写过） + View(阴影背景 shape="oval") + TextView
布局如下：
<?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:background="#FFFFFF"
android:gravity="center"
android:orientation="vertical">
<com.zsj.loadingview58.ShapeView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginBottom="82dp" />
<View
android:layout_width="25dp"
android:layout_height="3dp"
android:background="@drawable/shadow_bg" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:text="正在加载中..." />
</LinearLayout>
在自定义ViewGoup加载显示
public class LoadingView extends FrameLayout {
public LoadingView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initLayout();
}
private void initLayout() {
//加载显示组合控件
inflate(getContext(), R.layout.loading_view, this);
}
}
2.2动画分析
2.2.1：下落动画同时阴影缩小，当下落动画执行完成，开始上抛动画同时阴影放大，当上抛动画执行完成开始下落动画。一直轮训执行
2.2.1.1 下落的速度应该是开始慢后来越来快的，上抛的速度应该是开始快后来越来越慢的
public LoadingView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mTranslationDistance = dip2px(80);
initLayout();
//1.2.1 下落动画同时阴影缩小，当下落动画执行完成，开始上抛动画同时阴影放大，当上抛动画执行完成开始下落动画。一直轮训执行。
startFallAni();
}
/**
* 开始执行下落动画
*/
private void startFallAni() {
//下落动画同时阴影缩小
ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", 0, mTranslationDistance);
//2.2.1.1 下落的速度应该是开始慢后来越来快的 ,设置加速差值器
translationAnimator.setInterpolator(new AccelerateInterpolator());
ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 1.0f, 0.3f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(ANIMATOR_DURATION);
animatorSet.playTogether(translationAnimator, scaleAnimator);
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//当下落动画执行完成，开始上抛动画
startUpAni();
}
});
animatorSet.start();
}
/**
* 开始上抛动画
*/
private void startUpAni() {
//开始上抛动画同时阴影放大
ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", mTranslationDistance, 0);
//2.2.1.1 上抛的速度应该是开始快后来越来越慢的，设置减速插值器
translationAnimator.setInterpolator(new DecelerateInterpolator());
ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 0.3f, 1.0f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(ANIMATOR_DURATION);
animatorSet.playTogether(translationAnimator, scaleAnimator);
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
// 2.2.3 ： 上抛动画开始的时候执行 旋转动画，正方形旋转180°，三角形旋转120°
startRotation();
}
@Override
public void onAnimationEnd(Animator animation) {
//当上抛动画执行完成开始下落动画
startFallAni();
}
});
animatorSet.start();
}
2.2.2 ： 下落动画执行完毕的时候ShapeView改变形状
/**
* 开始执行下落动画
*/
private void startFallAni() {
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// 2.2.2 ： 下落动画执行完毕的时候ShapeView改变形状
mShapeView.exchange();
}
});
animatorSet.start();
}
2.2.3 ： 上抛动画开始的时候执行 旋转动画，正方形旋转180°，三角形旋转120°
/**
* 开始上抛动画
*/
private void startUpAni() {
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
// 2.2.3 ： 上抛动画开始的时候执行 旋转动画，正方形旋转180°，三角形旋转120°
startRotation();
}
});
animatorSet.start();
}
/**
* 开始旋转动画
*/
private void startRotation() {
// 2.2.3 :正方形旋转180°，三角形旋转120°
ObjectAnimator rotationAnimator = null;
//判断当前图形是什么？
switch (mShapeView.getCurrentShape()) {
case Circle:
case Square:
rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, 180);
break;
case Triangle:
rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, -120);
break;
default:
break;
}
rotationAnimator.setInterpolator(new DecelerateInterpolator());
rotationAnimator.setDuration(ANIMATOR_DURATION);
rotationAnimator.start();
}
