Android使用自定義View繪制漸隱漸現(xiàn)動(dòng)畫(huà)
實(shí)現(xiàn)了一個(gè)有趣的小東西:使用自定義View繪圖,一邊畫(huà)線,畫(huà)出的線條漸漸變淡,直到消失。效果如下圖所示:
用屬性動(dòng)畫(huà)或者漸變填充(Shader)可以做到一筆一筆的變化,但要想一筆漸變(手指不抬起邊畫(huà)邊漸隱),沒(méi)在Android中找到現(xiàn)成的API可用。所以,自己做了一個(gè)。
基本的想法是這樣的:
在View的onTouchEvent中記錄觸摸點(diǎn),生成一條一條的線LineElement,放在一個(gè)List中。給每個(gè)LineElement配置一個(gè)Paint實(shí)例。
在onDraw中繪制線段。
變換LineElement的Paint實(shí)例的Alpha值。
根據(jù)Alpha值重組線段列表
別的不說(shuō)了,上代碼:
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);
}
}
這個(gè)示例還可以添加一些效果,比如讓線條一邊變淡一邊變細(xì)。
以上所述是小編給大家介紹的Android使用自定義View繪制漸隱漸現(xiàn)動(dòng)畫(huà)的全部敘述,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
Android TextView實(shí)現(xiàn)點(diǎn)擊顯示全文與隱藏功能(附源碼)
TextView用法很多,用到的地方更是普遍,所以學(xué)好TextView的使用很重要很重要很重要。下面這篇文章主要介紹了Android中TextView實(shí)現(xiàn)顯示全文與隱藏功能的相關(guān)資料,文中給出了詳細(xì)的示例代碼和源碼下載,需要的朋友可以參考下。2017-03-03
android.enableD8.desugaring?=?false引發(fā)問(wèn)題解決
這篇文章主要為大家介紹了android.enableD8.desugaring?=?false引發(fā)問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
Android 自定義View實(shí)現(xiàn)單擊和雙擊事件的方法
下面小編就為大家?guī)?lái)一篇Android 自定義View實(shí)現(xiàn)單擊和雙擊事件的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
Android 文件操作詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了 Android 文件操作詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
Android通過(guò)LIstView顯示文件列表的兩種方法介紹
過(guò)ListView顯示SD卡中的文件列表一共有兩種方法,一是:通過(guò)繼承ListActivity顯示;二是:利用BaseAdapter顯示,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06
Android實(shí)現(xiàn)調(diào)用攝像頭拍照并存儲(chǔ)照片
本文主要介紹了如何利用Android調(diào)用攝像頭拍照,并顯示拍照后的圖片到ImageView中,文中的示例代碼講解詳細(xì),感興趣的可以動(dòng)手試一試2022-01-01
Android View滑動(dòng)的實(shí)現(xiàn)分析示例
View滑動(dòng)是Android實(shí)現(xiàn)自定義控件的基礎(chǔ),同時(shí)在開(kāi)發(fā)中難免會(huì)遇到View的滑動(dòng)處理,其實(shí)不管是那種滑動(dòng)方法,基本思路是類(lèi)似的;當(dāng)點(diǎn)擊事件傳到View時(shí),系統(tǒng)記下觸摸點(diǎn)的坐標(biāo),手指移動(dòng)時(shí)系統(tǒng)記下移動(dòng)后的左邊并算出偏移量,通過(guò)偏移量來(lái)修改View的坐標(biāo)2022-08-08

