Android自定义View绘图实现渐隐动画

概述实现了一个有趣的小东西：使用自定义View绘图，一边画线，画出的线条渐渐变淡，直到消失。效果如下图所示：

实现了一个有趣的小东西：使用自定义view绘图，一边画线，画出的线条渐渐变淡，直到消失。效果如下图所示：

用属性动画或者渐变填充（Shader）可以做到一笔一笔的变化，但要想一笔渐变（手指不抬起边画边渐隐），没在AndroID中找到现成的API可用。所以，自己做了一个。

基本的想法是这样的：

•在VIEw的ontouchEvent中记录触摸点，生成一条一条的线lineElement，放在一个List中。给每个lineElement配置一个Paint实例。
•在onDraw中绘制线段。
•变换lineElement的Paint实例的Alpha值。
•根据Alpha值重组线段列表 

别的不说了，上代码：

package com.example.disappearinglines;import androID.content.Context;import androID.graphics.Canvas;import androID.graphics.Paint;import androID.graphics.Path;import androID.graphics.RectF;import androID.os.Handler;import androID.os.Message;import androID.os.SystemClock;import androID.support.annotation.NonNull;import androID.util.AttributeSet;import androID.util.Log;import androID.vIEw.MotionEvent;import androID.vIEw.VIEw;import java.util.ArrayList;import java.util.Collection;import java.util.Iterator;import java.util.List;import java.util.ListIterator;public class disappearingDoodleVIEw extends VIEw {  final static String TAG = "DoodleVIEw";  class lineElement {    static final public int Alpha_STEP = 5;    static final public int SUBPATH_DIMENSION = 8;    public lineElement(){      mPaint = new Paint();      mPaint.setARGB(255,255,0);      mPaint.setAntiAlias(true);      mPaint.setstrokeWIDth(16);      mPaint.setstrokeCap(Paint.Cap.BUTT);      mPaint.setStyle(Paint.Style.stroke);    }    public lineElement(Paint paint){      mPaint = paint;    }    public voID setPaint(Paint paint){      mPaint = paint;    }    public voID setAlpha(int Alpha){      mPaint.setAlpha(Alpha);    }    public float mStartX = -1;    public float mStartY = -1;    public float mEndX = -1;    public float mEndY = -1;    public Paint mPaint;  }  private lineElement mCurrentline = null;  private List<lineElement> mlines = null;  private long mElapsed = 0;  private Handler mHandler = new Handler(){    @OverrIDe    public voID handleMessage(Message msg){      disappearingDoodleVIEw.this.invalIDate();    }  };  public disappearingDoodleVIEw(Context context){    super(context);  }  public disappearingDoodleVIEw(Context context,AttributeSet attrs){    super(context,attrs);  }  @OverrIDe  protected voID onDraw(Canvas canvas){    mElapsed = SystemClock.elapsedRealtime();    if(mlines != null) {      for (lineElement e : mlines) {        if(e.mStartX < 0 || e.mEndY < 0) continue;        canvas.drawline(e.mStartX,e.mStartY,e.mEndX,e.mEndY,e.mPaint);      }      compactPaths();    }  }  @OverrIDe  public boolean ontouchEvent(MotionEvent event){    float x = event.getX();    float y = event.getY();    int action = event.getAction();    if(action == MotionEvent.ACTION_UP){// end one line after finger release      mCurrentline.mEndX = x;      mCurrentline.mEndY = y;      mCurrentline = null;      invalIDate();      return true;    }    if(action == MotionEvent.ACTION_DOWN){      mCurrentline = new lineElement();      addtopaths(mCurrentline);      mCurrentline.mStartX = x;      mCurrentline.mStartY = y;      return true;    }    if(action == MotionEvent.ACTION_MOVE) {      mCurrentline.mEndX = x;      mCurrentline.mEndY = y;      mCurrentline = new lineElement();      addtopaths(mCurrentline);      mCurrentline.mStartX = x;      mCurrentline.mStartY = y;    }    if(mHandler.hasMessages(1)){      mHandler.removeMessages(1);    }    Message msg = new Message();    msg.what = 1;    mHandler.sendMessageDelayed(msg,0);    return true;  }  private voID addtopaths(lineElement element){    if(mlines == null) {      mlines = new ArrayList<lineElement>() ;    }    mlines.add(element);  }  public voID compactPaths(){    int size = mlines.size();    int index = size - 1;    if(size == 0) return;    int baseAlpha = 255 - lineElement.Alpha_STEP;    int itselfAlpha;    lineElement line;    for(; index >=0 ; index--,baseAlpha -= lineElement.Alpha_STEP){      line = mlines.get(index);      itselfAlpha = line.mPaint.getAlpha();      if(itselfAlpha == 255){        if(baseAlpha <= 0){          ++index;          break;        }        line.setAlpha(baseAlpha);      }else{        itselfAlpha -= lineElement.Alpha_STEP;        if(itselfAlpha <= 0){          ++index;          break;        }        line.setAlpha(itselfAlpha);      }    }    if(index >= size){      // all sub-path should disappear      mlines = null;    }    else if(index >= 0){      //Log.i(TAG,"compactPaths from " + index + " to " + (size - 1));      mlines = mlines.subList(index,size);    }else{      // no sub-path should disappear    }    long interval = 40 - SystemClock.elapsedRealtime() + mElapsed;    if(interval < 0) interval = 0;    Message msg = new Message();    msg.what = 1;    mHandler.sendMessageDelayed(msg,interval);  }}

 

这个示例还可以添加一些效果，比如让线条一边变淡一边变细。

目前还有一些问题，线条粗的话，可以明显看到线段与线段之间有缝隙或裂口，哪位想到怎么优化？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android自定义View绘图实现渐隐动画全部内容，希望文章能够帮你解决Android自定义View绘图实现渐隐动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。