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

 更新时间:2020年09月24日 10:55:38   作者:foruok  
这篇文章主要为大家详细介绍了Android自定义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, 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 SDK下载和更新失败的方法详解

    解决Android SDK下载和更新失败的方法详解

    本篇文章是对Android SDK下载和更新失败的解决方法进行了详细的分析介绍,需要的朋友参考下
    2013-05-05
  • Android中layer-list基本使用详解

    Android中layer-list基本使用详解

    这篇文章主要介绍了Android中layer-list基本使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Android NDK开发(C语言-文件读写)

    Android NDK开发(C语言-文件读写)

    这篇文章主要介绍了Android NDK开发C语言文件读写,一个文件,无论它是文本文件还是二进制文件,都是代表了一系列的字节。下面我们就来看看在Android NDK开发中的C语言文件读写详细内容吧,需要的朋友可以参考一下
    2021-12-12
  • Android开发之使用ViewPager实现图片左右滑动切换效果

    Android开发之使用ViewPager实现图片左右滑动切换效果

    这篇文章主要介绍了Android开发之使用ViewPager实现图片左右滑动切换效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • android自定义View之复合控件

    android自定义View之复合控件

    这篇文章主要为大家详细介绍了android自定义View之复合控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Android播放视频的三种方式

    Android播放视频的三种方式

    这篇文章主要为大家详细介绍了Android播放视频的三种方式,使用其自带的播放器、VideoView、MediaPlayer类和SurfaceView来实现,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Android属性动画实现布局的下拉展开效果

    Android属性动画实现布局的下拉展开效果

    这篇文章主要为大家详细介绍了Android属性动画实现布局的下拉展开效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Android之高效加载大图的方法示例

    Android之高效加载大图的方法示例

    这篇文章主要介绍了Android之高效加载大图的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Android Dispatchers.IO线程池深入刨析

    Android Dispatchers.IO线程池深入刨析

    这篇文章主要为大家介绍了Android Kotlin线程池Dispatchers.IO原理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2022-08-08
  • Android里实现退出主程序的提示代码

    Android里实现退出主程序的提示代码

    当用户选择"确定",就退出当前的对话框。其中,有个很重要的函数,Activity.finish(),通过调用这个函数,退出当前运行的整个Android程序
    2013-06-06

最新评论