一款非常简单酷炫的LoadingView动画效果
作者:小猪快跑22 时间:2021-11-09 11:49:08
今天看到一个银行的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" />
来源:https://blog.csdn.net/zhujiangtaotaise/article/details/73610308
标签:LoadingView,动画
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Android 进程间通信实现原理分析
2022-01-05 10:27:35
![](https://img.aspxhome.com/file/2023/3/122223_0s.gif)
VisualStudio Community2019在安装的过程中无法进入安装界面的解决方法
2023-02-09 11:24:34
![](https://img.aspxhome.com/file/2023/7/129637_0s.png)
详解c# 多态
2021-12-07 07:12:40
![](https://img.aspxhome.com/file/2023/3/79113_0s.png)
Android使用WebView.loadUri()打开网页的方法
2022-07-18 06:17:18
Unity打包代码到DLL的实现
2022-06-28 08:38:17
![](https://img.aspxhome.com/file/2023/2/78152_0s.jpg)
Android自定义StepView仿外卖配送进度
2022-07-30 01:34:35
![](https://img.aspxhome.com/file/2023/8/137108_0s.gif)
Java HelloWorld原理分析_动力节点Java学院整理
2023-05-23 21:34:14
Java设计模式之建造者模式
2023-09-03 14:40:37
利用POI生成EXCEL文件的方法实例
2023-11-23 21:44:14
![](https://img.aspxhome.com/file/2023/3/59723_0s.png)
java插入排序 Insert sort实例
2023-07-21 07:07:37
Java Swing JProgressBar进度条的实现示例
2023-07-15 17:48:47
![](https://img.aspxhome.com/file/2023/3/80893_0s.gif)
SpringBoot一个非常蛋疼的无法启动的问题解决
2023-12-12 15:24:36
C#实现进制转换
2021-11-22 11:52:13
Java编程中利用InetAddress类确定特殊IP地址的方法
2021-06-24 23:00:12
C#文件和字节流的转换方法
2022-03-18 05:39:43
Java 中如何使用 stream 流
2021-10-09 01:13:37
通过实例深入了解java序列化
2022-12-01 17:37:39
![](https://img.aspxhome.com/file/2023/1/67461_0s.png)
Android手机卫士之获取联系人信息显示与回显
2021-08-03 21:33:07
![](https://img.aspxhome.com/file/2023/8/129048_0s.png)
Spring Boot Admin实践详解
2023-08-25 06:57:53
解决FeignClient重试机制造成的接口幂等性
2022-01-25 11:10:35