01

每每瀏覽手機(jī)app時(shí)，發(fā)現(xiàn)有的效果體驗(yàn)不錯(cuò)，作為一位程序員，總想要是自己來(lái)做，怎么實(shí)現(xiàn)。

今天我們來(lái)模仿今日頭條的加載動(dòng)畫(huà)。

首先我們來(lái)看一下我們這個(gè)demo最終效果，有圖有真相。

高仿今日頭條加載動(dòng)畫(huà)

02

實(shí)現(xiàn)步驟:

• 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;
    /**
     * 動(dòng)畫(huà)間隔
     */
    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" />

這樣我們就高仿了今日頭條加載動(dòng)畫(huà)了。是不是很簡(jiǎn)單。

項(xiàng)目地址:https://github.com/88ios/LoadingView

【END】