android 今日头条加载动画,高仿今日头条加载动画

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布局

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@android:color/transparent"

android:orientation="horizontal">

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"/>

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"/>

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"/>

android:id="@+id/iv_load4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:src="@drawable/ic_load4"/>

03、引用

android:id="@+id/loading"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true" />

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

【END】