高仿今日头条加载动画

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 imageViewList = Arrays.asList(imageView1, imageView2, imageView3, imageView4);
        List 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布局

• 03、引用

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

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

【END】