一個(gè)簡(jiǎn)單的Android軌跡動(dòng)畫(huà)
本文實(shí)例為大家分享了Android軌跡動(dòng)畫(huà)的具體代碼,供大家參考,具體內(nèi)容如下
二、需求描述
年中那會(huì)兒基友的公司給他了一張只有一條曲線的圖,想讓他按照曲線的軌跡動(dòng)態(tài)展示整個(gè)曲線,然而基友忙于把妹,一個(gè)饅頭的代價(jià)收買(mǎi)了我,于是幫他寫(xiě)了代碼。先看下實(shí)現(xiàn)效果
上原始圖(原始圖的軌跡曲線是白色的,其他部分是透明的,這里為了便于觀察,我將背景調(diào)為黑色)
三、分析實(shí)現(xiàn)
講道理,剛拿到這個(gè)圖片的時(shí)候我也有點(diǎn)懵逼,一個(gè)毫無(wú)規(guī)律的曲線很顯然不能通過(guò)簡(jiǎn)單的方程式去描述點(diǎn)的具體位置,甚至想說(shuō)設(shè)計(jì)直接給個(gè)動(dòng)畫(huà)豈不美滋滋......
吐槽歸吐槽,需求還是要實(shí)現(xiàn)的,而且這個(gè)需求是有不少常見(jiàn)的方法可以進(jìn)行實(shí)現(xiàn)的,比如上下兩層圖片保持一直,上層不斷從左到右將原圖縱向像素清除,然后將設(shè)計(jì)給的圖片也按照從左到友的順去繪制上去。不過(guò)這種方法的可擴(kuò)展性太差,底層的圖片發(fā)生改變(滑動(dòng)、變色)上層也需要進(jìn)行配合。
這里使用方法是:將圖片中有色像素在圖片上的位置按照比例映射到要繪制的View中。
比如,原圖大小是200*100,要去做展示的View的尺寸大小是450*300,某點(diǎn)在原圖中位于x100,y20的位置,那么它在view中的位置應(yīng)該為225,60。也就是說(shuō)將該點(diǎn)在途中的位置比上原圖對(duì)應(yīng)尺寸然后在乘以View的尺寸即可。
軌跡的獲取可以通過(guò)獲取全部的像素點(diǎn)顏色,因?yàn)橥该鞯谋厝徊皇擒壽E,所以判斷Alpha值即可,又因?yàn)檐壽E是一條線,當(dāng)我們使用Path連點(diǎn)的時(shí)候?yàn)榱吮M量減少不必要點(diǎn)的連接,我這里通過(guò)平均值的方式將曲線的寬度降為1。
由于點(diǎn)的位置是按照尺寸比例計(jì)算的,所以無(wú)論要展示的圖片尺寸有多奇葩,都可以完美適配上去
四、實(shí)現(xiàn)代碼
public class TestView extends View implements ViewTreeObserver.OnGlobalLayoutListener{ private Paint paint = new Paint(); private Bitmap bitmap; private int[]local; boolean enter = false; int count; ViewTreeObserver observer; Canvas canvas; float lastX = 0; float lastY = 0; public TestView(Context context) { super(context); } public TestView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); observer = this.getViewTreeObserver(); observer.addOnGlobalLayoutListener(this); getImageFromAssetsFile("target.png");//讀取圖片 } public TestView(Context context, AttributeSet attrs) { super(context, attrs); observer = this.getViewTreeObserver(); observer.addOnGlobalLayoutListener(this); getImageFromAssetsFile("target.png"); } private void getImageFromAssetsFile(String fileName) { AssetManager am = getResources().getAssets(); try { InputStream is = am.open(fileName); bitmap = BitmapFactory.decodeStream(is); is.close(); } catch (IOException e) { e.printStackTrace(); } } private void filterColor(){ int w = bitmap.getWidth(); int h = bitmap.getHeight(); int[]pixels = new int[w*h]; local = new int[w];//以原圖寬為單位,保存點(diǎn)在原圖Y軸上的位置 bitmap.getPixels(pixels,0,bitmap.getWidth(),0,0,bitmap.getWidth(),bitmap.getHeight()); for(int i = 0; i < w; i++){ int lenght = 0; int total = 0; for(int j = 0;j<h;j++){ if (bitmap.getPixel(i, j) !=0) { lenght++; total+=j; } } System.out.println(lenght+""); if(lenght<15||((float)i/(float) w)<0.85) local[i] = total/lenght; else break; } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if(enter) { paint.setAntiAlias(true); //設(shè)置畫(huà)筆為無(wú)鋸齒 paint.setColor(Color.WHITE); //設(shè)置畫(huà)筆顏色 canvas.drawColor(Color.TRANSPARENT); //透明背景 paint.setStrokeWidth((float) 6.0); //線寬 paint.setStyle(Paint.Style.STROKE); Path path = new Path(); path.moveTo(0, (((float) getMeasuredHeight()-25) / (float)bitmap.getHeight()) * (float) local[0]+7); if (count <= bitmap.getWidth()) { if(count<bitmap.getWidth()) count++; for (int i = 1; i < count - 1; i++) { if(local[i]>0) { path.lineTo((getMeasuredWidth() / (float) bitmap.getWidth()) * (float) i, (((float) getMeasuredHeight()-25) / (float) bitmap.getHeight()) * (float) local[i]+7); lastX = (getMeasuredWidth() / (float) bitmap.getWidth()) * (float) i; lastY = (((float) getMeasuredHeight()-25 )/ (float) bitmap.getHeight()) * (float) local[i]; } } } if(count<bitmap.getWidth()) postInvalidate(); else { count = 0; postInvalidate(); } canvas.drawPath(path, paint); paint.setStyle(Paint.Style.FILL); canvas.drawCircle(lastX, lastY+7, 7, paint); // } }else{ this.canvas = canvas; } } @Override public void onGlobalLayout() { filterColor(); enter = true; postInvalidate(); } }
當(dāng)然了,這個(gè)代碼也只是給基友交差用的,還有不少地方能做優(yōu)化,比如:將圖片讀取放在子線程、對(duì)圖片大小進(jìn)行判斷避免OOM、大圖加載圖片壓縮。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android ScrollView無(wú)法填充滿屏幕的解決辦法
這篇文章主要介紹了Android ScrollView無(wú)法填充滿屏幕的解決辦法的相關(guān)資料,這里提供實(shí)例和解決辦法,需要的朋友可以參考下2017-07-07Android實(shí)現(xiàn)圖片滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)圖片滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09Android對(duì)so進(jìn)行簡(jiǎn)單hook思路解析
這篇文章主要為大家介紹了Android對(duì)so進(jìn)行簡(jiǎn)單hook思路解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04Android仿QQ微信實(shí)時(shí)監(jiān)測(cè)網(wǎng)絡(luò)狀態(tài)
這篇文章主要為大家詳細(xì)介紹了Android仿QQ微信實(shí)時(shí)監(jiān)測(cè)網(wǎng)絡(luò)狀態(tài),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05Android使用Theme自定義Activity進(jìn)入退出動(dòng)畫(huà)的方法
這篇文章主要介紹了Android使用Theme自定義Activity進(jìn)入退出動(dòng)畫(huà)的方法,涉及Android的Activity屬性設(shè)置與資源操作技巧,需要的朋友可以參考下2016-07-07Flutter實(shí)現(xiàn)彈窗攔截器的示例代碼
彈窗的排隊(duì)執(zhí)行在App中是一個(gè)很常見(jiàn)的應(yīng)用場(chǎng)景,這篇文章為大家介紹了兩個(gè)Flutter實(shí)現(xiàn)彈窗攔截器的示例代碼,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09Android PopWindow 設(shè)置背景亮度的實(shí)例
這篇文章主要介紹了Android PopWindow 設(shè)置背景亮度的實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)方法,希望能幫助有所需要的朋友,需要的朋友可以參考下2017-08-08Android實(shí)現(xiàn)類(lèi)似網(wǎng)易新聞選項(xiàng)卡動(dòng)態(tài)滑動(dòng)效果
這篇文章主要介紹了Android實(shí)現(xiàn)類(lèi)似網(wǎng)易新聞選項(xiàng)卡動(dòng)態(tài)滑動(dòng)效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11