如何實(shí)現(xiàn)Android軌跡動(dòng)畫-創(chuàng)新互聯(lián)

這篇文章主要介紹了如何實(shí)現(xiàn)Android軌跡動(dòng)畫，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比鳳翔網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式鳳翔網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鳳翔地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

具體內(nèi)容如下

二、需求描述

年中那會(huì)兒基友的公司給他了一張只有一條曲線的圖，想讓他按照曲線的軌跡動(dòng)態(tài)展示整個(gè)曲線，然而基友忙于把妹，一個(gè)饅頭的代價(jià)收買了我，于是幫他寫了代碼。先看下實(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)畫豈不美滋滋......

吐槽歸吐槽，需求還是要實(shí)現(xiàn)的，而且這個(gè)需求是有不少常見的方法可以進(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è)置畫筆為無(wú)鋸齒   paint.setColor(Color.WHITE);     //設(shè)置畫筆顏色   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、大圖加載圖片壓縮。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何實(shí)現(xiàn)Android軌跡動(dòng)畫”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前文章：如何實(shí)現(xiàn)Android軌跡動(dòng)畫-創(chuàng)新互聯(lián)
鏈接分享：http://muchs.cn/article6/pcjog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、全網(wǎng)營(yíng)銷推廣、企業(yè)建站、網(wǎng)站排名、網(wǎng)站導(dǎo)航、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)