涉及：畫圓、畫矩形 canvas的平移、錯切 屬性動畫
效果顯示 讓你暈眩的圓
“呼啦圈”
“小風車” 
鼠標點擊View 開啟屬性動畫，再次點擊時關閉動畫
主要涉及，canvas的translate和scale操作 設計，將畫布的圓心先translate到控件的中心位置，畫一個大圓； 將畫布縮小到原來的0.86，畫圓（這個圓，同上面的圓參數一樣的），形成小圓，以此類推
主要操作：
canvas.translate(widh/2,height/2);//將畫布移到中間canvas.drawCircle(0, 0, widh / 2, mPaint);for(int i=0;i<30;i++){ canvas.scale(0.86f,0.86f); int radius = widh / 2; canvas.drawCircle(0, 0, radius, mPaint);}主要涉及:canvas的translate和rotate操作 設計：將畫布的圓心translate到控件的中心位置，畫一個一小的兩個圓， 兩個圓之間的間隔，通過直線畫出來，畫線開始的位置（width/2,0） 結束位置(width/2 +間隔,0) 上面已經能夠畫得一條線，接下來，使用rotate旋轉畫布，繼續畫上面的線（位置一樣，畫布變化） 每rotate一次，畫一次。
主要操作：
canvas.translate(width / 2, height / 2);int radius = width / 2;canvas.drawCircle(0, 0, radius, mPaint);//大小圓 相隔14pxcanvas.drawCircle(0, 0, radius - 14, mPaint);for (int i = 0; i < 360; i += 10) { //每隔10度切一下 canvas.drawLine(0, radius - 14, 0, radius, mPaint); canvas.rotate(10);}主要涉及canvas的translate 和 skew、以及save和restore操作 設計：將畫布移動中間位置，保存一下畫布的狀態，skew(1,0)將畫布在x方向傾斜45度 tan45=1,畫兩個對角的正方形（此時已經有了傾斜） 恢復畫布的狀態，逆時針旋轉畫布（90度），依照上面的 skew,畫兩個對角的正方形（參數 位置同上面一致，畫布有了變化）
動畫的設計：動畫效果是獲取控件的id ，對控件整體設置的屬性動畫，點擊控件，控件開始進行旋轉，再次點擊則關閉動畫，再點又開始動畫，以此類推。
畫小風車的主要代碼：
canvas.translate(width / 2, height / 2);canvas.save();canvas.skew(1, 0);canvas.drawRect(0, 0, width / 5, height / 5, mPaint);canvas.drawRect(-width / 5, -height / 5, 0, 0, mPaint);canvas.restore();canvas.rotate(90);canvas.skew(1, 0);canvas.drawRect(0, 0, width / 5, height / 5, mPaint);canvas.drawRect(-width / 5, -height / 5, 0, 0, mPaint);屬性動畫實現的主要代碼：//讓風車動起來skewView = (SkewView) findViewById(R.id.skewView);rotation = ObjectAnimator.ofFloat(skewView, "rotation", 0, 360);rotation.setDuration(2000);rotation.setRepeatCount(ValueAnimator.INFINITE);//設置動畫一直進行rotation.setRepeatMode(ValueAnimator.RESTART);//設置動畫repeat時的模式rotation.setInterpolator(new LinearInterpolator());skewView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (isSkewStart) { rotation.cancel(); isSkewStart = false; } else { rotation.start(); isSkewStart = true; } }});可以將動畫效果設置到自定義控件中 代碼： https://github.com/WhatWeCan/customer_views/tree/master/CanvasView
新聞熱點
疑難解答
