react-native-gradient-mask 0.0.1-beta.1 → 0.0.1-beta.2

package/README.ja.md

@@ -324,6 +324,30 @@ maskOpacity.value = withTiming(newValue, { duration: 300 });
 
 ---
 
+## Anini のために開発
+
+このライブラリは [**Anini**](https://play.google.com/store/apps/details?id=com.gazai.aichat) のために開発されました — スムーズでネイティブ品質のユーザー体験を提供する AI チャットコンパニオンアプリです。
+
+<p align="center">
+  <a href="https://play.google.com/store/apps/details?id=com.gazai.aichat">
+    <img src="https://img.shields.io/badge/Google_Play-Anini-414141?style=for-the-badge&logo=google-play&logoColor=white" alt="Google Play で Anini をダウンロード" />
+  </a>
+</p>
+
+---
+
+## スポンサー
+
+このプロジェクトは [**GAZAI**](https://gazai.io/EN/services) がスポンサーです — 革新的な AI 駆動アプリケーションを構築しています。
+
+<p align="center">
+  <a href="https://github.com/sponsors/CS6">
+    <img src="https://img.shields.io/badge/スポンサー-GitHub_Sponsors-ea4aaa?style=for-the-badge&logo=github-sponsors&logoColor=white" alt="GitHub でスポンサーになる" />
+  </a>
+</p>
+
+---
+
 ## ライセンス
 
 MIT © [DaYuan Lin (CS6)](https://github.com/CS6)

package/README.md

@@ -324,6 +324,30 @@ maskOpacity.value = withTiming(newValue, { duration: 300 });
 
 ---
 
+## Built for Anini
+
+This library was originally developed for [**Anini**](https://play.google.com/store/apps/details?id=com.gazai.aichat) - an AI chat companion app that delivers smooth, native-quality user experiences.
+
+<p align="center">
+  <a href="https://play.google.com/store/apps/details?id=com.gazai.aichat">
+    <img src="https://img.shields.io/badge/Google_Play-Anini-414141?style=for-the-badge&logo=google-play&logoColor=white" alt="Get Anini on Google Play" />
+  </a>
+</p>
+
+---
+
+## Sponsor
+
+This project is sponsored by [**GAZAI**](https://gazai.io/EN/services) - Building innovative AI-powered applications.
+
+<p align="center">
+  <a href="https://github.com/sponsors/CS6">
+    <img src="https://img.shields.io/badge/Sponsor-GitHub_Sponsors-ea4aaa?style=for-the-badge&logo=github-sponsors&logoColor=white" alt="Sponsor on GitHub" />
+  </a>
+</p>
+
+---
+
 ## License
 
 MIT © [DaYuan Lin (CS6)](https://github.com/CS6)

package/README.zh-TW.md

@@ -324,6 +324,30 @@ maskOpacity.value = withTiming(newValue, { duration: 300 });
 
 ---
 
+## 為 Anini 打造
+
+這個套件最初是為 [**Anini**](https://play.google.com/store/apps/details?id=com.gazai.aichat) 開發的 — 一款提供流暢、原生品質使用者體驗的 AI 聊天夥伴應用程式。
+
+<p align="center">
+  <a href="https://play.google.com/store/apps/details?id=com.gazai.aichat">
+    <img src="https://img.shields.io/badge/Google_Play-Anini-414141?style=for-the-badge&logo=google-play&logoColor=white" alt="在 Google Play 下載 Anini" />
+  </a>
+</p>
+
+---
+
+## 贊助
+
+本專案由 [**GAZAI**](https://gazai.io/EN/services) 贊助 — 打造創新的 AI 驅動應用程式。
+
+<p align="center">
+  <a href="https://github.com/sponsors/CS6">
+    <img src="https://img.shields.io/badge/贊助-GitHub_Sponsors-ea4aaa?style=for-the-badge&logo=github-sponsors&logoColor=white" alt="在 GitHub 贊助" />
+  </a>
+</p>
+
+---
+
 ## 授權
 
 MIT © [DaYuan Lin (CS6)](https://github.com/CS6)

package/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,26 +60,30 @@ 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
@@ -76,15 +91,15 @@ class GradientMaskView(context: Context, appContext: AppContext) : ExpoView(cont
     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> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gradient-mask",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.2",
   "description": "A native gradient mask component for React Native with Reanimated animation support. Supports iOS, Android, and Web platforms.",
   "main": "build/index.js",
   "module": "build/index.js",