日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Android自定義view利用PathEffect實現動態效果_Android

作者：計蒙不吃魚 ? 更新時間： 2022-07-04 編程語言

本文實例為大家分享了Android自定義view利用PathEffect實現動態效果的具體代碼，供大家參考，具體內容如下

前言

在上一篇此類型的文章中是改變偏移量實現動態效果，借助的方法是drawArc，這篇文章依然是改變偏移量，而借助的是PathEffect的子類。

效果圖：

一、首先介紹下PathEffect的一些子類

  • CornerPathEffect：將Path的各個連接線段之間的夾角用一種更平滑的方式連接，類似于圓弧與切線的效果。 參數radius則是指定圓弧的半徑。
  • DashPathEffect：將Path的線段虛線化，intervals為虛線的ON和OFF的數組，數組中元素數目需要 >= 2； 而phase則為繪制時的偏移量。
  • DiscretePathEffect：打散Path的線段，使得在原來路徑的基礎上發生打散效果。 segmentLength指定最大的段長，deviation則為繪制時的偏離量。
  • PathDashPathEffect：使用Path圖形來填充當前的路徑，shape指的填充圖形，advance是每個圖形間的間隔， phase為繪制時的偏移量。，style則是該類自由的枚舉值，有三種情況：ROTATE、MORPH和TRANSLATE。ROTATE情況下：線段連接處的圖形轉換以旋轉到與下一段移動方向相一致的角度進行連接。MORPH情況下：圖形會以發生拉伸或壓縮等變形的情況與下一段相連接。TRANSLATE情況下：圖形會以位置平移的方式與下一段相連接。
  • ComposePathEffect：組合效果
  • SumPathEffect：疊加效果，和ComposePathEffect不同，在表現時會將兩個參數的效果都獨立的表現出來， 接著將兩個效果簡單的重疊在一起顯示出來

二、看看子類具體的一些代碼

private static void makeEffects(PathEffect[] e, float phase) {
? ? ? ? ? ? e[0] = null; ? ? // 無效果
? ? ? ? ? ? e[1] = new CornerPathEffect(30);//CornerPathEffect
? ? ? ? ? ? e[2] = new DashPathEffect(new float[] {10, 5, 5, 5}, phase);//DashPathEffect
? ? ? ? ? ? e[3] = new PathDashPathEffect(makePathDash(), 12, phase,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PathDashPathEffect.Style.ROTATE);//PathDashPathEffect
? ? ? ? ? ? e[4] = new ComposePathEffect(e[2], e[1]);//ComposePathEffect
? ? ? ? ? ? e[5] = new ComposePathEffect(e[3], e[1]);//ComposePathEffect
? ? ? ? }

三、案例實現（CornerPathEffect，PathDashPathEffect，ComposePathEffect）

實現的效果是上序代碼的e[5]，使用CornerPathEffect實現圓弧效果，而重點是PathDashPathEffect。

PathDashPathEffect里面有幾個參數：

new PathDashPathEffect(makePathDash(), 12, phase,
? ? ? ? ?PathDashPathEffect.Style.ROTATE);

第一個參數為小path圖形，案例中博主畫的是菱形：

private static Path makePathDash() {
? ? ? ? ? ? Path p = new Path();
? ? ? ? ? ? p.moveTo(0, 0);
? ? ? ? ? ? p.lineTo(4, 4);
? ? ? ? ? ? p.lineTo(8, 0);
? ? ? ? ? ? p.lineTo(4, -4);
? ? ? ? ? ? p.moveTo(0, 0);
? ? ? ? ? ? return p;
? ? ? ? }

第二個參數為每個圖形間的間隔。
第三個參數為繪制時的偏離量
第四個參數為樣式，博主選擇的是ROTATE情：線段連接處的圖形轉換以旋轉到與下一段移動方向相一致的角度進行連接。

最后使用ComposePathEffect進行組合。

繪制運動路徑

private static Path makeFollowPath() {
? ? ? ? ? ? Path p = new Path();
? ? ? ? ? ? p.moveTo(0, 0);
? ? ? ? ? ? p.lineTo(400,0);
? ? ? ? ? ? p.lineTo(400,400);
? ? ? ? ? ? p.lineTo(0,400);
? ? ? ? ? ? p.lineTo(0,0);
? ? ? ? ? ? return p;
? ? ? ? }

