高仿今日头条加载动画

01

每每浏览手机app时，发现有的效果体验不错，作为一位程序员，总想要是自己来做，怎么实现。

今天我们来模仿今日头条的加载动画。

首先我们来看一下我们这个demo最终效果，有图有真相。

高仿今日头条加载动画

02

实现步骤:

• 01、 新建LoadingView继承FrameLayout

public class LoadingView extends FrameLayout {
    private View mView;
    private ImageView imageView1;
    private ImageView imageView2;
    private ImageView imageView3;
    private ImageView imageView4;
    private AnimatorSet mAnimatorSet;
    /**
     * 动画间隔
     */
    private long interval = 500L;

    public LoadingView(Context context) {
        this(context, null);
    }

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

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

    private void initView(Context context, AttributeSet attrs, int defStyleAttr) {
        mView = LayoutInflater.from(context).inflate(R.layout.loading_view, this);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        imageView1 = ((ImageView) findViewById(R.id.iv_load1));
        imageView2 = ((ImageView) findViewById(R.id.iv_load2));
        imageView3 = ((ImageView) findViewById(R.id.iv_load3));
        imageView4 = ((ImageView) findViewById(R.id.iv_load4));
        showLoading();
    }

    public void showLoading() {
        if (getVisibility() != View.VISIBLE)
            return;
        if (mAnimatorSet == null)
            initAnimation();
        if (mAnimatorSet.isRunning() || mAnimatorSet.isStarted())
            return;
        mAnimatorSet.start();
    }

    public void hideLoading() {
        if (mAnimatorSet == null) {
            return;
        }
        if ((!mAnimatorSet.isRunning()) && (!mAnimatorSet.isStarted())) {
            return;
        }
        mAnimatorSet.removeAllListeners();
        mAnimatorSet.cancel();
        mAnimatorSet.end();
    }

    private void initAnimation() {
        mAnimatorSet = new AnimatorSet();
        List<ImageView> imageViewList = Arrays.asList(imageView1, imageView2, imageView3, imageView4);
        List<Animator> animatorList = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            ObjectAnimator loadAnimator = ObjectAnimator.ofFloat(imageViewList.get(i), "alpha", new float[]{1.0F, 0.5F}).setDuration(interval);
            loadAnimator.setStartDelay(100 * i);
            loadAnimator.setRepeatMode(ObjectAnimator.REVERSE);
            loadAnimator.setRepeatCount(-1);
            animatorList.add(loadAnimator);
        }
        mAnimatorSet.playTogether(animatorList);
    }

    @Override
    public void setVisibility(int visibility) {
        super.setVisibility(visibility);
        if (visibility != VISIBLE)
            hideLoading();
    }
}

• 02、loading_view.xml布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:background="@android:color/transparent"
              android:orientation="horizontal">

    <ImageView
        android:id="@+id/iv_load1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/ic_load1"/>

    <ImageView
        android:id="@+id/iv_load2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/ic_load2"/>

    <ImageView
        android:id="@+id/iv_load3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/ic_load3"/>

    <ImageView
        android:id="@+id/iv_load4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_load4"/>
</LinearLayout>

• 03、引用

 <com.aikaifa.loadingview.LoadingView
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

这样我们就高仿了今日头条加载动画了。是不是很简单。

项目地址:https://github.com/88ios/LoadingView

【END】