Android使用自定义View绘制渐隐渐现动画

 更新时间:2016年09月03日 11:16:08   作者: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使用自定义View绘制渐隐渐现动画的全部叙述,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • android屏幕全屏的实现代码

    android屏幕全屏的实现代码

    android屏幕全屏的实现代码,需要的朋友可以参考一下
    2013-05-05
  • Android TextView实现点击显示全文与隐藏功能(附源码)

    Android TextView实现点击显示全文与隐藏功能(附源码)

    TextView用法很多,用到的地方更是普遍,所以学好TextView的使用很重要很重要很重要。下面这篇文章主要介绍了Android中TextView实现显示全文与隐藏功能的相关资料,文中给出了详细的示例代码和源码下载,需要的朋友可以参考下。
    2017-03-03
  • Android编程之单元测试实例分析

    Android编程之单元测试实例分析

    这篇文章主要介绍了Android编程之单元测试,结合具体实例分析了Android单元测试的具体实现步骤与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • android.enableD8.desugaring = false引发问题解决

    android.enableD8.desugaring = false引发问题解决

    这篇文章主要为大家介绍了android.enableD8.desugaring = false引发问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Android 自定义View实现单击和双击事件的方法

    Android 自定义View实现单击和双击事件的方法

    下面小编就为大家带来一篇Android 自定义View实现单击和双击事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Android 文件操作详解及简单实例

    Android 文件操作详解及简单实例

    这篇文章主要介绍了 Android 文件操作详解及简单实例的相关资料,需要的朋友可以参考下
    2017-02-02
  • Android Studio 代码导航快捷键

    Android Studio 代码导航快捷键

    这篇文章主要介绍了Android Studio 代码导航快捷键的相关资料,需要的朋友可以参考下
    2018-03-03
  • Android通过LIstView显示文件列表的两种方法介绍

    Android通过LIstView显示文件列表的两种方法介绍

    过ListView显示SD卡中的文件列表一共有两种方法,一是:通过继承ListActivity显示;二是:利用BaseAdapter显示,具体实现如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • Android实现调用摄像头拍照并存储照片

    Android实现调用摄像头拍照并存储照片

    本文主要介绍了如何利用Android调用摄像头拍照,并显示拍照后的图片到ImageView中,文中的示例代码讲解详细,感兴趣的可以动手试一试
    2022-01-01
  • Android View滑动的实现分析示例

    Android View滑动的实现分析示例

    View滑动是Android实现自定义控件的基础,同时在开发中难免会遇到View的滑动处理,其实不管是那种滑动方法,基本思路是类似的;当点击事件传到View时,系统记下触摸点的坐标,手指移动时系统记下移动后的左边并算出偏移量,通过偏移量来修改View的坐标
    2022-08-08

最新评论