Optimize performance of GradientMaskView by using ColorMatrix for maskOpacity adjustments instead of bitmap recreation. Update App.tsx to include stress test for performance validation.

CS6 · CS6 · commit ef7de2133cf8 · 2026-01-08T12:09:12.000+08:00
diff --git a/android/src/main/java/expo/modules/gradientmask/GradientMaskView.kt b/android/src/main/java/expo/modules/gradientmask/GradientMaskView.kt
@@ -19,6 +19,10 @@ import expo.modules.kotlin.views.ExpoView
  * maskOpacity 控制漸層 mask 效果的顯示程度：
  * - maskOpacity = 0 → 無漸層效果，內容完全可見（全部 alpha=255）
  * - maskOpacity = 1 → 完整漸層效果（使用原始 alpha）
+ *
+ * 效能優化：
+ * - 基礎漸層 bitmap (baseMaskBitmap) 只在 colors/locations/direction/size 變化時重建
+ * - maskOpacity 變化時只使用 ColorMatrix 調整 alpha，不重建 bitmap
  */
 class GradientMaskView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
 
@@ -30,12 +34,19 @@ class GradientMaskView(context: Context, appContext: AppContext) : ExpoView(cont
     // maskOpacity: 0 = 無漸層效果, 1 = 完整漸層效果
     private var maskOpacity: Float = 1f
 
-    // Mask bitmap 和相關的 Paint
-    private var maskBitmap: Bitmap? = null
-    private var maskBitmapInvalidated = true
+    // 基礎漸層 bitmap（完整漸層效果，maskOpacity=1 時使用的原始漸層）
+    private var baseMaskBitmap: Bitmap? = null
+    // 是否需要重建基礎 bitmap（只有 colors/locations/direction/size 變化時才需要）
+    private var baseBitmapInvalidated = true
+
+    // 繪製用的 Paint
     private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
     private val porterDuffXferMode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
 
+    // 用於調整 mask alpha 的 ColorMatrix
+    private val colorMatrix = ColorMatrix()
+    private val colorMatrixFilter = ColorMatrixColorFilter(colorMatrix)
+
     init {
         // 確保背景是透明的
         setBackgroundColor(Color.TRANSPARENT)
@@ -49,42 +60,46 @@ class GradientMaskView(context: Context, appContext: AppContext) : ExpoView(cont
 
     fun setColors(colorArray: List<Int>?) {
         colors = colorArray?.toIntArray()
-        maskBitmapInvalidated = true
+        baseBitmapInvalidated = true
         invalidate()
     }
 
     fun setLocations(locationArray: List<Double>?) {
         locations = locationArray?.map { it.toFloat() }?.toFloatArray()
-        maskBitmapInvalidated = true
+        baseBitmapInvalidated = true
         invalidate()
     }
 
     fun setDirection(dir: String) {
         direction = dir
-        maskBitmapInvalidated = true
+        baseBitmapInvalidated = true
         invalidate()
     }
 
     fun setMaskOpacity(opacity: Double) {
-        maskOpacity = opacity.toFloat().coerceIn(0f, 1f)
-        maskBitmapInvalidated = true
-        invalidate()
+        val newOpacity = opacity.toFloat().coerceIn(0f, 1f)
+        if (newOpacity != maskOpacity) {
+            maskOpacity = newOpacity
+            // 只需要 invalidate，不需要重建 bitmap
+            // dispatchDraw 時會使用 ColorMatrix 來調整 alpha
+            invalidate()
+        }
     }
 
     // MARK: - Layout
 
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
         super.onSizeChanged(w, h, oldw, oldh)
         if (w > 0 && h > 0) {
-            updateMaskBitmap()
-            maskBitmapInvalidated = false
+            updateBaseMaskBitmap()
+            baseBitmapInvalidated = false
         }
     }
 
     override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
         super.onLayout(changed, l, t, r, b)
         if (changed) {
-            maskBitmapInvalidated = true
+            baseBitmapInvalidated = true
         }
     }
 
@@ -97,13 +112,13 @@ class GradientMaskView(context: Context, appContext: AppContext) : ExpoView(cont
             return
         }
 
-        // 如果 mask bitmap 需要更新，重新創建
-        if (maskBitmapInvalidated) {
-            updateMaskBitmap()
-            maskBitmapInvalidated = false
+        // 如果基礎 bitmap 需要更新，重新創建
+        if (baseBitmapInvalidated) {
+            updateBaseMaskBitmap()
+            baseBitmapInvalidated = false
         }
 
-        val bitmap = maskBitmap
+        val bitmap = baseMaskBitmap
         // 如果沒有 mask bitmap 或 maskOpacity=0，直接繪製子元件（無 mask 效果）
         if (bitmap == null || maskOpacity <= 0f) {
             super.dispatchDraw(canvas)
@@ -122,19 +137,48 @@ class GradientMaskView(context: Context, appContext: AppContext) : ExpoView(cont
             super.dispatchDraw(canvas)
 
             // 應用 mask（使用 DST_IN 模式）
+            // 使用 ColorMatrix 來調整 alpha，實現 maskOpacity 效果
+            // 這樣就不需要每次 maskOpacity 變化都重建 bitmap
             paint.xfermode = porterDuffXferMode
+            paint.colorFilter = if (maskOpacity < 1f) {
+                // 使用 ColorMatrix 來混合原始 alpha 和完全不透明
+                // maskOpacity = 0 → 所有像素的 alpha 變為 255（完全可見）
+                // maskOpacity = 1 → 使用原始 alpha
+                //
+                // ColorMatrix 的 alpha 行：[0, 0, 0, scale, translate]
+                // 結果 alpha = originalAlpha * scale + translate
+                //
+                // 我們想要：resultAlpha = 255 + (originalAlpha - 255) * maskOpacity
+                //         = 255 * (1 - maskOpacity) + originalAlpha * maskOpacity
+                // 所以：scale = maskOpacity, translate = 255 * (1 - maskOpacity)
+                colorMatrix.set(floatArrayOf(
+                    1f, 0f, 0f, 0f, 0f,           // R
+                    0f, 1f, 0f, 0f, 0f,           // G
+                    0f, 0f, 1f, 0f, 0f,           // B
+                    0f, 0f, 0f, maskOpacity, 255f * (1f - maskOpacity)  // A
+                ))
+                ColorMatrixColorFilter(colorMatrix)
+            } else {
+                null
+            }
             canvas.drawBitmap(bitmap, 0f, 0f, paint)
             paint.xfermode = null
+            paint.colorFilter = null
         } finally {
             canvas.restoreToCount(saveCount)
         }
     }
 
-    private fun updateMaskBitmap() {
+    /**
+     * 更新基礎漸層 bitmap
+     * 這個 bitmap 包含原始漸層效果（maskOpacity = 1 時的效果）
+     * maskOpacity 的調整在 dispatchDraw 時透過 ColorMatrix 實現
+     */
+    private fun updateBaseMaskBitmap() {
         if (width <= 0 || height <= 0) return
 
         // 回收舊的 bitmap
-        maskBitmap?.recycle()
+        baseMaskBitmap?.recycle()
 
         // 創建新的 mask bitmap
         val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
@@ -148,25 +192,22 @@ class GradientMaskView(context: Context, appContext: AppContext) : ExpoView(cont
             currentColors.size != currentLocations.size ||
             currentColors.isEmpty()) {
             bitmapCanvas.drawColor(Color.WHITE)
-            maskBitmap = bitmap
+            baseMaskBitmap = bitmap
             return
         }
 
-        // 計算 effective colors（根據 maskOpacity 混合）
-        val effectiveColors = IntArray(currentColors.size) { i ->
+        // 轉換顏色為白色 + 原始 alpha（mask 只需要 alpha 通道）
+        val maskColors = IntArray(currentColors.size) { i ->
             val originalColor = currentColors[i]
             val originalAlpha = Color.alpha(originalColor)
-            // 當 maskOpacity = 0，alpha = 255（完全不透明，內容完全可見）
-            // 當 maskOpacity = 1，alpha = originalAlpha
-            val blendedAlpha = (255 + (originalAlpha - 255) * maskOpacity).toInt()
-            Color.argb(blendedAlpha, 255, 255, 255)
+            Color.argb(originalAlpha, 255, 255, 255)
         }
 
         // 建立 gradient shader
         val (startX, startY, endX, endY) = getGradientCoordinates()
         val shader = LinearGradient(
             startX, startY, endX, endY,
-            effectiveColors,
+            maskColors,
             currentLocations,
             Shader.TileMode.CLAMP
         )
@@ -177,13 +218,13 @@ class GradientMaskView(context: Context, appContext: AppContext) : ExpoView(cont
         }
         bitmapCanvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), gradientPaint)
 
-        maskBitmap = bitmap
+        baseMaskBitmap = bitmap
     }
 
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
-        maskBitmap?.recycle()
-        maskBitmap = null
+        baseMaskBitmap?.recycle()
+        baseMaskBitmap = null
     }
 
     private fun getGradientCoordinates(): List<Float> {
diff --git a/example/App.tsx b/example/App.tsx
@@ -7,6 +7,10 @@
  * Two modes:
  * - Half height mode (50%): Gradient starts from middle
  * - Full height mode (95%): Gradient covers almost entire screen
+ *
+ * Performance optimization test:
+ * - Android now uses ColorMatrix to adjust alpha instead of rebuilding bitmap
+ * - This significantly improves maskOpacity animation performance
  */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -394,6 +398,7 @@ export default function CharacterChatScreenV3DTest() {
   const [autoAddMessages, setAutoAddMessages] = useState(false); // Auto add messages
   const [messages, setMessages] = useState<ChatMessage[]>(MOCK_MESSAGES);
   const messageCountRef = useRef(100); // Track message count
+  const [isStressTest, setIsStressTest] = useState(false); // Stress test mode
 
   // Mask opacity animation control (using Reanimated SharedValue)
   const maskOpacity = useSharedValue(0);
@@ -441,6 +446,30 @@ export default function CharacterChatScreenV3DTest() {
     return () => clearInterval(interval);
   }, [autoAddMessages]);
 
+  // Stress test: rapidly toggle maskOpacity to test ColorMatrix optimization
+  // This tests the performance improvement where Android no longer rebuilds bitmap on opacity change
+  useEffect(() => {
+    if (!isStressTest) return;
+
+    const interval = setInterval(() => {
+      // Toggle between 0 and 1 rapidly (every 100ms = 10 times per second)
+      maskOpacity.value = withTiming(maskOpacity.value > 0.5 ? 0 : 1, {
+        duration: 100,
+        easing: Easing.linear,
+      });
+    }, 150);
+
+    return () => {
+      clearInterval(interval);
+      // Reset to 0 when stopping stress test
+      maskOpacity.value = withTiming(0, { duration: 300 });
+    };
+  }, [isStressTest, maskOpacity]);
+
+  const toggleStressTest = useCallback(() => {
+    setIsStressTest((prev) => !prev);
+  }, []);
+
   const toggleAutoAddMessages = useCallback(() => {
     setAutoAddMessages((prev) => !prev);
   }, []);
@@ -612,6 +641,22 @@ export default function CharacterChatScreenV3DTest() {
               <Text style={styles.messageCountText}>Messages: {messages.length}</Text>
             </View>
           </View>
+          {/* Stress test button - tests ColorMatrix optimization on Android */}
+          <View style={styles.toggleRow}>
+            <Pressable
+              style={[styles.stressTestButton, isStressTest && styles.stressTestButtonActive]}
+              onPress={toggleStressTest}
+            >
+              <FontAwesome6
+                name="bolt"
+                size={12}
+                color={isStressTest ? Colors.white : 'rgba(255,255,255,0.5)'}
+              />
+              <Text style={[styles.stressTestText, isStressTest && styles.stressTestTextActive]}>
+                {isStressTest ? 'Stop Stress Test' : 'Opacity Stress Test'}
+              </Text>
+            </Pressable>
+          </View>
         </View>
 
         {/* Info Banner */}
@@ -775,6 +820,28 @@ const styles = StyleSheet.create({
   autoAddTextActive: {
     color: Colors.white,
   },
+  stressTestButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    gap: 6,
+    marginTop: 8,
+  },
+  stressTestButtonActive: {
+    backgroundColor: 'rgba(239, 68, 68, 0.7)',
+  },
+  stressTestText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: 'rgba(255, 255, 255, 0.5)',
+  },
+  stressTestTextActive: {
+    color: Colors.white,
+  },
   messageCountBadge: {
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     paddingVertical: 8,
