Android使用自定義View繪制漸隱漸現(xiàn)動畫
實現(xiàn)了一個有趣的小東西:使用自定義View繪圖,一邊畫線,畫出的線條漸漸變淡,直到消失。效果如下圖所示:
用屬性動畫或者漸變填充(Shader)可以做到一筆一筆的變化,但要想一筆漸變(手指不抬起邊畫邊漸隱),沒在Android中找到現(xiàn)成的API可用。所以,自己做了一個。
基本的想法是這樣的:
在View的onTouchEvent中記錄觸摸點,生成一條一條的線LineElement,放在一個List中。給每個LineElement配置一個Paint實例。
在onDraw中繪制線段。
變換LineElement的Paint實例的Alpha值。
根據(jù)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繪制漸隱漸現(xiàn)動畫的全部敘述,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
Android實現(xiàn)的ListView分組布局改進示例
這篇文章主要介紹了Android實現(xiàn)的ListView分組布局改進的方法,結(jié)合實例形式分析了Android針對ListView的分組布局相關(guān)操作技巧,需要的朋友可以參考下2016-08-08僅5步搞定Android開發(fā)環(huán)境部署 Android開發(fā)環(huán)境搭建教程
僅5步搞定Android開發(fā)環(huán)境部署,這篇文章主要為大家詳細介紹了Android開發(fā)環(huán)境搭建教程,感興趣的小伙伴們可以參考一下2016-02-02一文理解Android系統(tǒng)中強指針的實現(xiàn)
因為Android中很多地方代碼是用C++編寫,為了能夠保證C++中指針能夠被正確的釋放,于是Android引入了其實在C++中已經(jīng)有的智能指針技術(shù)2021-10-10Android解析json數(shù)組對象的方法及Apply和數(shù)組的三個技巧
這篇文章主要介紹了Android解析json數(shù)組對象的方法及Apply和數(shù)組的三個技巧的相關(guān)資料,需要的朋友可以參考下2015-12-12Androd自定義對話框Dialog視圖及參數(shù)傳遞的實現(xiàn)方法
這篇文章主要介紹了Androd自定義對話框Dialog視圖及參數(shù)傳遞的實現(xiàn)方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-01-01