[Android] タップで背景が切り替わる対話型ウォッチフェイス

ウオッチフェイスの デザイン例 にある「Applying an aesthetic change」の動きをする対話型ウォッチフェイスを作ってみました。
簡単に言うと、タップする毎に背景が切り替わるものです。

この例では、タップ時に、プロパティーアニメーションを使用して、滑らかに色を変化させながら背景を切り替えています。
サンプルとして単純化するために、単色で塗りつぶしているだけですが、
タップする毎に背景画像が切り替わる対話型ウォッチフェイスを作ることができるとも言えます。

独自のプロパティーをアニメーションさせる

ObjectAnimator は、ビューの  "x" や "y"  などの組み込みプロパティーをターゲットにして使用しますが、
今回のサンプルコードのように View 以外の任意のクラスに対しても適用できます。
この例では、独自のプロパティーとして、"BGColor" を追加しました。

独自のプロパティーを追加させるには、プロパティー名に m をつけた変数と、
その変数への Get() / Set() のアクセッサを実装します。

色をアニメーションさせる

色と色を滑らかに変化させるには ArgbEvaluator クラスを使用します。

サンプルコード

private class Engine extends CanvasWatchFaceService.Engine {
    // 背景色の配列
    final int[] BG_COLORS = {
            Color.rgb(0x30, 0xa0, 0x40),    // グリーン
            Color.rgb(0xf0, 0x70, 0xa0),    // ピンク
            Color.rgb(0xe0, 0x20, 0x20),    // レッド
            Color.rgb(0xf0, 0xe0, 0x00),    // イエロー
            Color.rgb(0x70, 0x20, 0x70),    // パープル
    };
    // BG_COLORS配列内の現在のインデックス
    int mBGColorIndex = 0;
    // 独自のプロパティー ----->
    // 背景色プロパティー
    private int mBGColor = BG_COLORS[mBGColorIndex];
    // 背景色プロパティー取得
    public int getBGColor() {
        return mBGColor;
    }
    // 背景色プロパティー設定
    public void setBGColor(int bgColor) {
        mBGColor = bgColor;
        // 再描画
        invalidate();
    }
    // 独自のプロパティー -----<
    // アニメーター
    ObjectAnimator mAnimator;
    @Override
    public void onTapCommand(int tapType, int x, int y, long eventTime) {
        super.onTapCommand(tapType, x, y, eventTime);
        // タップ押下時のみ処理
        if (tapType == TAP_TYPE_TOUCH) {
            if (mAnimator != null) {
                // アニメーションが動作中であればキャンセル
                if (mAnimator.isRunning()) {
                    mAnimator.cancel();
                }
                mAnimator = null;
            }
            if (mAnimator == null) {
                // 次の背景色用のインデックス計算
                int nextBgColorIndex = (mBGColorIndex + 1) % BG_COLORS.length;
                // アニメーターオブジェクト生成
                mAnimator = ObjectAnimator.ofObject(this,
                        "BGColor", // 独自のプロパティー
                        new ArgbEvaluator(),
                        BG_COLORS[mBGColorIndex],
                        BG_COLORS[nextBgColorIndex]);
                // アニメーション期間（ミリ秒）設定
                mAnimator.setDuration(500).start();
                mBGColorIndex = nextBgColorIndex;
            }
            // 再描画
            invalidate();
        }
    }
    @Override
    public void onDraw(Canvas canvas, Rect bounds) {
        // 背景色描画
        canvas.drawColor(mBGColor);
        // ...省略
    }