一步步教你写Slack的Loading动画
项目地址：https://github.com/JeasonWong/SlackLoadingView
老规矩，先上效果。
图好大。。
说下第一眼看到这个动画后的思路：
+两根平行线，要用到直线方程 y=kx+b
+另外两根平行线，与之前两根平行线的斜率相乘为-1，即k1*k2=-1
+线条做圆周运动就是k值的不断变化
+然后就是简单的线条长度变化
我相信很多人第一眼会和我有类似的思路，但是当我上了个厕所后意识到我想复杂了~
说下上完厕所后的思路：
不要想着线条是斜的，就是一个普通的线段，一个LineTo搞定（startX和stopX一样，仅Y不同）
线条的垂直更容易，直接Canvas翻转（转过后再转回）
整个动画的圆周运动也是Canvas翻转（转过后不转回）
线条的单度变化依然用属性动画（这是必须的。。）
动画开始前就让整个Canvas旋转
这样一来就太容易了。
我把动画分成了四步：
画布旋转及线条变化动画（Canvas Rotate Line Change）
画布旋转动画（Canvas Rotate）
画布旋转圆圈变化动画（Canvas Rotate Circle Change）
线条变化动画（Line Change）
详细说明前先介绍下成员变量和一些初始化
成员变量
//静止状态
private final int STATUS_STILL = 0;
//加载状态
private final int STATUS_LOADING = 1;
//线条最大长度
private final int MAX_LINE_LENGTH = dp2px(getContext(), 120);
//线条最短长度
private final int MIN_LINE_LENGTH = dp2px(getContext(), 40);
//最大间隔时长
private final int MAX_DURATION = 3000;
//最小间隔时长
private final int MIN_DURATION = 500;
private Paint mPaint;
private int[] mColors = new int[]{0xB07ECBDA, 0xB0E6A92C, 0xB0D6014D, 0xB05ABA94};
private int mWidth, mHeight;
//动画间隔时长
private int mDuration = MIN_DURATION;
//线条总长度
private int mEntireLineLength = MIN_LINE_LENGTH;
//圆半径
private int mCircleRadius;
//所有动画
private List<Animator> mAnimList = new ArrayList<>();
//Canvas起始旋转角度
private final int CANVAS_ROTATE_ANGLE = 60;
//动画当前状态
private int mStatus = STATUS_STILL;
//Canvas旋转角度
private int mCanvasAngle;
//线条长度
private float mLineLength;
//半圆Y轴位置
private float mCircleY;
//第几部动画
private int mStep;
初始化
private void initView() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(mColors[0]);
}
private void initData() {
mCanvasAngle = CANVAS_ROTATE_ANGLE;
mLineLength = mEntireLineLength;
mCircleRadius = mEntireLineLength / 5;
mPaint.setStrokeWidth(mCircleRadius * 2);
mStep = 0;
}
一、画布旋转及线条变化动画（Canvas Rotate Line Change）
/**
* Animation1
* 动画1
* Canvas Rotate Line Change
* 画布旋转及线条变化动画
*/
private void startCRLCAnim() {
Collection<Animator> animList = new ArrayList<>();
ValueAnimator canvasRotateAnim = ValueAnimator.ofInt(CANVAS_ROTATE_ANGLE + 0, CANVAS_ROTATE_ANGLE + 360);
canvasRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCanvasAngle = (int) animation.getAnimatedValue();
}
});
animList.add(canvasRotateAnim);
ValueAnimator lineWidthAnim = ValueAnimator.ofFloat(mEntireLineLength, -mEntireLineLength);
lineWidthAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mLineLength = (float) animation.getAnimatedValue();
invalidate();
}
});
animList.add(lineWidthAnim);
AnimatorSet animationSet = new AnimatorSet();
animationSet.setDuration(mDuration);
animationSet.playTogether(animList);
animationSet.setInterpolator(new LinearInterpolator());
animationSet.addListener(new AnimatorListener() {
@Override
public void onAnimationEnd(Animator animation) {
Log.d("@=>", "动画1结束");
if (mStatus == STATUS_LOADING) {
mStep++;
startCRAnim();
}
}
});
animationSet.start();
mAnimList.add(animationSet);
}
第一步动画涉及到两个动画同时进行，所以使用了AnimatorSet，这个类很强大，可以让N个动画同时进行（playTogether），也可以让N个动画顺序执行（playSequentially）。
说到这里，其实我的四个动画就是顺序进行的，但是每个动画里又有同时进行的动画，为了讲解方便，我是监听了onAnimationEnd来控制动画执行顺序，其实可以直接使用playSequentially。
上方动画就干了两件事：
1、旋转画布，从CANVAS_ROTATE_ANGLE + 0转到CANVAS_ROTATE_ANGLE + 360，CANVAS_ROTATE_ANGLE是画布初始倾斜角度
2、线条长度变化，从mEntireLineLength到-mEntireLineLength。
对应的onDraw方法：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (mStep % 4) {
case 0:
for (int i = 0; i < mColors.length; i++) {
mPaint.setColor(mColors[i]);
drawCRLC(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 - mLineLength, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mEntireLineLength, mPaint, mCanvasAngle + i * 90);
}
break;
...
}
}
...
private void drawCRLC(Canvas canvas, float startX, float startY, float stopX, float stopY, @NonNull Paint paint, int rotate) {
canvas.rotate(rotate, mWidth / 2, mHeight / 2);
canvas.drawArc(new RectF(startX - mCircleRadius, startY - mCircleRadius, startX + mCircleRadius, startY + mCircleRadius), 180, 180, true, mPaint);
canvas.drawLine(startX, startY, stopX, stopY, paint);
canvas.drawArc(new RectF(stopX - mCircleRadius, stopY - mCircleRadius, stopX + mCircleRadius, stopY + mCircleRadius), 0, 180, true, mPaint);
canvas.rotate(-rotate, mWidth / 2, mHeight / 2);
}
是不是很机智，drawCRLC做了三件事：
1、画布旋转后又旋转回来
2、画半圆（为什么要画半圆？不画整个圆？这里留个思考题。）
3、画线条
这样动画1就完成了。
二、画布旋转动画（Canvas Rotate）
/**
* Animation2
* 动画2
* Canvas Rotate
* 画布旋转动画
*/
private void startCRAnim() {
ValueAnimator canvasRotateAnim = ValueAnimator.ofInt(mCanvasAngle, mCanvasAngle + 180);
canvasRotateAnim.setDuration(mDuration / 2);
canvasRotateAnim.setInterpolator(new LinearInterpolator());
canvasRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCanvasAngle = (int) animation.getAnimatedValue();
invalidate();
}
});
canvasRotateAnim.addListener(new AnimatorListener() {
@Override
public void onAnimationEnd(Animator animation) {
Log.d("@=>", "动画2结束");
if (mStatus == STATUS_LOADING) {
mStep++;
startCRCCAnim();
}
}
});
canvasRotateAnim.start();
mAnimList.add(canvasRotateAnim);
}
...
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (mStep % 4) {
...
case 1:
for (int i = 0; i < mColors.length; i++) {
mPaint.setColor(mColors[i]);
drawCR(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mEntireLineLength, mPaint, mCanvasAngle + i * 90);
}
break;
...
}
}
...
private void drawCR(Canvas canvas, float x, float y, @NonNull Paint paint, int rotate) {
canvas.rotate(rotate, mWidth / 2, mHeight / 2);
canvas.drawCircle(x, y, mCircleRadius, paint);
canvas.rotate(-rotate, mWidth / 2, mHeight / 2);
}
有了动画1的底子，那这个就太容易了，只是简单的旋转Canvas。
三、画布旋转圆圈变化动画（Canvas Rotate Circle Change）
/**
* Animation3
* 动画3
* Canvas Rotate Circle Change
* 画布旋转圆圈变化动画
*/
private void startCRCCAnim() {
Collection<Animator> animList = new ArrayList<>();
ValueAnimator canvasRotateAnim = ValueAnimator.ofInt(mCanvasAngle, mCanvasAngle + 90, mCanvasAngle + 180);
canvasRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCanvasAngle = (int) animation.getAnimatedValue();
}
});
animList.add(canvasRotateAnim);
ValueAnimator circleYAnim = ValueAnimator.ofFloat(mEntireLineLength, mEntireLineLength / 4, mEntireLineLength);
circleYAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCircleY = (float) animation.getAnimatedValue();
invalidate();
}
});
animList.add(circleYAnim);
AnimatorSet animationSet = new AnimatorSet();
animationSet.setDuration(mDuration);
animationSet.playTogether(animList);
animationSet.setInterpolator(new LinearInterpolator());
animationSet.addListener(new AnimatorListener() {
@Override
public void onAnimationEnd(Animator animation) {
Log.d("@=>", "动画3结束");
if (mStatus == STATUS_LOADING) {
mStep++;
startLCAnim();
}
}
});
animationSet.start();
mAnimList.add(animationSet);
}
...
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (mStep % 4) {
...
case 2:
for (int i = 0; i < mColors.length; i++) {
mPaint.setColor(mColors[i]);
drawCRCC(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mCircleY, mPaint, mCanvasAngle + i * 90);
}
break;
...
}
}
...
private void drawCRCC(Canvas canvas, float x, float y, @NonNull Paint paint, int rotate) {
canvas.rotate(rotate, mWidth / 2, mHeight / 2);
canvas.drawCircle(x, y, mCircleRadius, paint);
canvas.rotate(-rotate, mWidth / 2, mHeight / 2);
}
动画3做了两件事：
1、旋转Canvas
2、变化Circle的Y坐标，达到往里缩的效果
四、线条变化动画（Line Change）
/**
* Animation4
* 动画4
* Line Change
* 线条变化动画
*/
private void startLCAnim() {
ValueAnimator lineWidthAnim = ValueAnimator.ofFloat(mEntireLineLength, -mEntireLineLength);
lineWidthAnim.setDuration(mDuration);
lineWidthAnim.setInterpolator(new LinearInterpolator());
lineWidthAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mLineLength = (float) animation.getAnimatedValue();
invalidate();
}
});
lineWidthAnim.addListener(new AnimatorListener() {
@Override
public void onAnimationEnd(Animator animation) {
Log.d("@=>", "动画4结束");
if (mStatus == STATUS_LOADING) {
mStep++;
startCRLCAnim();
}
}
});
lineWidthAnim.start();
mAnimList.add(lineWidthAnim);
}
...
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (mStep % 4) {
...
case 3:
for (int i = 0; i < mColors.length; i++) {
mPaint.setColor(mColors[i]);
drawLC(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mEntireLineLength, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mLineLength, mPaint, mCanvasAngle + i * 90);
}
break;
}
}
...
private void drawLC(Canvas canvas, float startX, float startY, float stopX, float stopY, @NonNull Paint paint, int rotate) {
canvas.rotate(rotate, mWidth / 2, mHeight / 2);
canvas.drawArc(new RectF(startX - mCircleRadius, startY - mCircleRadius, startX + mCircleRadius, startY + mCircleRadius), 0, 180, true, mPaint);
canvas.drawLine(startX, startY, stopX, stopY, paint);
canvas.drawArc(new RectF(stopX - mCircleRadius, stopY - mCircleRadius, stopX + mCircleRadius, stopY + mCircleRadius), 180, 180, true, mPaint);
canvas.rotate(-rotate, mWidth / 2, mHeight / 2);
}
动画4只做了线条的变化。
这样整个Slack的Loading动画就完成了，是不是很简单。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持菜鸟教程(cainiaojc.com)。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#cainiaojc.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
菜鸟教程
猜你喜欢
- 总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
- android app进行代码混淆实例详解
- Android仿即刻首页垂直滚动图,炫酷到底！
- jQuery层次选择器用法示例
- PHP实现支持加盐的图片加密解密
- android 显示gif图片实例详解
- jQuery基本过滤选择器用法示例
- 关于Android HTML5 audio autoplay无效问题的解决方案
- jQuery可见性过滤选择器用法示例
- php、java、android、ios通用的3des方法(推荐)
- javascript比较语义化版本号的实现代码
- iOS动画教你编写Slack的Loading动画进阶篇
- Android 高版本API方法在低版本系统上的兼容性处理
- js防阻塞加载的实现方法
- Java中关于内存泄漏出现的原因汇总及如何避免内存泄漏（超详细版）
- 一步步教你写Slack的Loading动画
- RxJava入门之介绍与基本运用
- Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
- 基于Ajax表单提交及后台处理简单的应用
- Android通过Path实现搜索按钮和时钟复杂效果
- 微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决
- AJAX PHP无刷新form表单提交的简单实现(推荐)
- Java基于socket编程相关知识解析
- Vuejs第十三篇之组件——杂项
- Android Fragment+FragmentTabHost组件实现常见主页面（仿微信新浪）