修改偏移量實現動態效果

mPhase += 1;
invalidate();

四、源碼

public class SampleView extends View {
? ? ? ? private Paint mPaint;
? ? ? ? private Path mPath;
? ? ? ? private PathEffect[] mEffects;
? ? ? ? private int mColors;
? ? ? ? private float mPhase;


? ? ? ? private static void makeEffects(PathEffect[] e, float phase) {
? ? ? ? ? ? e[0] = null; ? ??
? ? ? ? ? ? e[1] = new CornerPathEffect(30);
? ? ? ? ? ? e[2] = new DashPathEffect(new float[] {10, 5, 5, 5}, phase);
? ? ? ? ? ? e[3] = new PathDashPathEffect(makePathDash(), 12, phase,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PathDashPathEffect.Style.ROTATE);
? ? ? ? ? ? e[4] = new SumPathEffect(e[3], e[1]);
? ? ? ? ? ? e[5] = new ComposePathEffect(e[3], e[1]);
? ? ? ? }

? ? ? ? public SampleView(Context context) {
? ? ? ? ? ? super(context);
? ? ? ? ? ? setFocusable(true);
? ? ? ? ? ? setFocusableInTouchMode(true);
? ? ? ? ? ? mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? ? ? mPaint.setStyle(Paint.Style.STROKE);
? ? ? ? ? ? mPaint.setStrokeWidth(6);
? ? ? ? ? ? mPath = makeFollowPath();
? ? ? ? ? ? //初始化PathEffect[]
? ? ? ? ? ? mEffects = new PathEffect[6];
? ? ? ? ? ? mColors = Color.BLACK;
? ? ? ? }

? ? ? ? @Override
? ? ? ? protected void onDraw(Canvas canvas) {
? ? ? ? ? ? canvas.drawColor(Color.WHITE);

? ? ? ? ? ? RectF bounds = new RectF();
? ? ? ? ? ? mPath.computeBounds(bounds, false);
? ? ? ? ? ? canvas.translate(10 - bounds.left, 10 - bounds.top);

? ? ? ? ? ? makeEffects(mEffects, mPhase);
? ? ? ? ? ? mPhase += 1;
? ? ? ? ? ? invalidate();

? ? ? ? ? ? //選擇樣式
? ? ? ? ? ? mPaint.setPathEffect(mEffects[5]);
? ? ? ? ? ? mPaint.setColor(mColors);
? ? ? ? ? ? canvas.drawPath(mPath, mPaint);
? ? ? ? ? ? canvas.translate(0, 28);

? ? ? ? }

? ? ? ? @Override
? ? ? ? public boolean onKeyDown(int keyCode, KeyEvent event) {
? ? ? ? ? ? switch (keyCode) {
? ? ? ? ? ? ? ? case KeyEvent.KEYCODE_DPAD_CENTER:
? ? ? ? ? ? ? ? ? ? mPath = makeFollowPath();
? ? ? ? ? ? ? ? ? ? return true;
? ? ? ? ? ? }
? ? ? ? ? ? return super.onKeyDown(keyCode, event);
? ? ? ? }
? ? ? ? //繪制跑動路徑
? ? ? ? private static Path makeFollowPath() {
? ? ? ? ? ? Path p = new Path();
? ? ? ? ? ? p.moveTo(0, 0);
? ? ? ? ? ? p.lineTo(400,0);
? ? ? ? ? ? p.lineTo(400,400);
? ? ? ? ? ? p.lineTo(0,400);
? ? ? ? ? ? p.lineTo(0,0);
? ? ? ? ? ? return p;
? ? ? ? }
? ? ? ? //繪制跑動的小圖標
? ? ? ? private static Path makePathDash() {
? ? ? ? ? ? Path p = new Path();
? ? ? ? ? ? p.moveTo(0, 0);
? ? ? ? ? ? p.lineTo(4, 4);
? ? ? ? ? ? p.lineTo(8, 0);
? ? ? ? ? ? p.lineTo(4, -4);
? ? ? ? ? ? p.moveTo(0, 0);
? ? ? ? ? ? return p;
? ? ? ? }
? ? }

原文鏈接：https://blog.csdn.net/qq_42761395/article/details/119876461

欄目分類
最近更新