效果分為三方面
多個小球按上圖動畫旋轉
小球的大小按規律變化,模擬分散和聚合
最後畫乙個對勾
小球位置和動畫的實現原理
本篇文章用到了仿華為01-圓環進度和小球 裡面的知識點:屬性動畫和插值器
上面的文章中只有乙個小球.我們把他看成是此處最前面的那個小球.小球做加速減速動畫.
小球動畫實現的難點在於各個小球位置的確定和變化
參考第 1 個小球實現的原理.可以想到,後面的小球也需要做加速減速動畫.
但是加速時要依次遞減. 也就是第 1 小球的加速度》第 2 個小球》第 3 個小球》…這樣小球就會漸漸分散開
減速時也要依次遞減 也就是第 1 個小球減速最快,後面的減速慢.這樣後面的小球會追上前面的,形成類似融合效果.
總結: 每個小球都做加速減速動畫.用不同的加速度和減速度來實現分散和聚合效果.不同的加速度和減速度我們可以用冪函式來實現.
實現方式:
為每個小球設定乙個屬性動畫,並自定義對應的插值器.
只給第 1 個小球設定屬性動畫,其餘小球位置由第乙個小球確定
為了減少**和方便理解.我們用第二種方法實現
第1個第2個
第3個第4個
第5個比例00
1.2 0
1.201.5
01.5
01.9
01.9
02.5
02.5
實際角度00
000比例
0.125
0.125
1.2 0.125
1.20.125
1.5 0.125
1.50.125
1.9 0.125
1.90.125
2.5 0.125
2.5實際角度
4530167
2比例0.25
0.25
1.2 0.25
1.20.25
1.5 0.25
1.50.25
1.9 0.25
1.90.25
2.5 0.25
2.5實際角度
9068
3045
26比例
0.50.5
1.2 0.5
1.20.51.5
0.51.5
0.51.9
0.51.9
0.52.5
0.52.5
實際角度
180156
12796
63比例
0.75
0.75
1.2 0.75
1.20.75
1.5 0.75
1.50.75
1.9 0.75
1.90.75
2.5 0.75
2.5實際角度
270254
233208
175比例11
1.2 1
1.211.5
11.5
11.9
11.9
12.5
12.5
實際角度
360360
360360
360
總結:
1. 以第 1 個小球(角度佔360度比例)為冪函式底數,後面小球對應的冪為 1.2, 1.5, 1.9, 2.5
2. 因為第 1 個小球本身具有加速減速動畫,以其為基準後所有小球就用相同動畫特點
3. 起始,結束位置相同,速度變化不同,實現了小球間分散聚合
小球半徑的計算
為使得聚散效果更逼真,小球的半徑還需要變化.理想狀態是0-180度時,前面小球變小,後面小球變大,彷彿是前面分解了部分融入後面. 180-360則相反.整個過程保持前面小球半徑大於後面小球.小球 1 半徑的變化規律這裡沒能實現理想效果,小球半徑是一起變大和變小的.
上圖是小球 1 的半徑變化示意圖,起始結束位置最大,180度時半徑減半
假設小球 1 此時半徑為 r , 小球 2 就為 r /1.2, 小球 3 是 r/1.5 …. 具體可以自己調整.
對勾的實現
畫對勾是 view 對外暴露的方法.當需要的時候呼叫. 此時結束小球動畫,設定畫筆透明度setalpha()來畫出乙個緩慢浮現的對勾
public
class
dotrotateandcheckmark
extends
view
public
void
setangle(float angle)
public
dotrotateandcheckmark(context context)
public
dotrotateandcheckmark(context context, @nullable attributeset attrs)
public
dotrotateandcheckmark(context context, @nullable attributeset attrs, int defstyleattr)
private
void
init()
}, 800);
radio[0] = 1f;
radio[1] = 1.2f;
radio[2] = 1.5f;
radio[3] = 1.9f;
radio[4] = 2.5f;
path = new path();
}@override
protected
void
ondraw(canvas canvas) else
}private
void
drawmark(canvas canvas)
private
void
drawdots(canvas canvas)
//postdelayed(new runnable()
}, 20);
}// 獲取小球半徑
private
float
getradius(float angele, int pos) else
return radius / radio[pos];
}// 開始小球動畫
private
void
startcirclerun() else
}// 開始對勾
public
void
drawcheckmark()
});}
}
androidstudio 3.1.2, compilesdkversion 27
小球的屬性動畫作用於屬性 angle,對應 set() get() 方法不可或缺
小球動畫是自動開啟,畫對勾方法對外暴露
沒有對外提供 attr 屬性設定
專案位址 不足
小球半徑變化未能實現理想狀態
小球變對號之間沒有轉場動畫
上交仿人手 02
關於上交的 仿人手 的文獻主要包括三個方面的內容 1 design of the rfisfa 2 modular design of the anthropomorphic hand 3 evaluation of the motion and force performance 在上海交通大學穀...
仿射變換 2 旋轉
同樣要使用cv2.warpaffine 進行仿射變換。在使用之前，可以通過函式cv2.getrotationmatrix2d 獲取轉換矩陣。m cv2.getrotationmatrix center,angle,scale center 旋轉中心 angle 旋轉角度。正數表示逆時針旋轉，負數表示...
仿射變換函式warpAffine 旋轉
理論 翻開任意一本影象處理的書，都會講到影象的幾何變換，這裡面包括 仿射變換 affine transformation 投影變換 projecttive transformation 前者針對的是平面上的物體位姿變化，如水平 垂直方向位移 旋轉 縮小 放大，常見的應用有orc字元識別。後者針對的是...