一款非常简单酷炫的LoadingView动画效果
更新时间：2018年08月17日 11:39:48 作者：小猪快跑22
这篇文章主要为大家详细介绍了一款非常简单酷炫的LoadingView动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
今天看到一个银行的APP上面的loadingview 挺好的，就尝试着自己实现，觉得很简单，但自己实现起来还是发现了一些问题。
LoadingView和下图类似：
实现的代码也不是很复杂，就是小球的运动轨迹需要计算，我自己手画了个计算的图，很简单的就是三角函数的使用。
然后代码就是代码实现了，主要的内容都有注释，代码如下：
public class LoadingView extends View {
private final static String TAG = "LoadingView";
private final static int LEFT_BALL_DOWN = 1;
private final static int LEFT_BALL_UP = 2;
private final static int RIGHT_BALL_DOWN = 3;
private final static int RIGHT_BALL_UP = 4;
private Paint paint1, paint2, paint3, paint4, paint5;
private int mCurrentAnimatorValue;
private int circleRadius = 10; //小球的半径
private int distance = 60; //小球开始下落到最低点的距离
private int mCurrentState = LEFT_BALL_DOWN;
public LoadingView(Context context) {
super(context);
init(context);
}
public LoadingView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
public LoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
paint1 = getPaint(Color.RED);
paint2 = getPaint(Color.YELLOW);
paint3 = getPaint(Color.GREEN);
paint4 = getPaint(Color.BLUE);
paint5 = getPaint(Color.CYAN);
ValueAnimator animator = ValueAnimator.ofInt(0, 90);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentAnimatorValue = (int) animation.getAnimatedValue();
Log.e(TAG, "onAnimationUpdate : mCurrentAnimatorValue = " + mCurrentAnimatorValue);
invalidate();
}
});
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
Log.e(TAG, "onAnimationRepeat : mCurrentAnimatorValue = " + mCurrentAnimatorValue);
switch (mCurrentState) {
case LEFT_BALL_DOWN:
mCurrentState = RIGHT_BALL_UP;
break;
case RIGHT_BALL_UP:
mCurrentState = RIGHT_BALL_DOWN;
break;
case RIGHT_BALL_DOWN:
mCurrentState = LEFT_BALL_UP;
break;
case LEFT_BALL_UP:
mCurrentState = LEFT_BALL_DOWN;
break;
}
}
});
animator.setStartDelay(500);
animator.setDuration(600);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new DecelerateInterpolator());
animator.start();
}
private Paint getPaint(int color) {
Paint paint = new Paint();
paint.setColor(color);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
return paint;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x, y;
double cosValue = Math.cos(PI * mCurrentAnimatorValue / 180);
double sinValue = Math.sin(PI * mCurrentAnimatorValue / 180);
drawFourBall(canvas);
switch (mCurrentState) {
case LEFT_BALL_DOWN://最左边小球往下撞击
x = circleRadius + (int) ((distance - circleRadius) * (1 - cosValue));
y = getHeight() - distance + (int) ((distance - circleRadius) * sinValue);
canvas.drawCircle(x, y, circleRadius, paint1);
break;
case RIGHT_BALL_UP://最右边小球往上撞击
x = distance + 8 * circleRadius + (int) ((distance - circleRadius) * sinValue);
y = getHeight() - distance + (int) (cosValue * (distance - circleRadius));
canvas.drawCircle(x, y, circleRadius, paint5);
break;
case RIGHT_BALL_DOWN://最右边小球往下撞击
x = distance + 8 * circleRadius + (int) ((distance - circleRadius) * (cosValue));
y = (getHeight() - distance) + (int) ((distance - circleRadius) * (sinValue));
canvas.drawCircle(x, y, circleRadius, paint5);
break;
case LEFT_BALL_UP://最左边小球往上撞击
x = distance - (int) ((distance - circleRadius) * sinValue);
y = getHeight() - distance + (int) ((distance - circleRadius) * cosValue);
canvas.drawCircle(x, y, circleRadius, paint1);
break;
}
}
private void drawFourBall(Canvas canvas) {
int y = getHeight() - circleRadius;
canvas.drawCircle(distance + 2 * circleRadius, y, circleRadius, paint2);
canvas.drawCircle(distance + 4 * circleRadius, y, circleRadius, paint3);
canvas.drawCircle(distance + 6 * circleRadius, y, circleRadius, paint4);
if (mCurrentState == LEFT_BALL_DOWN || mCurrentState == LEFT_BALL_UP) {//最左边球运动的时候，要绘制最右边的球
canvas.drawCircle(distance + 8 * circleRadius, y, circleRadius, paint5);
} else if (mCurrentState == RIGHT_BALL_UP || mCurrentState == RIGHT_BALL_DOWN) {//最右边球运动的时候，要绘制最左边的球
canvas.drawCircle(distance, y, circleRadius, paint1);
}
}
}
实现的效果如图一，有问题的话互相讨论。最后贴上想xml文件，后续会完善设置loadingview的大小和颜色之类的参数。
xml如下：
<com.define_view.LoadingView
android:layout_marginTop="20px"
android:background="#999999"
android:layout_width="200px"
android:layout_height="200px" />
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Android标题栏最右边添加按钮的实例的相关资料,希望通过本文大家能掌握如何操作，需要的朋友可以参考下2017-09-09
Kotlin可以为一个不能修改的或来自第三方库中的类编写一个新的函数。这个新增的函数就像那个原始类本来就有的函数一样，可以用普通的方法调用，这种机制的函数称为扩展函数2022-11-11
今天模仿安卓QQ空间,打开程序的启动画面和导航页面我就不做了，大家可以模仿微信的那个做一下，很简单。这次主要做一下主页面的实现,感兴趣的朋友可以参考下2013-01-01
这篇文章主要介绍了自定义视图view之环形进度条,这次介绍了4种不同的效果,直接上代码了,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Android基于广播事件机制实现简单定时提醒功能代码,较为详细的分析了Android广播事件机制及提醒功能的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细解析了Android指纹解锁方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
本文主要介绍Android 动态高斯模糊效果教程，这里整理了详细的资料及实例实现代码，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要介绍了Android编程设计模式之策略模式,结合实例形式详细分析了Android策略模式的概念、原理、实现方法及相关注意事项,需要的朋友可以参考下2017-12-12
画中画是一种特殊类型的多窗口模式，最常用于视频播放。这篇文章主要介绍了Android实现画中画功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本文通过一分钟的时间教大家实现Android遮罩引导视图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
最新评论