Android Canvas實際操作

本篇我們來看canvas的實際應用，這裡會應用到屬性動畫valueanimator類，下面先看一下具體的效果

上述效果圖中主要由三部分組成，第一，繪製6個小球並旋轉，第二，6個小球先擴充套件然後收縮，第三，水波紋效果，展示一張。

1）旋轉部分

首先，將6個小球分別繪製到螢幕上，呼叫 canvas.drawcircle()方法來繪製小球，根據api的引數，這裡我們需要計算出每個小球的圓心座標，6個小球是在乙個圓內，也就是說將乙個圓均分為了6份，而整個圓是360°，那麼兩小球之間的夾角就是

float rotate = math.pi*2/ballcolor.length 這裡ballcolor是定義的6個小球顏色的陣列int ballcolor，所有小球之間的夾角就是

//計算角度
float rotate = (float) (math.pi * 2 / ballcolor.length);
for (int i = 0; i < ballcolor.length; i++)

角度有了，如何計算出每個小球的圓心座標點呢，我們以一張圖來說明座標的計算

∠abc 就是上面我們計算出的角度值angel ，ab長是圓環的半徑，由我們自己定義，那麼a點的x座標就是math.cos(angel) *radiuscurball(圓環半徑)+centerx，相應的y座標就是math.sin(angel) *radiuscurball+centery ，這裡的centerx和centery 表示畫布的中心點座標，這樣每個小球的圓心座標就有了。

private void drawcirlce(canvas canvas) 
}

小球繪製完畢後，該執行旋轉動畫了，這裡採用valueanimator來執行，每個小球的旋轉角度是從0到360°，呼叫valueanimator.addupdatelistener，獲取到動畫在執行過程中的角度，將該角度傳遞到計算小球角度的邏輯**中，從而完成小球的旋轉

valueanimator = valueanimator.offloat(0f, (float) (math.pi * 2));
valueanimator.setrepeatcount(2);
valueanimator.setduration(rotateduration);
valueanimator.setinterpolator(new linearinterpolator());
valueanimator.addupdatelistener(new valueanimator.animatorupdatelistener() 
});animator.start();

rotateangel 就是獲取的實時旋轉角度，修改繪製小球drawcirlce()方法

private void drawcirlce(canvas canvas) 
}

這樣，小球就開始旋轉了。

下面再來看一下第二個過程，擴充套件和聚合。在該動畫中，我們使用到了乙個新的插值器overshootinterpolator，它表示動畫在執行過程中，會向前甩一定的值，然後會回到原來位置，在效果圖中，小球是先向外擴散，然後再聚合，那麼動畫的執行過程就是小球半徑到圓環半徑。

valueanimator = valueanimator.offloat(radiussmball, radiusbigball);
valueanimator.setduration(rotateduration);
valueanimator.setinterpolator(new overshootinterpolator(5f));
valueanimator.addupdatelistener(new valueanimator.animatorupdatelistener() 
});valueanimator.reverse();

valueanimator = valueanimator.offloat(radiussmball, mdistane);
valueanimator.setduration(rotateduration);
valueanimator.setinterpolator(new linearinterpolator());
valueanimator.addupdatelistener(new valueanimator.animatorupdatelistener() 
});valueanimator.start();

再來看一下繪製水波紋

float strokewidth = mdistane - radiuspole;
float realradius = radiuspole + strokewidth / 2;
paintpole.setstrokewidth(strokewidth);
canvas.drawcircle(centerx, centery, realradius, paintpole);

看一下完整實現

import android.animation.animator;
import android.animation.animatorlisteneradapter;
import android.animation.valueanimator;
import android.content.context;
import android.graphics.canvas;
import android.graphics.color;
import android.graphics.paint;
import android.support.annotation.nullable;
import android.util.attributeset;
import android.util.log;
import android.view.view;
import android.view.animation.linearinterpolator;
import android.view.animation.overshootinterpolator;
public class animview extends view 
public animview(context context, @nullable attributeset attrs) 
public animview(context context, @nullable attributeset attrs, int defstyleattr) 
//動畫效果，1.6個小球轉動，2.6個小球擴散、聚合，3.水波紋效果
private void init(context context) 
@override
protected void ondraw(canvas canvas) 
state.drawstate(canvas);
}@override
protected void onsizechanged(int w, int h, int oldw, int oldh) 
/*** 旋轉
*/private class turnstate extends splashstate 
});valueanimator.addlistener(new animatorlisteneradapter() 
});valueanimator.start();
}@override
void drawstate(canvas canvas) 
}/**
* 擴散、收縮
*/private class mergestate extends splashstate 
});valueanimator.addlistener(new animatorlisteneradapter() 
});valueanimator.reverse();
}@override
void drawstate(canvas canvas) 
}/**
* 水波紋
*/private class polestate extends splashstate 
});valueanimator.start();
}@override
void drawstate(canvas canvas) 
}private void drawbackground(canvas canvas)  else 
}private void drawcirlce(canvas canvas) 
}abstract class splashstate 
}

以及xml布局

<?xml version="1.0" encoding="utf-8"?>

Android Canvas實際操作

Android Canvas清屏失效

Android canvas 監聽繪製電池電量

Android Canvas繪製七巧板

Android Canvas實際操作

Android Canvas清屏失效

Android canvas 監聽繪製電池電量

Android Canvas繪製七巧板

相關推薦