導航
Paint API之—— Xfermode與PorterDuff全面詳解
Paint API之—— Xfermode與PorterDuff詳解(三)動畫效果
本節(jié)引言:
本節(jié)繼續(xù)來學習Paint的API——PathEffect(路徑效果)横蜒,我們把畫筆的sytle設置為Stroke,可以 繪制一個個由線構成的圖形,而這些線偶爾會顯得單調(diào)是吧寿烟,比如你想把這些先改成虛線澈驼,又 或者想讓路徑的轉角變得圓滑等辛燥,那你就可以考慮使用這個PathEffect來實現(xiàn)了!
PathEffect和我們前面學的MaskFilter(面具)與ColorFilter(顏色 過濾器)一樣缝其,幾乎沒有可用的方法:
我們一般使用的是他的六個子類:
- ComposePathEffect
- CornerPathEffect
- DashPathEffect
- DiscretePathEffect
- PathDashPathEffect
- SumPathEffect
下面我們依次對他們的作用挎塌,以及構造方法進行分析!
1.子類作用與構造方法參數(shù)分析:
1)CornerPathEffect
CornerPathEffect(float radius)
將Path的各個連接線段之間的夾角用一種更平滑的方式連接内边,類似于圓弧與切線的效果榴都。 radius則是指定圓弧的半徑!
2)DashPathEffect
DashPathEffect(float[] intervals, float phase)
將Path的線段虛線化漠其,intervals為虛線的ON和OFF的數(shù)組嘴高,數(shù)組中元素數(shù)目需要 >= 2; 而phase則為繪制時的偏移量和屎!
3)DiscretePathEffect
DiscretePathEffect(float segmentLength, float deviation)
打散Path的線段拴驮,使得在原來路徑的基礎上發(fā)生打散效果。 segmentLength指定最大的段長柴信,deviation則為繪制時的偏離量套啤。
4)PathDashPathEffect
PathDashPathEffect(Path shape, float advance, float phase, PathDashPathEffect.Style style)
作用是使用Path圖形來填充當前的路徑,shape指的填充圖形随常,advance是每個圖形間的間隔潜沦, style則是該類自由的枚舉值,有三種情況:ROTATE绪氛、MORPH和TRANSLATE唆鸡。
ROTATE情況下:線段連接處的圖形轉換以旋轉到與下一段移動方向相一致的角度進行連接
MORPH情況下:圖形會以發(fā)生拉伸或壓縮等變形的情況與下一段相連接
TRANSLATE情況下:圖形會以位置平移的方式與下一段相連接
5)ComposePathEffect
ComposePathEffect(PathEffect outerpe, PathEffect innerpe)
作用是:組合效果,會首先將innerpe變現(xiàn)出來枣察,接著在innerpe的基礎上來增加outerpe效果争占!
6)SumPathEffect
SumPathEffect(PathEffect first, PathEffect second)
作用是:疊加效果,和ComposePathEffect不同询件,在表現(xiàn)時會將兩個參數(shù)的效果都獨立的表現(xiàn)出來燃乍, 接著將兩個效果簡單的重疊在一起顯示出來!
2.寫代碼來驗證各自的效果
多說無益宛琅,寫代碼最實際刻蟹,我們寫下代碼來試試這幾個子類各自所起的效果!
運行效果圖:
實現(xiàn)代碼:
我們自己來寫一個View嘿辟,里面的線移動的效果是phase增加造成的,每次 + 2随抠, 然后invalidate重繪而已蕉饼,所以別驚訝!PathEffectView.java:
public class PathEffectView extends View {
private Paint mPaint;
private Path mPath;
private float phase = 0;
private PathEffect[] effects = new PathEffect[7];
private int[] colors;
public PathEffectView(Context context) {
this(context, null);
}
public PathEffectView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public PathEffectView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
//初始化畫筆
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); //抗鋸齒
mPaint.setStyle(Paint.Style.STROKE); //繪畫風格:空心
mPaint.setStrokeWidth(5); //筆觸粗細
mPath = new Path();
mPath.moveTo(0, 0);
for (int i = 1; i <= 15; i++) {
// 生成15個點淀衣,隨機生成它們的坐標,并將它們連成一條Path
mPath.lineTo(i * 40, (float) Math.random() * 100);
}
// 初始化7個顏色
colors = new int[] { Color.RED, Color.BLUE, Color.GREEN,
Color.YELLOW, Color.BLACK, Color.MAGENTA, Color.CYAN };
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
//初始化其中路徑效果:
effects[0] = null; //無效果
effects[1] = new CornerPathEffect(10); //CornerPathEffect
effects[2] = new DiscretePathEffect(3.0f, 5.0f); //DiscretePathEffect
effects[3] = new DashPathEffect(new float[] { 20, 10, 5, 10 },phase); //DashPathEffect
Path p = new Path();
p.addRect(0, 0, 8, 8, Path.Direction.CCW);
effects[4] = new PathDashPathEffect(p, 12, phase,
PathDashPathEffect.Style.ROTATE); //PathDashPathEffect
effects[5] = new ComposePathEffect(effects[2], effects[4]); //ComposePathEffect
effects[6] = new SumPathEffect(effects[2], effects[4]); //SumPathEffect
// 將畫布移動到(10,10)處開始繪制
canvas.translate(10, 10);
// 依次使用7中不同的路徑效果召调、7中不同的顏色來繪制路徑
for (int i = 0; i < effects.length; i++) {
mPaint.setPathEffect(effects[i]);
mPaint.setColor(colors[i]);
canvas.drawPath(mPath, mPaint);
canvas.translate(0, 60);
}
// 改變phase值膨桥,形成動畫效果
phase += 2;
invalidate();
}
}