動畫 學習Demo與自定義View: ViewExample
動畫 學習Demo與自定義View: ViewExample
- http://blog.csdn.net/harvic880925/article/details/50995268
- https://www.jianshu.com/p/9ad3aaae0c63
- http://blog.51cto.com/mikewang/871765
幀動畫 View Animation (Frame Animation(逐幀動畫))
比較有針對性，只是圖片的替換
補間動畫 View Animation（Tween Animation）
支援簡單的縮放、平移、旋轉、透明度基本的動畫
補間動畫給出兩個關鍵幀，通過一些演算法將給定屬性值在給定的時間內在兩個關鍵幀間漸變 –> 使用插值器 開控制 動畫速度 頻率
- Scale 移動
- fromXScale 起始的X方向上相對自身的縮放比例，浮點值，比如1.0代表自身無變化，0.5代表起始時縮小一倍，2.0代表放大一倍
- toXScale 結尾的X方向上相對自身的縮放比例，浮點值
- fromYScale 起始的Y方向上相對自身的縮放比例，浮點值
- toYScale 結尾的Y方向上相對自身的縮放比例，浮點值
- pivotX 縮放起點X軸座標，可以是數值、百分數、百分數p 三種樣式，比如 50、50%、50%p，當為數值時，表示在當前View的左上角，即原點處加上50px，做為起始縮放點；如果是50%，表示在當前控制元件的左上角加上自己寬度的50%做為起始點；如果是50%p，那麼就是表示在當前的左上角加上父控制元件寬度的50%做為起始點x軸座標。
- pivotY 縮放起點Y軸座標，取值及意義跟android:pivotX一樣
- Alpha 透明
- android:fromAlpha 動畫開始的透明度，從0.0 –1.0 ，0.0表示全透明，1.0表示完全不透明
- android:toAlpha 動畫結束時的透明度，也是從0.0 –1.0 ，0.0表示全透明，1.0表示完全不透明
- Roate 縮放
- android:fromDegrees 開始旋轉的角度位置，正值代表順時針方向度數，負值程式碼逆時針方向度數
- android:toDegrees 結束時旋轉到的角度位置，正值代表順時針方向度數，負值程式碼逆時針方向度數
- android:pivotX 縮放起點X軸座標，可以是數值、百分數、百分數p 三種樣式，比如 50、50%、50%p
- android:pivotY 縮放起點Y軸座標，可以是數值、百分數、百分數p 三種樣式，比如 50、50%、50%p
- Translate 旋轉
- android:fromXDelta 起始點X軸座標，可以是數值、百分數、百分數p 三種樣式，比如 50、50%、50%p，
- android:fromYDelta 起始點Y軸從標，可以是數值、百分數、百分數p 三種樣式；
- android:toXDelta 結束點X軸座標
- android:toYDelta 結束點Y軸座標
- Set 集合 共有屬性
- android:duration 動畫持續時間，以毫秒為單位
- android:fillAfter 如果設定為true，控制元件動畫結束時，將保持動畫最後時的狀態
- android:fillBefore 如果設定為true,控制元件動畫結束時，還原到開始動畫前的狀態
- android:fillEnabled 與android:fillBefore 效果相同，都是在動畫結束時，將控制元件還原到初始化狀態
- android:repeatCount 重複次數
- android:repeatMode 重複型別，有reverse和restart兩個值，reverse表示倒序回放，restart表示重新放一遍，必須與repeatCount一起使用才能看到效果。因為這裡的意義是重複的型別，即回放時的動作。
- android:interpolator 設定插值器，其實就是指定的動作效果，比如彈跳效果等，不在這小節中講解，後面會單獨列出一單講解。
- Interpolator 插值器
- AccelerateDecelerateInterpolator 在動畫開始與介紹的地方速率改變比較慢，在中間的時候加速
- AccelerateInterpolator 在動畫開始的地方速率改變比較慢，然後開始加速
- AnticipateInterpolator 開始的時候向後然後向前甩
- AnticipateOvershootInterpolator 開始的時候向後然後向前甩一定值後返回最後的值
- BounceInterpolator 動畫結束的時候彈起
- CycleInterpolator 動畫迴圈播放特定的次數，速率改變沿著正弦曲線
- DecelerateInterpolator 在動畫開始的地方快然後慢
- LinearInterpolator 以常量速率改變
- OvershootInterpolator 向前甩一定值後再回到原來位置
屬性動畫 Property Animation 包含 ValueAnimator和ObjectAnimation
通過動畫的方式來改變View的屬性。
- ValueAnimator 動畫 ofInt ofObject 設定 屬性 區間
- ObjectAnimation
- Interpolator 插值器/加速器
- Evaluator 將插值器返回的數字進度轉成對應的值
View 的基本屬性
幾何圖形 -> 位於 Canvas 下
- 畫直線 void drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
- startX:開始點X座標
- startY:開始點Y座標
- stopX:結束點X座標
- stopY:結束點Y座標
- 多條直線
void drawLines (float[] pts, Paint paint)
void drawLines (float[] pts, int offset, int count, Paint paint)
pts 兩兩連成一條直線
- 多條直線
- 點 void drawPoint (float x, float y, Paint paint)
- float X：點的X座標
- float Y：點的Y座標
- 多個點
void drawPoints (float[] pts, Paint paint)
void drawPoints (float[] pts, int offset, int count, Paint paint)
- int offset:集合中跳過的數值個數，注意不是點的個數！一個點是兩個數值；
- count:參與繪製的數值的個數，指pts[]里人數值個數，而不是點的個數，因為一個點是兩個數值
- offset與count的含義：（跳過第一個點，畫出後面兩個點，第四個點不畫），注意一個點是兩個數值！
- 矩形工具類RectF與Rect
- RectF RectF(float left, float top, float right, float bottom) 根據四個點構造出一個矩形
- Rect Rect(int left, int top, int right, int bottom)
- 矩形
- void drawRect (float left, float top, float right, float bottom, Paint paint)
- void drawRect (RectF rect, Paint paint)
- void drawRect (Rect r, Paint paint)
- 圓角矩形 void drawRoundRect (RectF rect, float rx, float ry, Paint paint)
- RectF rect:要畫的矩形
- float rx:生成圓角的橢圓的X軸半徑
- float ry:生成圓角的橢圓的Y軸半徑
- 圓形 void drawCircle (float cx, float cy, float radius, Paint paint)
- float cx：圓心點X軸座標
- float cy：圓心點Y軸座標
- float radius：圓的半徑
橢圓 void drawOval (RectF oval, Paint paint)
弧 void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
- RectF oval:生成橢圓的矩形
- float startAngle：弧開始的角度，以X軸正方向為0度
- float sweepAngle：弧持續的角度
- boolean useCenter:是否有弧的兩邊，True，還兩邊，False，只有一條弧
- 普通水平繪製
- void drawText (String text, float x, float y, Paint paint)
- void drawText (CharSequence text, int start, int end, float x, float y, Paint paint)
- void drawText (String text, int start, int end, float x, float y, Paint paint)
- void drawText (char[] text, int index, int count, float x, float y, Paint paint)
第一個建構函式：最普通簡單的建構函式；
第三、四個建構函式：實現擷取一部分字型給圖；
第二個建構函式：最強大，因為傳入的可以是charSequence型別字型，所以可以實現繪製帶圖片的擴充套件文字（待續），而且還能擷取一部分繪製
指定個個文字位置
- void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)
void drawPosText (String text, float[] pos, Paint paint)
說明：
第一個建構函式：實現擷取一部分文字繪製；引數說明：
char[] text：要繪製的文字陣列
int index:：第一個要繪製的文字的索引
int count：要繪製的文字的個數，用來算最後一個文字的位置，從第一個繪製的文字開始算起
float[] pos：每個字型的位置，同樣兩兩一組，如｛x1,y1,x2,y2,x3,y3……｝
沿路徑繪製
- void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)
- void drawTextOnPath (char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)
引數說明：
有關擷取部分字型繪製相關引數（index,count），沒難度，就不再講了，下面首重講hOffset、vOffset
float hOffset : 與路徑起始點的水平偏移距離
float vOffset : 與路徑中心的垂直偏移量
- 畫直線 void drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
Paint
- paint.setAntiAlias(true);//抗鋸齒功能
- paint.setColor(Color.RED); //設定畫筆顏色
- paint.setStrokeWidth(30);//設定畫筆寬度
- paint.setTextSize(12);//設定文字大小
- paint.setStyle(Style.FILL);//設定填充樣式
- Paint.Style.FILL :填充內部
- Paint.Style.FILL_AND_STROKE ：填充內部和描邊
- Paint.Style.STROKE ：僅描邊
- paint.setShadowLayer (float radius, float dx, float dy, int color) 新增陰影
- radius:陰影的傾斜度
- dx:水平位移
- dy:垂直位移
- setStrokeCap(Paint.Cap cap)
- BUTT 無線帽
- SQUARE 方形線帽
- ROUND 圓形線帽
- paint.setFakeBoldText(true);//設定是否為粗體文字
- paint.setUnderlineText(true);//設定下劃線
- paint.setTextSkewX((float) -0.25);//設定字型水平傾斜度，普通斜體字是-0.25
- paint.setStrikeThruText(true);//設定帶有刪除線效果
- paint.setTextAlign(Paint.Align.XXX);
- LEFT
- CENTER
- RIGHT
原點(x,y)在矩形的 左 居中 右 - paint.setStrokeJoin(Paint.Join.MITER);
- Join.MITER（結合處為銳角）
- Join.Round(結合處為圓弧)
- Join.BEVEL(結合處為直線)
- paint.setTextScaleX(2);//只會將水平方向拉伸，高度不會變
- paint.setTypeface(typeface); 字型樣式設定（Typeface）
- Typeface create(String familyName, int style) //直接通過指定字型名來載入系統中自帶的文字樣式
- Typeface create(Typeface family, int style) //通過其它Typeface變數來構建文字樣式
- Typeface createFromAsset(AssetManager mgr, String path) //通過從Asset中獲取外部字型來顯示字型樣式
- Typeface createFromFile(String path)//直接從路徑建立
- Typeface createFromFile(File path)//從外部路徑來建立字型樣式
- Typeface defaultFromStyle(int style)//建立預設字型
上面的各個引數都會用到Style變數,Style的列舉值如下:
Typeface.NORMAL //正常體
Typeface.BOLD //粗體
Typeface.ITALIC //斜體
Typeface.BOLD_ITALIC //粗斜體 - 使用系統中的字型
- Typeface defaultFromStyle(int style)//建立預設字型
- Typeface create(String familyName, int style) //直接通過指定字型名來載入系統中自帶的文字樣式
- 自字義字型
- Typeface createFromAsset(AssetManager mgr, String path) //通過從Asset中獲取外部字型來顯示字型樣式
- Typeface createFromFile(String path)//直接從路徑建立
- Typeface createFromFile(File path)//從外部路徑來建立字型樣式
- FontMetrics 文字的 5 條 線
- 基準點是baseline
- Ascent是baseline之上至字元最高處的距離
- Descent是baseline之下至字元最低處的距離
- Leading文件說的很含糊，其實是上一行字元的descent到下一行的ascent之間的距離
- Top指的是指的是最高字元到baseline的值，即ascent的最大值
- 同上，bottom指的是最下字元到baseline的值，即descent的最大值
- 高度
Paint.FontMetricsInt fm = paint.getFontMetricsInt();int width = paint.measureText(String text);
int top = baseLineY + fm.top;
int bottom = baseLineY + fm.bottom;
//所佔高度
int height = bottom - top; </li>
<li>寬度
- 最小矩形 public void getTextBounds(String text, int start, int end, Rect bounds);
獲取指定字串所對應的最小矩形，以（0，0）點所在位置為基線
- text 要測量最小矩形的字串
- start 要測量起始字元在字串中的索引
- end 所要測量的字元的長度
- bounds 接收測量結果
Path 將多種複合路徑（多個輪廓，如直線段、二次曲線、立方曲線）封裝在其內部的幾何路徑 (BaseView)
- paint.setPathEffect();
- CornerPathEffect——圓形拐角效果 public CornerPathEffect(float radius)
- DashPathEffect——虛線效果
public DashPathEffect(float intervals[], float phase)
intervals 長度必須大於等於2；因為必須有一個實線段和一個空線段來組成虛線。
個數必須為偶數，如果是基數，最後一個數字將被忽略；這個很好理解，因為一組虛線的組成必然是一個實線和一個空線成對組成的
phase：開始繪製的偏移值 - DiscretePathEffect——離散路徑效果
public DiscretePathEffect(float segmentLength, float deviation)
第一個引數segmentLength：表示將原來的路徑切成多長的線段。如果值為2，那麼這個路徑就會被切成一段段由長度為2的小線段。所以這個值越小，所切成的小線段越多；這個值越大，所切成的小線段越少。
第二引數deviation：表示被切成的每個小線段的可偏移距離。值越大，就表示每個線段的可偏移距離就越大，就顯得越凌亂，值越小，每個線段的可偏移原位置的距離就越小
- PathDashPathEffect——印章路徑效果
public PathDashPathEffect(Path shape, float advance, float phase,Style style)
Path shape:表示印章路徑，比如我們下面示例中的三角形加右上角一個點；
float advance：表示兩個印章路徑間的距離,很容易理解，印章間距離越大，間距就越大。
float phase：路徑繪製偏移距離，與上面DashPathEffect中的float phase引數意義相同
Style style：表示在遇到轉角時，如何操作印章以使轉角平滑過渡，取值有：Style.ROTATE，Style.MORPH，Style.TRANSLATE;Style.ROTATE表示通過旋轉印章來過渡轉角；Style.MORPH表示通過變形印章來過渡轉角；Style.TRANSLATE表示通過位移來過渡轉角。這三個效果的具體意義，上面會通過具體示例來分別講解。
- PathDashPathEffect——印章路徑效果
- 直線路徑
- void moveTo (float x1, float y1):直線的開始點；即將直線路徑的繪製點定在（x1,y1）的位置
- void lineTo (float x2, float y2)：直線的結束點，又是下一次繪製直線路徑的開始點；lineTo（）可以一直用
- void close ():如果連續畫了幾條直線，但沒有形成閉環，呼叫Close()會將路徑首尾點連線起來，形成閉環
- 矩形路徑
- void addRect (float left, float top, float right, float bottom, Path.Direction dir)
- void addRect (RectF rect, Path.Direction dir)
這裡Path類建立矩形路徑的引數與上篇canvas繪製矩形差不多，唯一不同的一點是增加了Path.Direction引數；
Path.Direction有兩個值：
Path.Direction.CCW：是counter-clockwise縮寫，指建立逆時針方向的矩形路徑；
Path.Direction.CW：是clockwise的縮寫，指建立順時針方向的矩形路徑
- 圓角矩形路徑
- void addRoundRect (RectF rect, float[] radii, Path.Direction dir)
- void addRoundRect (RectF rect, float rx, float ry, Path.Direction dir)
第一個建構函式：可以定製每個角的圓角大小：
float[] radii：必須傳入8個數值，分四組，分別對應每個角所使用的橢圓的橫軸半徑和縱軸半徑，如｛x1,y1,x2,y2,x3,y3,x4,y4｝，其中，x1,y1對應第一個角的（左上角）用來產生圓角的橢圓的橫軸半徑和縱軸半徑，其它類推……
第二個建構函式：只能構建統一圓角大小
float rx：所產生圓角的橢圓的橫軸半徑；
float ry：所產生圓角的橢圓的縱軸半徑
- 圓形路徑
- void addCircle (float x, float y, float radius, Path.Direction dir)
引數說明：
float x：圓心X軸座標
float y：圓心Y軸座標
float radius：圓半徑
- void addCircle (float x, float y, float radius, Path.Direction dir)
- 橢圓路徑
- void addOval (RectF oval, Path.Direction dir)
引數說明：
RectF oval：生成橢圓所對應的矩形
Path.Direction :生成方式，與矩形一樣，分為順時針與逆時針，意義完全相同，不再重複
- void addOval (RectF oval, Path.Direction dir)
- 弧形路徑
- void addArc (RectF oval, float startAngle, float sweepAngle)
引數：
RectF oval：弧是橢圓的一部分，這個引數就是生成橢圓所對應的矩形；
float startAngle：開始的角度，X軸正方向為0度
float sweepAngel：持續的度數；
- void addArc (RectF oval, float startAngle, float sweepAngle)
- 線段軌跡
- void quadTo (float x1, float y1, float x2, float y2)
- canvas變換與操作
- 平移（translate） void translate(float dx, float dy)
引數說明：
float dx：水平方向平移的距離，正數指向正方向（向右）平移的量，負數為向負方向（向左）平移的量
flaot dy：垂直方向平移的距離，正數指向正方向（向下）平移的量，負數為向負方向（向上）平移的量
- 平移（translate） void translate(float dx, float dy)
- 旋轉（Rotate）
- void rotate(float degrees)
- void rotate (float degrees, float px, float py)
第一個建構函式直接輸入旋轉的度數，正數是順時針旋轉，負數指逆時針旋轉，它的旋轉中心點是原點（0，0）
第二個建構函式除了度數以外，還可以指定旋轉的中心點座標（px,py）
- 縮放（scale ）
- public void scale (float sx, float sy)
- public final void scale (float sx, float sy, float px, float py)
float sx:水平方向伸縮的比例，假設原座標軸的比例為n,不變時為1，在變更的X軸密度為n*sx;所以，sx為小數為縮小，sx為整數為放大
float sy:垂直方向伸縮的比例，同樣，小數為縮小，整數為放大
- 扭曲（skew）
- void skew (float sx, float sy)
引數說明：
float sx:將畫布在x方向上傾斜相應的角度，sx傾斜角度的tan值，
float sy:將畫布在y軸方向上傾斜相應的角度，sy為傾斜角度的tan值，
- void skew (float sx, float sy)
- 裁剪畫布（clip系列函式）
- boolean clipPath(Path path)
- boolean clipPath(Path path, Region.Op op)
- boolean clipRect(Rect rect, Region.Op op)
- boolean clipRect(RectF rect, Region.Op op)
- boolean clipRect(int left, int top, int right, int bottom)
- boolean clipRect(float left, float top, float right, float bottom)
- boolean clipRect(RectF rect)
- boolean clipRect(float left, float top, float right, float bottom, Region.Op op)
- boolean clipRect(Rect rect)
- boolean clipRegion(Region region)
- boolean clipRegion(Region region, Region.Op op)
- 畫布的儲存與恢復（save()、restore()）
- int save ()
- void restore()
- paint.setPathEffect();
區域（Range）
- 基本建構函式
- public Region() //建立一個空的區域
- public Region(Region region) //拷貝一個region的範圍
- public Region(Rect r) //建立一個矩形的區域
- public Region(int left, int top, int right, int bottom) //建立一個矩形的區域
第二個建構函式是通過其它的Region來複制一個同樣的Region變數
第三個，第四個才是正規常的，根據一個矩形或矩形的左上角和右下角點構造出一個矩形區域
- 間接構造
- public void setEmpty() //置空
- public boolean set(Region region)
- public boolean set(Rect r)
- public boolean set(int left, int top, int right, int bottom)
- public boolean setPath(Path path, Region clip)
這是Region所具有的一系列Set方法，我這裡全部列了出來，下面一一對其講解：
注意：無論呼叫Set系列函式的Region是不是有區域值，當呼叫Set系列函式後，原來的區域值就會被替換成Set函式裡的區域。
SetEmpty（）：從某種意義上講置空也是一個建構函式，即將原來的一個區域變數變成了一個空變數，要再利用其它的Set方法重新構造區域。
set(Region region)：利用新的區域值來替換原來的區域
set(Rect r)：利用矩形所代表的區域替換原來的區域
set(int left, int top, int right, int bottom)：同樣，根據矩形的兩個點構造出矩形區域來替換原來的區域值
setPath(Path path, Region clip)：根據路徑的區域與某區域的交集，構造出新區域，這個後面具體講解
- 使用SetPath（）構造不規則區域
- boolean setPath (Path path, Region clip)
Path path：用來構造的區域的路徑
Region clip：與前面的path所構成的路徑取交集，並將兩交集設定為最終的區域
由於路徑有很多種構造方法，而且可以輕意構造出非矩形的路徑，這就擺脫了前面的建構函式只能構造矩形區域的限制。但這裡有個問題是要指定另一個區域來取共同的交集，當然如果想顯示路徑構造的區域，Region clip引數可以傳一個比Path範圍大的多的區域，取完交集之後，當然是Path引數所對應的區域嘍。機智的孩子
- boolean setPath (Path path, Region clip)
- 矩形集列舉區域——RegionIterator類
- RegionIterator(Region region) //根據區域構建對應的矩形集
- boolean next(Rect r) //獲取下一個矩形，結果儲存在引數Rect r 中
區域的合併、交叉等操作
- public final boolean union(Rect r)
- public boolean op(Rect r, Op op) {
- public boolean op(int left, int top, int right, int bottom, Op op)
- public boolean op(Region region, Op op)
- public boolean op(Rect rect, Region region, Op op)
“`
public enum Op {
DIFFERENCE(0), //最終區域為region1 與 region2不同的區域
INTERSECT(1), // 最終區域為region1 與 region2相交的區域
UNION(2), //最終區域為region1 與 region2組合一起的區域
XOR(3), //最終區域為region1 與 region2相交之外的區域
REVERSE_DIFFERENCE(4), //最終區域為region2 與 region1不同的區域
REPLACE(5); //最終區域為為region2的區域
其它一些方法
/*幾個判斷方法/
public native boolean isEmpty();//判斷該區域是否為空
public native boolean isRect(); //是否是一個矩陣
public native boolean isComplex();//是否是多個矩陣組合
/*一系列的getBound方法，返回一個Region的邊界/
public Rect getBounds()
public boolean getBounds(Rect r)
public Path getBoundaryPath()
public boolean getBoundaryPath(Path path)/*一系列的判斷是否包含某點 和是否相交/
public native boolean contains(int x, int y);//是否包含某點
public boolean quickContains(Rect r) //是否包含某矩形
public native boolean quickContains(int left, int top, int right,
int bottom) //是否沒有包含某矩陣形
public boolean quickReject(Rect r) //是否沒和該矩形相交
public native boolean quickReject(int left, int top, int right, int bottom); //是否沒和該矩形相交
public native boolean quickReject(Region rgn); //是否沒和該矩形相交/*幾個平移變換的方法/
public void translate(int dx, int dy)
public native void translate(int dx, int dy, Region dst);
- 基本建構函式
屬性動畫自定義View Demo
- 貝塞爾波浪 HandwritingViewo
- 貝塞爾繪製
- 動畫 移動
- 手寫畫板 WaveView
- 手勢監聽 與 貝塞爾 繪製
- 圓形載入進度條 CircleProgressView
- 兩個 drawArc 一個繪製背景 一個繪製進度 sweepAngle
- drawText 繪製 文字 FontMetricsInt 計算文字大小
- 自定義控制元件 溫度旋轉按鈕 TempControlView
- canvas 的應用 儲存 取出 旋轉 移動
- 手勢 螢幕 角度的判斷