一個絢麗的loading動效分析與實現！
最終效果以下
從效果上看，咱們須要考慮如下幾個問題：
1.葉子的隨機產生；
2.葉子隨着一條正餘弦曲線移動；
3.葉子在移動的時候旋轉，旋轉方向隨機，正時針或逆時針；
4.葉子遇到進度條，彷佛是融合進入；
5.葉子不能超出最左邊的弧角；
7.葉子飄出時的角度不是一致，走的曲線的振幅也有差異，不然太有規律性，缺少美感； html
總的看起來，須要注意和麻煩的地方主要是以上幾點，固然還有一些細節問題，好比最左邊是圓弧等等；
那接下來咱們將效果進行分解，而後逐個擊破：
整個效果來講，咱們須要的圖主要是飛動的小葉子和右邊旋轉的風扇，其餘的部分均可以用色值進行繪製，固然咱們爲了方便，就連底部框一塊兒切了；
先從gif 圖裏把飛動的小葉子和右邊旋轉的風扇、底部框摳出來，小葉子圖以下： java
咱們須要處理的主要有兩個部分：
1. 隨着進度往前繪製的進度條；
2. 不斷飛出來的小葉片； android
咱們先處理第一部分 － 隨着進度往前繪製的進度條：
進度條的位置根據外層傳入的 progress 進行計算，能夠分爲圖中 一、二、3 三個階段： canvas
- 當progress 較小，算出的當前距離還在弧形之內時，須要繪製如圖所示 1 區域的弧形，其他部分用白色填充；
- 當 progress 算出的距離到2時，須要繪製棕色半圓弧形，其他部分用白色矩形填充；
- 當 progress 算出的距離到3 時，須要繪製棕色半圓弧形，棕色矩形，白色矩形；
- 當 progress 算出的距離到頭時，須要繪製棕色半圓弧形，棕色矩形；（能夠合併到3中）
首先根據進度條的寬度和當前進度、總進度算出當前的位置： 安全
//mProgressWidth爲進度條的寬度，根據當前進度算出進度條的位置 mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;
而後按照上面的邏輯進行繪製，其中須要計算上圖中的紅色弧角角度，計算方法以下：markdown
// 單邊角度
int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)/ (float) mArcRadius));
Math.acos() －反餘弦函數；
Math.toDegrees() － 弧度轉化爲角度，Math.toRadians 角度轉化爲弧度多線程
因此圓弧的起始點爲：app
int startAngle = 180 - angle;
圓弧劃過的角度爲：2 * angle dom
這一塊的代碼以下：ide
// mProgressWidth爲進度條的寬度，根據當前進度算出進度條的位置
mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;
// 即當前位置在圖中所示1範圍內
if (mCurrentProgressPosition < mArcRadius) {
Log.i(TAG, "mProgress = " + mProgress + "---mCurrentProgressPosition = "
+ mCurrentProgressPosition
+ "--mArcProgressWidth" + mArcRadius);
// 1.繪製白色ARC，繪製orange ARC
// 2.繪製白色矩形
// 1.繪製白色ARC
canvas.drawArc(mArcRectF, 90, 180, false, mWhitePaint);
// 2.繪製白色矩形
mWhiteRectF.left = mArcRightLocation;
canvas.drawRect(mWhiteRectF, mWhitePaint);
// 3.繪製棕色 ARC
// 單邊角度
int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)
/ (float) mArcRadius));
// 起始的位置
int startAngle = 180 - angle;
// 掃過的角度
int sweepAngle = 2 * angle;
Log.i(TAG, "startAngle = " + startAngle);
canvas.drawArc(mArcRectF, startAngle, sweepAngle, false, mOrangePaint);
} else {
Log.i(TAG, "mProgress = " + mProgress + "---transfer-----mCurrentProgressPosition = "
+ mCurrentProgressPosition
+ "--mArcProgressWidth" + mArcRadius);
// 1.繪製white RECT
// 2.繪製Orange ARC
// 3.繪製orange RECT
// 1.繪製white RECT
mWhiteRectF.left = mCurrentProgressPosition;
canvas.drawRect(mWhiteRectF, mWhitePaint);
// 2.繪製Orange ARC
canvas.drawArc(mArcRectF, 90, 180, false, mOrangePaint);
// 3.繪製orange RECT
mOrangeRectF.left = mArcRightLocation;
mOrangeRectF.right = mCurrentProgressPosition;
canvas.drawRect(mOrangeRectF, mOrangePaint);
}
葉子部分
首先根據效果狀況基本肯定出 曲線函數，標準函數方程爲：y = A(wx+Q)+h，其中w影響週期，A影響振幅 ，週期T＝ 2 * Math.PI/w;
根據效果能夠看出，週期大體爲總進度長度，因此肯定w＝(float) ((float) 2 * Math.PI /mProgressWidth)；
仔細觀察效果，咱們能夠發現，葉子飄動的過程當中振幅不是徹底一致的，產生一種錯落的效果，既然如此，咱們給葉子定義一個Type，根據Type 肯定不一樣的振幅；
咱們建立一個葉子對象：
private class Leaf {
// 在繪製部分的位置
float x, y;
// 控制葉子飄動的幅度
StartType type;
// 旋轉角度
int rotateAngle;
// 旋轉方向--0表明順時針，1表明逆時針
int rotateDirection;
// 起始時間(ms)
long startTime;
}
類型採用枚舉進行定義，其實就是用來區分不一樣的振幅：
private enum StartType {
LITTLE, MIDDLE, BIG
}
建立一個LeafFactory類用於建立一個或多個葉子信息：
private class LeafFactory {
private static final int MAX_LEAFS = 6;
Random random = new Random();
// 生成一個葉子信息
public Leaf generateLeaf() {
Leaf leaf = new Leaf();
int randomType = random.nextInt(3);
// 隨時類型－ 隨機振幅
StartType type = StartType.MIDDLE;
switch (randomType) {
case 0:
break;
case 1:
type = StartType.LITTLE;
break;
case 2:
type = StartType.BIG;
break;
default:
break;
}
leaf.type = type;
// 隨機起始的旋轉角度
leaf.rotateAngle = random.nextInt(360);
// 隨機旋轉方向（順時針或逆時針）
leaf.rotateDirection = random.nextInt(2);
// 爲了產生交錯的感受，讓開始的時間有必定的隨機性
mAddTime += random.nextInt((int) (LEAF_FLOAT_TIME * 1.5));
leaf.startTime = System.currentTimeMillis() + mAddTime;
return leaf;
}
// 根據最大葉子數產生葉子信息
public List<Leaf> generateLeafs() {
return generateLeafs(MAX_LEAFS);
}
// 根據傳入的葉子數量產生葉子信息
public List<Leaf> generateLeafs(int leafSize) {
List<Leaf> leafs = new LinkedList<Leaf>();
for (int i = 0; i < leafSize; i++) {
leafs.add(generateLeaf());
}
return leafs;
}
定義兩個常亮分別記錄中等振幅和之間的振幅差：
// 中等振幅大小
private static final int MIDDLE_AMPLITUDE = 13;
// 不一樣類型之間的振幅差距
private static final int AMPLITUDE_DISPARITY = 5;
// 中等振幅大小
private int mMiddleAmplitude = MIDDLE_AMPLITUDE;
// 振幅差
private int mAmplitudeDisparity = AMPLITUDE_DISPARITY;
有了以上信息，咱們則能夠獲取到葉子的Y值：
// 經過葉子信息獲取當前葉子的Y值
private int getLocationY(Leaf leaf) {
// y = A(wx+Q)+h
float w = (float) ((float) 2 * Math.PI / mProgressWidth);
float a = mMiddleAmplitude;
switch (leaf.type) {
case LITTLE:
// 小振幅 ＝ 中等振幅 － 振幅差
a = mMiddleAmplitude - mAmplitudeDisparity;
break;
case MIDDLE:
a = mMiddleAmplitude;
break;
case BIG:
// 小振幅 ＝ 中等振幅 + 振幅差
a = mMiddleAmplitude + mAmplitudeDisparity;
break;
default:
break;
}
Log.i(TAG, "---a = " + a + "---w = " + w + "--leaf.x = " + leaf.x);
return (int) (a * Math.sin(w * leaf.x)) + mArcRadius * 2 / 3;
}
繪製葉子
/** * 繪製葉子 * * @param canvas */
private void drawLeafs(Canvas canvas) {
long currentTime = System.currentTimeMillis();
for (int i = 0; i < mLeafInfos.size(); i++) {
Leaf leaf = mLeafInfos.get(i);
if (currentTime > leaf.startTime && leaf.startTime != 0) {
// 繪製葉子－－根據葉子的類型和當前時間得出葉子的（x，y）
getLeafLocation(leaf, currentTime);
// 根據時間計算旋轉角度
canvas.save();
// 經過Matrix控制葉子旋轉
Matrix matrix = new Matrix();
float transX = mLeftMargin + leaf.x;
float transY = mLeftMargin + leaf.y;
Log.i(TAG, "left.x = " + leaf.x + "--leaf.y=" + leaf.y);
matrix.postTranslate(transX, transY);
// 經過時間關聯旋轉角度，則能夠直接經過修改LEAF_ROTATE_TIME調節葉子旋轉快慢
float rotateFraction = ((currentTime - leaf.startTime) % LEAF_ROTATE_TIME)
/ (float) LEAF_ROTATE_TIME;
int angle = (int) (rotateFraction * 360);
// 根據葉子旋轉方向肯定葉子旋轉角度
int rotate = leaf.rotateDirection == 0 ? angle + leaf.rotateAngle : -angle
+ leaf.rotateAngle;
matrix.postRotate(rotate, transX
+ mLeafWidth / 2, transY + mLeafHeight / 2);
canvas.drawBitmap(mLeafBitmap, matrix, mBitmapPaint);
canvas.restore();
} else {
continue;
}
}
}
LeafLoadingView完整代碼
package com.example.csdnblog4;
import java.util.LinkedList;
import java.util.List;
import java.util.Random;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
public class LeafLoadingView extends View {
private static final String TAG = "LeafLoadingView";
// 淡白色
private static final int WHITE_COLOR = 0xfffde399;
// 橙色
private static final int ORANGE_COLOR = 0xffffa800;
// 中等振幅大小
private static final int MIDDLE_AMPLITUDE = 13;
// 不一樣類型之間的振幅差距
private static final int AMPLITUDE_DISPARITY = 5;
// 總進度
private static final int TOTAL_PROGRESS = 100;
// 葉子飄動一個週期所花的時間
private static final long LEAF_FLOAT_TIME = 3000;
// 葉子旋轉一週須要的時間
private static final long LEAF_ROTATE_TIME = 2000;
// 用於控制繪製的進度條距離左／上／下的距離
private static final int LEFT_MARGIN = 9;
// 用於控制繪製的進度條距離右的距離
private static final int RIGHT_MARGIN = 25;
private int mLeftMargin, mRightMargin;
// 中等振幅大小
private int mMiddleAmplitude = MIDDLE_AMPLITUDE;
// 振幅差
private int mAmplitudeDisparity = AMPLITUDE_DISPARITY;
// 葉子飄動一個週期所花的時間
private long mLeafFloatTime = LEAF_FLOAT_TIME;
// 葉子旋轉一週須要的時間
private long mLeafRotateTime = LEAF_ROTATE_TIME;
private Resources mResources;
private Bitmap mLeafBitmap;
private int mLeafWidth, mLeafHeight;
private Bitmap mOuterBitmap;
private Rect mOuterSrcRect, mOuterDestRect;
private int mOuterWidth, mOuterHeight;
private int mTotalWidth, mTotalHeight;
private Paint mBitmapPaint, mWhitePaint, mOrangePaint;
private RectF mWhiteRectF, mOrangeRectF, mArcRectF;
// 當前進度
private int mProgress;
// 所繪製的進度條部分的寬度
private int mProgressWidth;
// 當前所在的繪製的進度條的位置
private int mCurrentProgressPosition;
// 弧形的半徑
private int mArcRadius;
// arc的右上角的x座標，也是矩形x座標的起始點
private int mArcRightLocation;
// 用於產生葉子信息
private LeafFactory mLeafFactory;
// 產生出的葉子信息
private List<Leaf> mLeafInfos;
// 用於控制隨機增長的時間不抱團
private int mAddTime;
public LeafLoadingView(Context context, AttributeSet attrs) {
super(context, attrs);
mResources = getResources();
mLeftMargin = UiUtils.dipToPx(context, LEFT_MARGIN);
mRightMargin = UiUtils.dipToPx(context, RIGHT_MARGIN);
mLeafFloatTime = LEAF_FLOAT_TIME;
mLeafRotateTime = LEAF_ROTATE_TIME;
initBitmap();
initPaint();
mLeafFactory = new LeafFactory();
mLeafInfos = mLeafFactory.generateLeafs();
}
private void initPaint() {
mBitmapPaint = new Paint();
mBitmapPaint.setAntiAlias(true);
mBitmapPaint.setDither(true);
mBitmapPaint.setFilterBitmap(true);
mWhitePaint = new Paint();
mWhitePaint.setAntiAlias(true);
mWhitePaint.setColor(WHITE_COLOR);
mOrangePaint = new Paint();
mOrangePaint.setAntiAlias(true);
mOrangePaint.setColor(ORANGE_COLOR);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 繪製進度條和葉子
// 之因此把葉子放在進度條裏繪製，主要是層級緣由
drawProgressAndLeafs(canvas);
// drawLeafs(canvas);
canvas.drawBitmap(mOuterBitmap, mOuterSrcRect, mOuterDestRect, mBitmapPaint);
postInvalidate();
}
private void drawProgressAndLeafs(Canvas canvas) {
if (mProgress >= TOTAL_PROGRESS) {
mProgress = 0;
}
// mProgressWidth爲進度條的寬度，根據當前進度算出進度條的位置
mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;
// 即當前位置在圖中所示1範圍內
if (mCurrentProgressPosition < mArcRadius) {
Log.i(TAG, "mProgress = " + mProgress + "---mCurrentProgressPosition = "
+ mCurrentProgressPosition
+ "--mArcProgressWidth" + mArcRadius);
// 1.繪製白色ARC，繪製orange ARC
// 2.繪製白色矩形
// 1.繪製白色ARC
canvas.drawArc(mArcRectF, 90, 180, false, mWhitePaint);
// 2.繪製白色矩形
mWhiteRectF.left = mArcRightLocation;
canvas.drawRect(mWhiteRectF, mWhitePaint);
// 繪製葉子
drawLeafs(canvas);
// 3.繪製棕色 ARC
// 單邊角度
int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)
/ (float) mArcRadius));
// 起始的位置
int startAngle = 180 - angle;
// 掃過的角度
int sweepAngle = 2 * angle;
canvas.drawArc(mArcRectF, startAngle, sweepAngle, false, mOrangePaint);
} else {
Log.i(TAG, "mProgress = " + mProgress + "---transfer-----mCurrentProgressPosition = "
+ mCurrentProgressPosition
+ "--mArcProgressWidth" + mArcRadius);
// 1.繪製white RECT
// 2.繪製Orange ARC
// 3.繪製orange RECT
// 這個層級進行繪製能讓葉子感受是融入棕色進度條中
// 1.繪製white RECT
mWhiteRectF.left = mCurrentProgressPosition;
canvas.drawRect(mWhiteRectF, mWhitePaint);
// 繪製葉子
drawLeafs(canvas);
// 2.繪製Orange ARC
canvas.drawArc(mArcRectF, 90, 180, false, mOrangePaint);
// 3.繪製orange RECT
mOrangeRectF.left = mArcRightLocation;
mOrangeRectF.right = mCurrentProgressPosition;
canvas.drawRect(mOrangeRectF, mOrangePaint);
}
}
/** * 繪製葉子 * * @param canvas */
private void drawLeafs(Canvas canvas) {
mLeafRotateTime = mLeafRotateTime <= 0 ? LEAF_ROTATE_TIME : mLeafRotateTime;
long currentTime = System.currentTimeMillis();
for (int i = 0; i < mLeafInfos.size(); i++) {
Leaf leaf = mLeafInfos.get(i);
if (currentTime > leaf.startTime && leaf.startTime != 0) {
// 繪製葉子－－根據葉子的類型和當前時間得出葉子的（x，y）
getLeafLocation(leaf, currentTime);
// 根據時間計算旋轉角度
canvas.save();
// 經過Matrix控制葉子旋轉
Matrix matrix = new Matrix();
float transX = mLeftMargin + leaf.x;
float transY = mLeftMargin + leaf.y;
Log.i(TAG, "left.x = " + leaf.x + "--leaf.y=" + leaf.y);
matrix.postTranslate(transX, transY);
// 經過時間關聯旋轉角度，則能夠直接經過修改LEAF_ROTATE_TIME調節葉子旋轉快慢
float rotateFraction = ((currentTime - leaf.startTime) % mLeafRotateTime)
/ (float) mLeafRotateTime;
int angle = (int) (rotateFraction * 360);
// 根據葉子旋轉方向肯定葉子旋轉角度
int rotate = leaf.rotateDirection == 0 ? angle + leaf.rotateAngle : -angle
+ leaf.rotateAngle;
matrix.postRotate(rotate, transX
+ mLeafWidth / 2, transY + mLeafHeight / 2);
canvas.drawBitmap(mLeafBitmap, matrix, mBitmapPaint);
canvas.restore();
} else {
continue;
}
}
}
private void getLeafLocation(Leaf leaf, long currentTime) {
long intervalTime = currentTime - leaf.startTime;
mLeafFloatTime = mLeafFloatTime <= 0 ? LEAF_FLOAT_TIME : mLeafFloatTime;
if (intervalTime < 0) {
return;
} else if (intervalTime > mLeafFloatTime) {
leaf.startTime = System.currentTimeMillis()
+ new Random().nextInt((int) mLeafFloatTime);
}
float fraction = (float) intervalTime / mLeafFloatTime;
leaf.x = (int) (mProgressWidth - mProgressWidth * fraction);
leaf.y = getLocationY(leaf);
}
// 經過葉子信息獲取當前葉子的Y值
private int getLocationY(Leaf leaf) {
// y = A(wx+Q)+h
float w = (float) ((float) 2 * Math.PI / mProgressWidth);
float a = mMiddleAmplitude;
switch (leaf.type) {
case LITTLE:
// 小振幅 ＝ 中等振幅 － 振幅差
a = mMiddleAmplitude - mAmplitudeDisparity;
break;
case MIDDLE:
a = mMiddleAmplitude;
break;
case BIG:
// 小振幅 ＝ 中等振幅 + 振幅差
a = mMiddleAmplitude + mAmplitudeDisparity;
break;
default:
break;
}
Log.i(TAG, "---a = " + a + "---w = " + w + "--leaf.x = " + leaf.x);
return (int) (a * Math.sin(w * leaf.x)) + mArcRadius * 2 / 3;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
Log.i("test", "widthMeasureSpec=="+MeasureSpec.getSize(widthMeasureSpec)+",heightMeasureSpec=="+MeasureSpec.getSize(heightMeasureSpec));
int w=MeasureSpec.getSize(widthMeasureSpec);
int h=MeasureSpec.getSize(heightMeasureSpec);
mTotalWidth = w;
mTotalHeight = h;
mProgressWidth = mTotalWidth - mLeftMargin - mRightMargin;
mArcRadius = (mTotalHeight - 2 * mLeftMargin) / 2;
mOuterSrcRect = new Rect(0, 0, mOuterWidth, mOuterHeight);
mOuterDestRect = new Rect(0, 0, mTotalWidth, mTotalHeight);
mWhiteRectF = new RectF(mLeftMargin + mCurrentProgressPosition, mLeftMargin, mTotalWidth
- mRightMargin,
mTotalHeight - mLeftMargin);
mOrangeRectF = new RectF(mLeftMargin + mArcRadius, mLeftMargin,
mCurrentProgressPosition
, mTotalHeight - mLeftMargin);
mArcRectF = new RectF(mLeftMargin, mLeftMargin, mLeftMargin + 2 * mArcRadius,
mTotalHeight - mLeftMargin);
mArcRightLocation = mLeftMargin + mArcRadius;
}
private void initBitmap() {
mLeafBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf)).getBitmap();
mLeafWidth = mLeafBitmap.getWidth();
mLeafHeight = mLeafBitmap.getHeight();
mOuterBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang)).getBitmap();
mOuterWidth = mOuterBitmap.getWidth();
mOuterHeight = mOuterBitmap.getHeight();
}
/* @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mTotalWidth = w; mTotalHeight = h; Log.i("test", "mTotalWidth = " + w+",mTotalHeight=="+h+"getWidth()=="+getWidth()+",getHeight"+getHeight()); mProgressWidth = mTotalWidth - mLeftMargin - mRightMargin; mArcRadius = (mTotalHeight - 2 * mLeftMargin) / 2; mOuterSrcRect = new Rect(0, 0, mOuterWidth, mOuterHeight); mOuterDestRect = new Rect(0, 0, mTotalWidth, mTotalHeight); mWhiteRectF = new RectF(mLeftMargin + mCurrentProgressPosition, mLeftMargin, mTotalWidth - mRightMargin, mTotalHeight - mLeftMargin); mOrangeRectF = new RectF(mLeftMargin + mArcRadius, mLeftMargin, mCurrentProgressPosition , mTotalHeight - mLeftMargin); mArcRectF = new RectF(mLeftMargin, mLeftMargin, mLeftMargin + 2 * mArcRadius, mTotalHeight - mLeftMargin); mArcRightLocation = mLeftMargin + mArcRadius; }*/
private enum StartType {
LITTLE, MIDDLE, BIG
}
/** * 葉子對象，用來記錄葉子主要數據 * * @author Ajian_Studio */
private class Leaf {
// 在繪製部分的位置
float x, y;
// 控制葉子飄動的幅度
StartType type;
// 旋轉角度
int rotateAngle;
// 旋轉方向--0表明順時針，1表明逆時針
int rotateDirection;
// 起始時間(ms)
long startTime;
}
private class LeafFactory {
private static final int MAX_LEAFS = 8;
Random random = new Random();
// 生成一個葉子信息
public Leaf generateLeaf() {
Leaf leaf = new Leaf();
int randomType = random.nextInt(3);
// 隨時類型－ 隨機振幅
StartType type = StartType.MIDDLE;
switch (randomType) {
case 0:
break;
case 1:
type = StartType.LITTLE;
break;
case 2:
type = StartType.BIG;
break;
default:
break;
}
leaf.type = type;
// 隨機起始的旋轉角度
leaf.rotateAngle = random.nextInt(360);
// 隨機旋轉方向（順時針或逆時針）
leaf.rotateDirection = random.nextInt(2);
// 爲了產生交錯的感受，讓開始的時間有必定的隨機性
mLeafFloatTime = mLeafFloatTime <= 0 ? LEAF_FLOAT_TIME : mLeafFloatTime;
mAddTime += random.nextInt((int) (mLeafFloatTime * 2));
leaf.startTime = System.currentTimeMillis() + mAddTime;
return leaf;
}
// 根據最大葉子數產生葉子信息
public List<Leaf> generateLeafs() {
return generateLeafs(MAX_LEAFS);
}
// 根據傳入的葉子數量產生葉子信息
public List<Leaf> generateLeafs(int leafSize) {
List<Leaf> leafs = new LinkedList<Leaf>();
for (int i = 0; i < leafSize; i++) {
leafs.add(generateLeaf());
}
return leafs;
}
}
/** * 設置中等振幅 * * @param amplitude */
public void setMiddleAmplitude(int amplitude) {
this.mMiddleAmplitude = amplitude;
}
/** * 設置振幅差 * * @param disparity */
public void setMplitudeDisparity(int disparity) {
this.mAmplitudeDisparity = disparity;
}
/** * 獲取中等振幅 * * @param amplitude */
public int getMiddleAmplitude() {
return mMiddleAmplitude;
}
/** * 獲取振幅差 * * @param disparity */
public int getMplitudeDisparity() {
return mAmplitudeDisparity;
}
/** * 設置進度 * * @param progress */
public void setProgress(int progress) {
this.mProgress = progress;
postInvalidate();
}
/** * 設置葉子飄完一個週期所花的時間 * * @param time */
public void setLeafFloatTime(long time) {
this.mLeafFloatTime = time;
}
/** * 設置葉子旋轉一週所花的時間 * * @param time */
public void setLeafRotateTime(long time) {
this.mLeafRotateTime = time;
}
/** * 獲取葉子飄完一個週期所花的時間 */
public long getLeafFloatTime() {
mLeafFloatTime = mLeafFloatTime == 0 ? LEAF_FLOAT_TIME : mLeafFloatTime;
return mLeafFloatTime;
}
/** * 獲取葉子旋轉一週所花的時間 */
public long getLeafRotateTime() {
mLeafRotateTime = mLeafRotateTime == 0 ? LEAF_ROTATE_TIME : mLeafRotateTime;
return mLeafRotateTime;
}
}
activity
package com.example.csdnblog4;
import java.util.Random;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
public class LeafLoadingActivity extends Activity implements OnSeekBarChangeListener, OnClickListener {
Handler mHandler = new Handler() {
public void handleMessage(Message msg) {
switch (msg.what) {
case REFRESH_PROGRESS:
if (mProgress < 40) {
mProgress += 1;
// 隨機800ms之內刷新一次
mHandler.sendEmptyMessageDelayed(REFRESH_PROGRESS,
new Random().nextInt(800));
mLeafLoadingView.setProgress(mProgress);
} else {
mProgress += 1;
// 隨機1200ms之內刷新一次
mHandler.sendEmptyMessageDelayed(REFRESH_PROGRESS,
new Random().nextInt(1200));
mLeafLoadingView.setProgress(mProgress);
}
break;
default:
break;
}
};
};
private static final int REFRESH_PROGRESS = 0x10;
private LeafLoadingView mLeafLoadingView;
private SeekBar mAmpireSeekBar;
private SeekBar mDistanceSeekBar;
private TextView mMplitudeText;
private TextView mDisparityText;
private View mFanView;
private Button mClearButton;
private int mProgress = 0;
private TextView mProgressText;
private View mAddProgress;
private SeekBar mFloatTimeSeekBar;
private SeekBar mRotateTimeSeekBar;
private TextView mFloatTimeText;
private TextView mRotateTimeText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.leaf_loading_layout);
initViews();
mHandler.sendEmptyMessageDelayed(REFRESH_PROGRESS, 3000);
}
private void initViews() {
mFanView = findViewById(R.id.fan_pic);
RotateAnimation rotateAnimation = AnimationUtils.initRotateAnimation(false, 1500, true,
Animation.INFINITE);
mFanView.startAnimation(rotateAnimation);
mClearButton = (Button) findViewById(R.id.clear_progress);
mClearButton.setOnClickListener(this);
mLeafLoadingView = (LeafLoadingView) findViewById(R.id.leaf_loading);
mMplitudeText = (TextView) findViewById(R.id.text_ampair);
mMplitudeText.setText(getString(R.string.current_mplitude,
mLeafLoadingView.getMiddleAmplitude()));
mDisparityText = (TextView) findViewById(R.id.text_disparity);
mDisparityText.setText(getString(R.string.current_Disparity,
mLeafLoadingView.getMplitudeDisparity()));
mAmpireSeekBar = (SeekBar) findViewById(R.id.seekBar_ampair);
mAmpireSeekBar.setOnSeekBarChangeListener(this);
mAmpireSeekBar.setProgress(mLeafLoadingView.getMiddleAmplitude());
mAmpireSeekBar.setMax(50);
mDistanceSeekBar = (SeekBar) findViewById(R.id.seekBar_distance);
mDistanceSeekBar.setOnSeekBarChangeListener(this);
mDistanceSeekBar.setProgress(mLeafLoadingView.getMplitudeDisparity());
mDistanceSeekBar.setMax(20);
mAddProgress = findViewById(R.id.add_progress);
mAddProgress.setOnClickListener(this);
mProgressText = (TextView) findViewById(R.id.text_progress);
mFloatTimeText = (TextView) findViewById(R.id.text_float_time);
mFloatTimeSeekBar = (SeekBar) findViewById(R.id.seekBar_float_time);
mFloatTimeSeekBar.setOnSeekBarChangeListener(this);
mFloatTimeSeekBar.setMax(5000);
mFloatTimeSeekBar.setProgress((int) mLeafLoadingView.getLeafFloatTime());
mFloatTimeText.setText(getResources().getString(R.string.current_float_time,
mLeafLoadingView.getLeafFloatTime()));
mRotateTimeText = (TextView) findViewById(R.id.text_rotate_time);
mRotateTimeSeekBar = (SeekBar) findViewById(R.id.seekBar_rotate_time);
mRotateTimeSeekBar.setOnSeekBarChangeListener(this);
mRotateTimeSeekBar.setMax(5000);
mRotateTimeSeekBar.setProgress((int) mLeafLoadingView.getLeafRotateTime());
mRotateTimeText.setText(getResources().getString(R.string.current_float_time,
mLeafLoadingView.getLeafRotateTime()));
}
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
if (seekBar == mAmpireSeekBar) {
mLeafLoadingView.setMiddleAmplitude(progress);
mMplitudeText.setText(getString(R.string.current_mplitude,
progress));
} else if (seekBar == mDistanceSeekBar) {
mLeafLoadingView.setMplitudeDisparity(progress);
mDisparityText.setText(getString(R.string.current_Disparity,
progress));
} else if (seekBar == mFloatTimeSeekBar) {
mLeafLoadingView.setLeafFloatTime(progress);
mFloatTimeText.setText(getResources().getString(R.string.current_float_time,
progress));
}
else if (seekBar == mRotateTimeSeekBar) {
mLeafLoadingView.setLeafRotateTime(progress);
mRotateTimeText.setText(getResources().getString(R.string.current_rotate_time,
progress));
}
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
@Override
public void onClick(View v) {
if (v == mClearButton) {
mLeafLoadingView.setProgress(0);
mHandler.removeCallbacksAndMessages(null);
mProgress = 0;
} else if (v == mAddProgress) {
mProgress++;
mLeafLoadingView.setProgress(mProgress);
mProgressText.setText(String.valueOf(mProgress));
}
}
}
layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fed255" android:orientation="vertical" >
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="100dp" android:text="loading ..." android:textColor="#FFA800" android:textSize=" 30dp" />
<RelativeLayout android:id="@+id/leaf_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="50dp" >
<com.example.csdnblog4.LeafLoadingView android:id="@+id/leaf_loading" android:layout_width="302dp" android:layout_height="61dp" android:layout_centerHorizontal="true" />
<ImageView android:id="@+id/fan_pic" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="35dp" android:src="@drawable/fengshan" />
</RelativeLayout>
<ScrollView android:layout_width="match_parent" android:layout_height="match_parent" >
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" >
<LinearLayout android:id="@+id/seek_content_one" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="15dp" >
<TextView android:id="@+id/text_ampair" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:textColor="#ffffa800" android:textSize="15dp" />
<SeekBar android:id="@+id/seekBar_ampair" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_weight="1" />
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="15dp" android:orientation="horizontal" >
<TextView android:id="@+id/text_disparity" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:textColor="#ffffa800" android:textSize="15dp" />
<SeekBar android:id="@+id/seekBar_distance" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_weight="1" />
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="15dp" android:orientation="horizontal" >
<TextView android:id="@+id/text_float_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:textColor="#ffffa800" android:textSize="15dp" />
<SeekBar android:id="@+id/seekBar_float_time" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_weight="1" />
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="15dp" android:orientation="horizontal" >
<TextView android:id="@+id/text_rotate_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:textColor="#ffffa800" android:textSize="15dp" />
<SeekBar android:id="@+id/seekBar_rotate_time" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_weight="1" />
</LinearLayout>
<Button android:id="@+id/clear_progress" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:text="去除進度條,玩轉弧線" android:textSize="18dp" />
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="15dp" android:orientation="horizontal" >
<Button android:id="@+id/add_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="增長進度: " android:textSize="18dp" />
<TextView android:id="@+id/text_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:textColor="#ffffa800" android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
注意
本文中用到了onSizeChanged方法，這個方法在這是爲了自適應界面，每次界面變化的時候都會被調用來從新計算一些參數，通常在剛進入與橫豎屏切換時調用
參考連接
本文中還用到了postInvalidate
invalidate()和postInvalidate() 的區別及使用，
Android提供了Invalidate方法實現界面刷新，可是Invalidate不能直接在線程中調用，由於他是違背了單線程模型：Android UI操做並非線程安全的，而且這些操做必須在UI線程中調用。
invalidate()是用來刷新View的，必須是在UI線程中進行工做。好比在修改某個view的顯示時，調用invalidate()才能看到從新繪製的界面。invalidate()的調用是把以前的舊的view從主UI線程隊列中pop掉。 一個Android 程序默認狀況下也只有一個進程，但一個進程下卻能夠有許多個線程。
在這麼多線程當中，把主要是負責控制UI界面的顯示、更新和控件交互的線程稱爲UI線程，因爲onCreate()方法是由UI線程執行的，因此也能夠把UI線程理解爲主線程。其他的線程能夠理解爲工做者線程。
invalidate()得在UI線程中被調動，在工做者線程中能夠經過Handler來通知UI線程進行界面更新。
而postInvalidate()在工做者線程中被調用
參考連接
Android筆記：invalidate()和postInvalidate() 的區別及使用 - Mars2639——求知de路上 - 博客頻道 - CSDN.NET
本文還涉及到單位的轉化
參考連接
Android中dip、dp、sp、pt和px的區別 - 大氣象 - 博客園
最終效果以下
參考連接
一個絢麗的loading動效分析與實現！ - Ajian_studio - 博客頻道 - CSDN.NET
源代碼下載
完成
相關文章
- 1. 一個絢麗的loading動效分析與實現！
- 2. 絢麗風車loading動效分析與實現！
- 3. 一個絢麗的downloading動效分析與實現！
- 4. android：一個絢麗的註冊動畫
- 5. 神奇的canvas——點與線繪製的絢麗動畫效果
- 6. Android 實現絢麗多彩的TextView
- 7. canvas--絢麗的時鐘效果
- 8. 10個超絢麗的HTML5動畫賞析
- 9. 【轉】Android 使用Scroller實現絢麗的ListView左右滑動刪除Item效果
- 10. Android 使用Scroller實現絢麗的ListView左右滑動刪除Item效果
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • 第一個MyBatis程序 - MyBatis教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章