Android 自定義控件：TouchCheckBox 動畫實現（圓形擴展 + 對號繪製）

效果演示

動畫拆解

1. Unchecked → Checked：圓形半徑 0.125h → 0.5h 線性放大，隨後對號兩筆劃依次繪製
2. Checked → Unchecked：對號消失（逆序），圓形縮小回初始半徑

對號幾何計算

控件寬高 w=h，圓心 (cx,cy)。對號三點：

P0 = (r/2 + padL, r + padT)           // 起點
P1 = (5r/6 + padL, 4r/3 + padT)       // 轉折點
P2 = (1.5r + padL, 2r/3 + padT)       // 終點
r = h/2

繪製邏輯

• 進度 progress ∈ [0,1]：
• progress < 1/3：繪製 P0→P1 第一段，長度按比例
• progress ≥ 1/3：第一段全繪，第二段 P1→P2 按比例繪製

動畫驅動

三個 ValueAnimator 串聯：

1. showCheck：半徑放大 0→1
2. showCorrect：對號進度 0→1
3. hideCorrect：對號進度 1→0
4. showUnChecked：半徑縮小 1→0

顏色漸變：evaluate(fraction, unCheckColor, checkColor) 線性插值 ARGB。

核心類結構

public class TouchCheckBox extends View {
    Paint circlePaint, tickPaint;
    float radius, correctProgress;
    boolean isChecked, isAnim;
    // onSizeChanged 計算幾何座標
    // onDraw 繪製圓形 + 對號
    // 點擊觸發動畫鏈
    // 提供 setChecked、setOnCheckedChangeListener
}

關鍵技術點

• ValueAnimator.ofFloat(0,1) + LinearInterpolator
• canvas.drawCircle + canvas.drawLine
• 狀態機管理動畫串聯，防止重複觸發
• dip2px 適配不同密度屏幕