從效果上看,咱們須要考慮如下幾個問題:
1.葉子的隨機產生;
2.葉子隨着一條正餘弦曲線移動;
3.葉子在移動的時候旋轉,旋轉方向隨機,正時針或逆時針;
4.葉子遇到進度條,彷佛是融合進入;
5.葉子不能超出最左邊的弧角;
7.葉子飄出時的角度不是一致,走的曲線的振幅也有差異,不然太有規律性,缺少美感; html
總的看起來,須要注意和麻煩的地方主要是以上幾點,固然還有一些細節問題,好比最左邊是圓弧等等;
那接下來咱們將效果進行分解,而後逐個擊破:
整個效果來講,咱們須要的圖主要是飛動的小葉子和右邊旋轉的風扇,其餘的部分均可以用色值進行繪製,固然咱們爲了方便,就連底部框一塊兒切了;
先從gif 圖裏把飛動的小葉子和右邊旋轉的風扇、底部框摳出來,小葉子圖以下: java
咱們須要處理的主要有兩個部分:
1. 隨着進度往前繪製的進度條;
2. 不斷飛出來的小葉片; android
咱們先處理第一部分 - 隨着進度往前繪製的進度條:
進度條的位置根據外層傳入的 progress 進行計算,能夠分爲圖中 一、二、3 三個階段: canvas
首先根據進度條的寬度和當前進度、總進度算出當前的位置: 安全
//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;
}
}
}
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;
}
}
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));
}
}
}
<?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方法,這個方法在這是爲了自適應界面,每次界面變化的時候都會被調用來從新計算一些參數,通常在剛進入與橫豎屏切換時調用
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