概述
上一篇我們已經(jīng)講到了一個(gè)開源框架如何實(shí)現(xiàn)了自定義的progressbar脱货，效果還是很不錯(cuò)的渠啤。那么我們?cè)撛趺丛谝粋€(gè)自定義的Drawable中實(shí)現(xiàn)動(dòng)畫效果呢军洼。接下去講一講注意的事項(xiàng)亿傅。
繼承Drawable
可以看到栓霜，如果要自己實(shí)現(xiàn)一個(gè)子類蜕青，那么需要重寫的方法就只有四個(gè)苟蹈。而且每個(gè)方法的意義都非常清楚。
public class MyDrawable extends Drawable{
@Override
public void draw(Canvas canvas) {
}
@Override
public void setAlpha(int alpha) {
}
@Override
public void setColorFilter(ColorFilter colorFilter) {
}
@Override
public int getOpacity() {
return 0;
}
}
1右核、draw
draw方法我們已經(jīng)非常熟悉了慧脱。再需要繪制圖像時(shí)，會(huì)調(diào)用這個(gè)方法贺喝。Canvas是畫布的意思菱鸥，所以的繪制操作都會(huì)由它來(lái)完成。在前面一篇博客介紹的項(xiàng)目中躏鱼，是調(diào)用mLoadingRender.draw(canvas);來(lái)實(shí)現(xiàn)的氮采。
2、setAlpha
這是一個(gè)設(shè)置透明度的方法染苛。如果設(shè)置了透明度扳抽，那么可以傳遞給畫筆Paint，前一篇的項(xiàng)目中是在Render中調(diào)用了mPaint.setAlpha(alpha);方法。0（0x00）表示完全透明贸呢，255（0xFF）表示完全不透明镰烧。
3、setColorFilter
如果一個(gè)Drawable設(shè)置了一個(gè)顏色過(guò)濾器楞陷，那么在繪制出來(lái)之前怔鳖，被繪制內(nèi)容的每一個(gè)像素都會(huì)被顏色過(guò)濾器改變。項(xiàng)目在Render中調(diào)用了mPaint.setColorFilter(cf);方法固蛾。ColorFilter是一個(gè)抽象類结执，他有一個(gè)比較好用的子類ColorMatrixColorFilter，我們可以通過(guò)設(shè)置顏色顏色舉證來(lái)改變最終的顯示效果艾凯。但是這里主要介紹Drawable献幔，ColorFilter這里不展開講。
4趾诗、getOpacity
這個(gè)方法的意思是獲得不透明度蜡感。 有幾個(gè)值：PixelFormat：UNKNOWN，TRANSLUCENT恃泪，TRANSPARENT郑兴，或者 OPAQUE。
~OPAQUE：便是完全不透明贝乎，遮蓋在他下面的所有內(nèi)容
~TRANSPARENT：透明情连，完全不顯示任何東西
~TRANSLUCENT：只有繪制的地方才覆蓋底下的內(nèi)容。
這個(gè)值览效，可以根據(jù)setAlpha中設(shè)置的值進(jìn)行調(diào)整却舀。比如，alpha == 0時(shí)設(shè)置為PixelFormat.TRANSPARENT锤灿。在alpha == 255時(shí)設(shè)置為PixelFormat.OPAQUE挽拔。在其他時(shí)候設(shè)置為PixelFormat.TRANSLUCENT。
實(shí)現(xiàn)Animatable
Drawable可以實(shí)現(xiàn)Animatable接口衡招，這個(gè)接口主要提供動(dòng)畫的三個(gè)方法。這三個(gè)方法非常簡(jiǎn)單每强。分別表示的是開始始腾，結(jié)束和動(dòng)畫是否還在運(yùn)行。在這些方法中可以啟動(dòng)屬性動(dòng)畫的開始和結(jié)束方法空执。當(dāng)然實(shí)現(xiàn)這個(gè)接口的目的是為了方便View的調(diào)用浪箭。
/**
* Interface that drawables supporting animations should implement.
*/
public interface Animatable {
/**
* Starts the drawable's animation.
*/
void start();
/**
* Stops the drawable's animation.
*/
void stop();
/**
* Indicates whether the animation is running.
*
* @return True if the animation is running, false otherwise.
*/
boolean isRunning();
}
View
前面已經(jīng)降到了Drawable中要實(shí)現(xiàn)的方法和繼承的接口，那么在哪里創(chuàng)建和使用Drawable呢辨绊？可以創(chuàng)建一個(gè)自定義的View奶栖，這里簡(jiǎn)單起見(jiàn)，我們自定義一個(gè)View繼承自ImageView。
這里我們可以在幾個(gè)地方開始動(dòng)畫宣鄙，常見(jiàn)的是在onAttachedToWindow和onDetachedFromWindow的時(shí)候設(shè)置是否開始和結(jié)束袍镀。然后自定義View持有我們自定義的Drawable。
public class MyView extends ImageView {
private MyDrawable mDrawable;
public MyView(Context context) {
super(context);
init();
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mDrawable = new MyDrawable(getContext());
setImageDrawable(mDrawable);
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
startAnimation();
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
stopAnimation();
}
@Override
protected void onVisibilityChanged(@NonNull View changedView, int visibility) {
super.onVisibilityChanged(changedView, visibility);
if (visibility == View.VISIBLE) {
startAnimation();
} else {
stopAnimation();
}
}
@Override
protected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) {
super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
if (gainFocus) {
startAnimation();
} else {
stopAnimation();
}
}
private void startAnimation() {
mDrawable.start();
}
private void stopAnimation() {
mDrawable.stop();
}
}
然后使用我們的自定義View冻晤，在布局中：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_drawable"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.twinsnan.drawablesample.DrawableActivity">
<com.twinsnan.drawablesample.MyView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
現(xiàn)在可以運(yùn)行了苇羡，但是這并沒(méi)有什么用，因?yàn)槲覀冞€沒(méi)有做任何事情鼻弧。既然要實(shí)現(xiàn)動(dòng)畫设江，那么屬性動(dòng)畫是一個(gè)比較好的選擇。然后我們?cè)O(shè)置動(dòng)畫模式為無(wú)限循環(huán)攘轩，這樣就可以一直有效果了叉存。
前面沒(méi)有把Drawable寫完整，這里就寫一個(gè)非常簡(jiǎn)單的實(shí)現(xiàn)度帮，且把屬性動(dòng)畫加上去歼捏。再初始化的時(shí)候設(shè)屬性動(dòng)畫的參數(shù)，然后設(shè)置監(jiān)聽(tīng)够傍，這樣其他的準(zhǔn)備工作就完成了甫菠，接下去的事情就是考慮繪制怎么樣的一個(gè)動(dòng)畫了。
public class MyDrawable extends Drawable implements Animatable {
private static final float DEFAULT_WIDTH = 50.0F;
private static final float DEFAULT_HEIGHT = 50.0F;
private static final int DEFAULT_DURATION = 2000;
private static final int DEFAULT_COLOR = Color.LTGRAY;
private float mWidth;
private float mHeight;
private int mDuration;
private Paint mPaint;
private ValueAnimator mAnimator;
private ValueAnimator.AnimatorUpdateListener mAnimatorUpdateListener;
public MyDrawable(Context context) {
// 設(shè)置長(zhǎng)寬
mWidth = dp2px(context, DEFAULT_WIDTH);
mHeight = dp2px(context, DEFAULT_HEIGHT);
// 設(shè)置周期
mDuration = DEFAULT_DURATION;
// 設(shè)置屬性動(dòng)畫參數(shù)
mAnimator = new ValueAnimator();
mAnimator = ValueAnimator.ofFloat(0.0f, 100.0f);
mAnimator.setRepeatCount(ValueAnimator.INFINITE);
mAnimator.setDuration(DEFAULT_DURATION);
mAnimator.setDuration(mDuration);
mAnimator.setRepeatMode(ValueAnimator.RESTART);
mAnimator.setInterpolator(new LinearInterpolator());
// 設(shè)置畫筆參數(shù)
mPaint = new Paint();
mPaint.setColor(DEFAULT_COLOR);
mPaint.setAntiAlias(true);
// 設(shè)置動(dòng)畫的回調(diào)
mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// TODO: 2016/11/22 去做一些調(diào)整繪制參數(shù)的工作
invalidateSelf();
}
};
}
@Override
public void start() {
mAnimator.addUpdateListener(mAnimatorUpdateListener);
mAnimator.start();
}
@Override
public void stop() {
mAnimator.removeUpdateListener(mAnimatorUpdateListener);
mAnimator.end();
}
@Override
public boolean isRunning() {
return mAnimator.isRunning();
}
@Override
public void draw(Canvas canvas) {
}
@Override
public void setAlpha(int alpha) {
mPaint.setAlpha(alpha);
}
@Override
public void setColorFilter(ColorFilter colorFilter) {
mPaint.setColorFilter(colorFilter);
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
// 獲取默認(rèn)的高度
@Override
public int getIntrinsicHeight() {
return (int) mHeight;
}
// 獲取默認(rèn)的寬度
@Override
public int getIntrinsicWidth() {
return (int) mWidth;
}
public float dp2px(Context context, float dpValue) {
float scale = context.getResources().getDisplayMetrics().density;
return dpValue * scale;
}
}
Drawable
接下去冕屯，我們用drawable來(lái)完成一個(gè)鐘擺的動(dòng)畫效果寂诱。我們假設(shè)鐘擺的運(yùn)動(dòng)是一個(gè)余弦運(yùn)動(dòng)。每次擺動(dòng)到對(duì)面為1s安聘，那么計(jì)算就比較簡(jiǎn)單了痰洒。如下是最后完成的代碼：
public class MyDrawable extends Drawable implements Animatable {
private static final float DEFAULT_WIDTH = 50.0f;
private static final float DEFAULT_HEIGHT = 50.0f;
private static final float DEFAULT_LINE_WIDTH = 2.0f;
private static final float DEFAULT_BALL_RADIUS = 10.0f;
private static final float DEFAULT_POINT_RADIUS = 3.0f;
private static final float DEFAULT_MAX_ANGLE = (float) (2 * Math.PI / 24.0f);
private static final int DEFAULT_DURATION = 2000;
private static final int DEFAULT_COLOR = Color.RED;
private float mWidth;
private float mHeight;
private float mMaxAngle;
private float mLineWidth;
private float mBallRadius;
private float mFixedPointRadius;
private float mLineLength;
private float mCurrentX;
private float mCurrentY;
private int mDuration;
private Paint mPaint;
private ValueAnimator mAnimator;
private ValueAnimator.AnimatorUpdateListener mAnimatorUpdateListener;
public MyDrawable(Context context) {
// 設(shè)置長(zhǎng)寬
mWidth = dp2px(context, DEFAULT_WIDTH);
mHeight = dp2px(context, DEFAULT_HEIGHT);
// 線的粗細(xì)
mLineWidth = dp2px(context, DEFAULT_LINE_WIDTH);
// 球的半徑
mBallRadius = dp2px(context, DEFAULT_BALL_RADIUS);
// 固定點(diǎn)的半徑
mFixedPointRadius = dp2px(context, DEFAULT_POINT_RADIUS);
// 線的長(zhǎng)度
mLineLength = dp2px(context, DEFAULT_WIDTH * 0.75f);
// 設(shè)置最大角度
mMaxAngle = DEFAULT_MAX_ANGLE;
// 設(shè)置周期
mDuration = DEFAULT_DURATION;
// 設(shè)置屬性動(dòng)畫參數(shù)
mAnimator = new ValueAnimator();
mAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
mAnimator.setRepeatCount(ValueAnimator.INFINITE);
mAnimator.setDuration(DEFAULT_DURATION);
mAnimator.setDuration(mDuration);
mAnimator.setRepeatMode(ValueAnimator.RESTART);
mAnimator.setInterpolator(new LinearInterpolator());
// 設(shè)置畫筆參數(shù)
mPaint = new Paint();
mPaint.setColor(DEFAULT_COLOR);
mPaint.setAntiAlias(true);
// 設(shè)置動(dòng)畫的回調(diào)
mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
calculate((float) animation.getAnimatedValue());
invalidateSelf();
}
};
}
@Override
public void start() {
mAnimator.addUpdateListener(mAnimatorUpdateListener);
mAnimator.start();
}
@Override
public void stop() {
mAnimator.removeUpdateListener(mAnimatorUpdateListener);
mAnimator.end();
}
@Override
public boolean isRunning() {
return mAnimator.isRunning();
}
@Override
public void draw(@NonNull Canvas canvas) {
int saveCount = canvas.save();
float centerX = mWidth / 2.0f;
float centerY = 0;
// 畫固定點(diǎn)
mPaint.setStrokeWidth(mFixedPointRadius * 2);
RectF pointRectF = new RectF(centerX - mFixedPointRadius, centerY - mFixedPointRadius, centerX + mFixedPointRadius, centerY + mFixedPointRadius);
canvas.drawArc(pointRectF, 0, 360, true, mPaint);
// 畫線
mPaint.setStrokeWidth(mLineWidth);
canvas.drawLine(mWidth / 2.0f, 0, mCurrentX, mCurrentY, mPaint);
// 畫小球
RectF ballRectF = new RectF(mCurrentX - mBallRadius, mCurrentY - mBallRadius, mCurrentX + mBallRadius, mCurrentY + mBallRadius);
mPaint.setStrokeWidth(mBallRadius * 2);
canvas.drawArc(ballRectF, 0, 360, true, mPaint);
canvas.restoreToCount(saveCount);
}
@Override
public void setAlpha(int alpha) {
mPaint.setAlpha(alpha);
}
@Override
public void setColorFilter(ColorFilter colorFilter) {
mPaint.setColorFilter(colorFilter);
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
// 獲取默認(rèn)的高度
@Override
public int getIntrinsicHeight() {
return (int) mHeight;
}
// 獲取默認(rèn)的寬度
@Override
public int getIntrinsicWidth() {
return (int) mWidth;
}
public float dp2px(Context context, float dpValue) {
float scale = context.getResources().getDisplayMetrics().density;
return dpValue * scale;
}
private void calculate(float animatedValue) {
float currentAngle = (float) (-Math.cos(animatedValue * Math.PI * 2) * mMaxAngle);
mCurrentX = (float) (mWidth / 2.0f + mLineLength * Math.sin(currentAngle));
mCurrentY = (float) (mLineLength * Math.cos(currentAngle));
}
}
這個(gè)自定控件的大致雛形已經(jīng)有了，那么我們來(lái)看下效果吧浴韭。（錄制幀數(shù)不是很高丘喻，沒(méi)有完全展示效果）
這里大家應(yīng)該已經(jīng)明白一個(gè)自定義的Drawable應(yīng)該怎么寫了，主要的邏輯都在draw方法中念颈，動(dòng)畫是由屬性動(dòng)畫提供泉粉。
做一些修飾
