rn-newarch-svga-player 1.1.4 → 1.1.16

package/README.md

@@ -0,0 +1,143 @@
+## **这是一款使用 ReactNative 新架构 加载`Android/iOS` Svga 动画的开源插件**[三端 Svga 动画统一使用点击这里](https://github.com/yrjwcharm/react-native-ohos/tree/feature/rnoh/svgaplayer)
+
+> ### 版本：latest
+
+<p align="center">
+  <h1 align="center"> <code>rn-newarch-svga-player</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/wonday/react-native-pdf/blob/master/LICENSE">
+        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
+    </a>
+</p>
+
+> [!TIP] [Github 地址](https://github.com/yrjwcharm/rn-newarch-svga-player)
+
+## 安装与使用
+
+> [!TIP] 注意 ⚠️ 本库 android/ios 仅给予 Fabric 新架构 支持，旧架构不在跟进，若需旧架构支持请移步<https://github.com/yrjwcharm/react-native-svga-player>
+
+#### **npm**
+
+```bash
+npm install rn-newarch-svga-player
+```
+
+#### **yarn**
+
+```bash
+yarn add rn-newarch-svga-player
+
+```
+
+> 若想更改库的别名 react-native-svga-player 来导入。你则需要把 rn-newarch-svga-player 库修改下，重新 yarn 执行
+
+```diff
++  "dependencies": {
+    "@react-native-oh/react-native-harmony": "0.72.48",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
+    "react": "18.2.0",
+    "react-native": "0.72.5",
+-    "rn-newarch-svga-player":"^latest"
++   "react-native-svga-player":"npm:rn-newarch-svga-player@latest"
+  },
+```
+
+android 需要
+
+```bash
+ ./gradlew generateCodegenArtifactsFromSchema
+```
+
+ios 需要
+
+```bash
+  cd ios
+  bundle install && bundle exec pod install
+```
+
+### ios react-native 0.76 以上 AppDelegate.mm 需要显示注册该组件
+
+```diff
+#import "AppDelegate.h"
+#import "RCTSvgaPlayer.h"
+#import <React/RCTBundleURLProvider.h>
+#import <React/RCTBridge+Private.h>
+
+@implementation AppDelegate
+// ...
+
++ - (NSDictionary<NSString *,Class<RCTComponentViewProtocol>> *)thirdPartyFabricComponents
++ {
++  NSMutableDictionary * dictionary = [super thirdPartyFabricComponents].mutableCopy;
++  dictionary[@"RNSvgaPlayer"] = [RCTSvgaPlayer class];
++  return dictionary;
++ }
+
+@end
+```
+
+## API 参考
+
+### Props
+
+| 属性              | 类型                      | 默认值      | 描述                                                  |
+| ----------------- | ------------------------- | ----------- | ----------------------------------------------------- |
+| `source`          | `SvgaSource`              | -           | SVGA 文件源                                           |
+| `autoPlay`        | `boolean`                 | `true`      | 是否自动播放                                          |
+| `loops`           | `number`                  | `0`         | 循环播放次数，默认值：0 表示无限循环                  |
+| `clearsAfterStop` | `boolean`                 | `true`      | 动画停止后是否清空画布                                |
+| `fillMode`        | `'Forward' \| 'Backward'` | `'Forward'` | 填充模式：Forward 停留在最后一帧，Backward 回到第一帧 |
+| `onFinished`      | `function`                | -           | 播放完成时的回调函数                                  |
+| `onFrame`         | `function`                | -           | 帧变化时的回调函数                                    |
+| `onPercentage`    | `function`                | -           | 播放进度变化时的回调函数                              |
+
+### Ref 方法
+
+| 方法                                                 | 描述                                            |
+| ---------------------------------------------------- | ----------------------------------------------- |
+| `startAnimation()`                                   | 从第 0 帧开始播放动画                           |
+| `startAnimationWithRange(location, length, reverse)` | 在指定范围内播放动画，可选择反向播放            |
+| `pauseAnimation()`                                   | 暂停动画，停留在当前帧                          |
+| `stopAnimation()`                                    | 停止动画，根据 clearsAfterStop 决定是否清空画布 |
+| `stepToFrame(frame, andPlay)`                        | 跳转到指定帧，可选择是否从该帧开始播放          |
+| `stepToPercentage(percentage, andPlay)`              | 跳转到指定百分比位置 (0.0-1.0)，可选择是否播放  |
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React from "react";
+import { View, Dimensions, StyleSheet } from "react-native";
+import { RNSvgaPlayer } from "react-native-svga-player";
+
+export function App() {
+  return (
+    <RNSvgaPlayer
+      source="https://raw.githubusercontent.com/yyued/SVGAPlayer-iOS/master/SVGAPlayer/Samples/Goddess.svga"
+      style={{
+        width: 300,
+        height: 150,
+      }}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+});
+```
+
+更多详情用法参考 [三端 Svga 动画统一使用点击这里](https://github.com/yrjwcharm/react-native-ohos/tree/feature/rnoh/svgaplayer)
+
+#### 开源不易，希望您可以动一动小手点点小 ⭐⭐
+
+#### 👴 希望大家如有好的需求踊跃提交,如有问题请提交 issue，空闲时间会扩充与修复优化
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/yrjwcharm/react-native-ohos-svgaplayer/blob/master/LICENSE) ，请自由地享受和参与开源。

package/SvgaPlayer.tsx

@@ -1,22 +1,21 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import type { ViewProps } from 'react-native';
-import RNSvgaPlayerNative, {
+import SvgaPlayerView, {
   Commands,
   type ComponentType,
 } from './src/specs/SvgaPlayerNativeComponent';
-
 export interface SvgaErrorEvent {
   error: string;
 }
 
 export interface SvgaPlayerProps extends ViewProps {
-  source?: string;
+  source: string;
   /**
    * 是否自动播放，默认 true
    */
   autoPlay?: boolean;
   /**
-   * 循环播放次数，默认 0（无限循环）
+   * 循环播放次数，默认 0（无限循环播放）
    */
   loops?: number;
   /**
@@ -28,10 +27,14 @@ export interface SvgaPlayerProps extends ViewProps {
    */
   align?: 'top' | 'bottom' | 'center';
 
+  fillMode?: 'Forward' | 'Backward';
+
   // 事件回调
   onError?: (event: SvgaErrorEvent) => void;
   onFinished?: () => void;
   onLoaded?: () => void;
+  onFrame?: (event: { value: number }) => void;
+  onPercentage?: (event: { value: number }) => void;
 }
 
 export interface SvgaPlayerRef {
@@ -43,6 +46,14 @@ export interface SvgaPlayerRef {
    * 停止动画，如果 clearsAfterStop 为 true 则清空画布
    */
   stopAnimation: () => void;
+  pauseAnimation: () => void;
+  stepToFrame: (frame: number, andPlay: boolean) => void;
+  stepToPercentage: (percentage: number, andPlay: boolean) => void;
+  startAnimationWithRange: (
+    location: number,
+    length: number,
+    reverse: boolean
+  ) => void;
 }
 
 const RNSvgaPlayer = forwardRef<SvgaPlayerRef, SvgaPlayerProps>(
@@ -50,11 +61,13 @@ const RNSvgaPlayer = forwardRef<SvgaPlayerRef, SvgaPlayerProps>(
     {
       autoPlay = true,
       loops = 0,
-      clearsAfterStop = false,
-      source,
+      clearsAfterStop = true,
+      source = '',
       onError,
       onFinished,
       onLoaded,
+      onFrame,
+      onPercentage,
       ...restProps
     },
     ref
@@ -72,22 +85,48 @@ const RNSvgaPlayer = forwardRef<SvgaPlayerRef, SvgaPlayerProps>(
           Commands.stopAnimation(nativeRef.current);
         }
       },
-      // pauseAnimation: () => {
-      //   if (nativeRef.current) {
-      //     Commands.pauseAnimation(nativeRef.current);
-      //   }
-      // },
+      pauseAnimation: () => {
+        if (nativeRef.current) {
+          Commands.pauseAnimation(nativeRef.current);
+        }
+      },
+      stepToFrame: (frame: number, andPlay: boolean) => {
+        if (nativeRef.current) {
+          Commands.stepToFrame(nativeRef.current, frame, andPlay);
+        }
+      },
+      stepToPercentage: (frame: number, andPlay: boolean) => {
+        if (nativeRef.current) {
+          Commands.stepToPercentage(nativeRef.current, frame, andPlay);
+        }
+      },
+      startAnimationWithRange: (
+        location: number,
+        length: number,
+        reverse: boolean
+      ) => {
+        if (nativeRef.current) {
+          Commands.startAnimationWithRange(
+            nativeRef.current,
+            location,
+            length,
+            reverse
+          );
+        }
+      },
     }));
 
     return (
-      <RNSvgaPlayerNative
+      <SvgaPlayerView
         ref={nativeRef}
         source={source}
         autoPlay={autoPlay}
         loops={loops}
         clearsAfterStop={clearsAfterStop}
-        onError={(error) => onError?.(error.nativeEvent)}
+        onError={(event) => onError?.(event.nativeEvent)}
         onFinished={onFinished}
+        onFrameChanged={(event) => onFrame?.(event.nativeEvent)}
+        onPercentageChanged={(event) => onPercentage?.(event.nativeEvent)}
         onLoaded={onLoaded}
         {...restProps}
       />

package/android/build.gradle

@@ -1,8 +1,8 @@
+import java.nio.file.Paths
 buildscript {
-  ext.getExtOrDefault = {name ->
-    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['SvgaPlayer_' + name]
-  }
-
+     ext.safeExtGet = {prop ->
+        rootProject.ext.has(prop) ? rootProject.ext.get(prop) : project.properties['SvgaPlayer_' + prop]
+    }
   repositories {
     // 使用阿里云镜像源
     maven { url 'https://maven.aliyun.com/repository/google' }
@@ -15,21 +15,32 @@ buildscript {
   }
 
   dependencies {
-    classpath "com.android.tools.build:gradle:8.7.2"
+    classpath "com.android.tools.build:gradle:7.0.4"
     // noinspection DifferentKotlinGradleVersion
-    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${safeExtGet('kotlinVersion')}")
+
   }
 }
 
 
 apply plugin: "com.android.library"
 apply plugin: "kotlin-android"
-
 apply plugin: "com.facebook.react"
 
 def getExtOrIntegerDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["SvgaPlayer_" + name]).toInteger()
 }
+static def findNodeModulePath(baseDir, packageName) {
+    def basePath = baseDir.toPath().normalize()
+    while (basePath) {
+        def candidatePath = Paths.get(basePath.toString(), "node_modules", packageName)
+        if (candidatePath.toFile().exists()) {
+            return candidatePath.toString()
+        }
+        basePath = basePath.getParent()
+    }
+    return null
+}
 
 android {
   namespace "com.svgaplayer"
@@ -40,59 +51,19 @@ android {
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
   }
-
-  buildFeatures {
-    buildConfig true
-  }
-
-  buildTypes {
-    release {
-      minifyEnabled false
-    }
-  }
-
-  lintOptions {
-    disable "GradleCompatible"
-  }
-
-  compileOptions {
-    sourceCompatibility JavaVersion.VERSION_1_8
-    targetCompatibility JavaVersion.VERSION_1_8
-  }
-
-  sourceSets {
-    main {
-      java.srcDirs += [
-        "generated/java",
-        "generated/jni"
-      ]
-    }
-  }
 }
+def reactNativePath = findNodeModulePath(projectDir, "react-native")
 
 repositories {
-  // 使用阿里云镜像源
-  maven { url 'https://maven.aliyun.com/repository/google' }
-  maven { url 'https://maven.aliyun.com/repository/central' }
-  maven { url 'https://maven.aliyun.com/repository/jcenter' }
-  maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
-  // 添加 JitPack 仓库（用于 GitHub 依赖）
-  maven { url 'https://jitpack.io' }
-  // 备用官方源
-  mavenCentral()
-  google()
+   maven {
+        url "${reactNativePath}/android"
+    }
+    mavenCentral()
+    google()
 }
 
-def kotlin_version = getExtOrDefault("kotlinVersion")
-
 dependencies {
   implementation "com.facebook.react:react-android"
-  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:${safeExtGet('kotlinVersion')}"
   implementation "com.github.yyued:SVGAPlayer-Android:2.6.1"
 }
-
-react {
-  jsRootDir = file("../src/")
-  libraryName = "RNSvgaPlayer"
-  codegenJavaPackageName = "com.svgaplayer"
-}

package/android/gradle.properties

@@ -1,5 +1,4 @@
-SvgaPlayer_kotlinVersion=2.0.21
-SvgaPlayer_minSdkVersion=24
-SvgaPlayer_targetSdkVersion=34
-SvgaPlayer_compileSdkVersion=35
-SvgaPlayer_ndkVersion=27.1.12297006
+SvgaPlayer_kotlinVersion=1.6.0
+SvgaPlayer_minSdkVersion=21
+SvgaPlayer_targetSdkVersion=31
+SvgaPlayer_compileSdkVersion=31

package/android/src/main/java/com/svgaplayer/RNSvgaPlayer.kt

@@ -11,6 +11,9 @@ import com.facebook.react.uimanager.events.EventDispatcher
 import com.opensource.svgaplayer.SVGACallback
 import com.opensource.svgaplayer.SVGAImageView
 import com.svgaplayer.events.TopFinishedEvent
+import com.svgaplayer.events.TopFrameEvent
+import com.svgaplayer.events.TopLoadedEvent
+import com.svgaplayer.events.TopPercentageEvent
 
 class RNSvgaPlayer(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : SVGAImageView(context, attrs, defStyleAttr) {
 
@@ -23,6 +26,16 @@ class RNSvgaPlayer(context: Context, attrs: AttributeSet?, defStyleAttr: Int) :
       override fun onStep(frame: Int, percentage: Double) {
          // 动画开始播放，清除启动标记
          isStarting = false
+        val frameArguments = Arguments.createMap()
+        val percentageArguments = Arguments.createMap()
+        frameArguments.putDouble("value",frame.toDouble());
+        percentageArguments.putDouble("value", percentage);
+        val surfaceId = UIManagerHelper.getSurfaceId(context)
+        val framedEvent = TopFrameEvent(surfaceId, id, frameArguments)
+        var percentageEvent = TopPercentageEvent(surfaceId,id,percentageArguments);
+        val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context as ThemedReactContext, id)
+        dispatcher?.dispatchEvent(framedEvent)
+        dispatcher?.dispatchEvent(percentageEvent);
       }
 
       override fun onRepeat() {

package/android/src/main/java/com/svgaplayer/RNSvgaPlayerManager.kt

@@ -1,10 +1,8 @@
 package com.svgaplayer
 
-import android.content.Context
 import android.util.Log
-import com.facebook.infer.annotation.Assertions
+import android.widget.ImageView
 import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.SimpleViewManager
@@ -12,37 +10,35 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
-import android.widget.ImageView
 import com.facebook.react.viewmanagers.RNSvgaPlayerManagerDelegate
 import com.facebook.react.viewmanagers.RNSvgaPlayerManagerInterface
+import com.opensource.svgaplayer.SVGACache
 import com.opensource.svgaplayer.SVGAParser
 import com.opensource.svgaplayer.SVGAVideoEntity
-import com.opensource.svgaplayer.SVGACache
+import com.opensource.svgaplayer.utils.SVGARange
 import com.svgaplayer.events.TopErrorEvent
-import com.svgaplayer.events.TopFinishedEvent
 import com.svgaplayer.events.TopLoadedEvent
 import java.io.File
 import java.io.FileInputStream
-import java.io.IOException
 import java.net.URL
 
-@ReactModule(name = RNSvgaPlayerManager.NAME)
-class RNSvgaPlayerManager : SimpleViewManager<RNSvgaPlayer>(), RNSvgaPlayerManagerInterface<RNSvgaPlayer> {
+
+@ReactModule(name = RNSvgaPlayerManager.REACT_CLASS)
+class RNSvgaPlayerManager() : SimpleViewManager<RNSvgaPlayer>(), RNSvgaPlayerManagerInterface<RNSvgaPlayer> {
 
   companion object {
-    const val NAME = "RNSvgaPlayer"
+    const val REACT_CLASS = "RNSvgaPlayer"
   }
-
   private val mDelegate: ViewManagerDelegate<RNSvgaPlayer> = RNSvgaPlayerManagerDelegate(this)
 
-  override fun getName(): String = NAME
+  override fun getName(): String = REACT_CLASS
 
   override fun getDelegate(): ViewManagerDelegate<RNSvgaPlayer>? = mDelegate
 
   override fun createViewInstance(c: ThemedReactContext): RNSvgaPlayer {
     return RNSvgaPlayer(c, null, 0)
   }
-
+  @ReactProp(name = "source")
   override fun setSource(view: RNSvgaPlayer, source: String?) {
     val context = view.context
     source?.let {
@@ -67,7 +63,7 @@ class RNSvgaPlayerManager : SimpleViewManager<RNSvgaPlayer>(), RNSvgaPlayerManag
           val surfaceId = UIManagerHelper.getSurfaceId(context)
           val loadedEvent = TopLoadedEvent(surfaceId, view.id, loadedData)
           val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context as ThemedReactContext, view.id)
-          dispatcher?.dispatchEvent(loadedEvent)
+           dispatcher?.dispatchEvent(loadedEvent)
 
           if(view.autoPlay){
             view.startAnimationSafely()
@@ -99,20 +95,20 @@ class RNSvgaPlayerManager : SimpleViewManager<RNSvgaPlayer>(), RNSvgaPlayerManag
       }
     }
   }
-
+  @ReactProp(name = "loops", defaultInt = 0)
   override fun setLoops(view: RNSvgaPlayer, loops: Int) {
     view.loops = loops
   }
-
+  @ReactProp(name = "clearsAfterStop", defaultBoolean = true)
   override fun setClearsAfterStop(view: RNSvgaPlayer, clearsAfterStop: Boolean) {
     view.clearsAfterDetached = clearsAfterStop
     view.clearsAfterStop = clearsAfterStop
   }
-
+  @ReactProp(name = "autoPlay", defaultBoolean = true)
   override fun setAutoPlay(view: RNSvgaPlayer, autoPlay: Boolean) {
     view.autoPlay = autoPlay
   }
-
+  @ReactProp(name = "align")
   override fun setAlign(view: RNSvgaPlayer, align: String?) {
     val scaleType = when (align) {
       "bottom" -> ImageView.ScaleType.FIT_END
@@ -130,6 +126,26 @@ class RNSvgaPlayerManager : SimpleViewManager<RNSvgaPlayer>(), RNSvgaPlayerManag
     when (commandId) {
       "startAnimation" -> startAnimation(root)
       "stopAnimation" -> stopAnimation(root)
+      "pauseAnimation" -> pauseAnimation(root)
+      "stepToFrame" -> {
+        val frame = args?.getInt(0) ?: 0
+        val andPlay = args?.getBoolean(1) ?: false
+        stepToFrame(root, frame, andPlay)
+      }
+      "stepToPercentage" -> {
+        val percentage = args?.getInt(0) ?: 0
+        val andPlay = args?.getBoolean(1) ?: false
+        stepToPercentage(root, percentage, andPlay)
+      }
+      "startAnimationWithRange" -> {
+        val location = args?.getInt(0) ?: 0
+        val length = args?.getInt(1) ?: 0
+        val reverse = args?.getBoolean(2) ?: false
+        startAnimationWithRange(root, location, length, reverse)
+      }
+      else -> {
+        Log.w(REACT_CLASS, "Unknown command: $commandId")
+      }
     }
   }
 
@@ -138,17 +154,73 @@ class RNSvgaPlayerManager : SimpleViewManager<RNSvgaPlayer>(), RNSvgaPlayerManag
   }
 
   override fun stopAnimation(view: RNSvgaPlayer) {
-    view.stopAnimation(true)
+    view.stopAnimation(view.clearsAfterStop)
+  }
+
+//  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? {
+//    val export = super.getExportedCustomDirectEventTypeConstants()?.toMutableMap()
+//      ?: mutableMapOf<String, Any>()
+//    export[TopErrorEvent.EVENT_NAME] = mapOf("registrationName" to "onError")
+//    export[TopFinishedEvent.EVENT_NAME] = mapOf("registrationName" to "onFinished")
+//    export[TopLoadedEvent.EVENT_NAME] = mapOf("registrationName" to "onLoaded")
+//    export[TopFrameEvent.EVENT_NAME] = mapOf("registrationName" to "onFrameChanged")
+//    export[TopPercentageEvent.EVENT_NAME] = mapOf("registrationName" to "onPercentageChanged")
+//    return export
+//  }
+override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
+  val map: MutableMap<String, Any> = HashMap()
+  map["onError"] = createBubblingEventConfig(
+    bubbledName = "onError",
+    capturedName = "onErrorCapture"
+  )
+  map["onFinished"] = createBubblingEventConfig(
+    bubbledName = "onFinished",
+    capturedName = "onFinishedCapture"
+  )
+  map["onLoaded"] = createBubblingEventConfig(
+    bubbledName = "onLoaded",
+    capturedName = "onLoadedCapture"
+  )
+  map["onFrameChanged"] = createBubblingEventConfig(
+    bubbledName = "onFrameChanged",
+    capturedName = "onFrameChangedCapture"
+  )
+  map["onPercentageChanged"] = createBubblingEventConfig(
+    bubbledName = "onPercentageChanged",
+    capturedName = "onPercentageChangedCapture"
+  )
+  return map;
+}
+  private fun createBubblingEventConfig(
+    bubbledName: String,
+    capturedName: String
+  ): Map<String, Any> {
+    return mapOf(
+      "phasedRegistrationNames" to mapOf(
+        "bubbled" to bubbledName,
+        "captured" to capturedName
+      )
+    )
+  }
+  override fun pauseAnimation(view: RNSvgaPlayer?) {
+    view?.pauseAnimation()
   }
 
-  override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
-    val export = super.getExportedCustomDirectEventTypeConstants()?.toMutableMap()
-      ?: mutableMapOf<String, Any>()
+  override fun stepToFrame(view: RNSvgaPlayer?, frame: Int, andPlay: Boolean) {
+    view?.stepToFrame(frame, andPlay);
+  }
 
-    export[TopErrorEvent.EVENT_NAME] = mapOf("registrationName" to "onError")
-    export[TopFinishedEvent.EVENT_NAME] = mapOf("registrationName" to "onFinished")
-    export[TopLoadedEvent.EVENT_NAME] = mapOf("registrationName" to "onLoaded")
+  override fun stepToPercentage(view: RNSvgaPlayer?, percentage: Int, andPlay: Boolean) {
+    view?.stepToFrame(percentage, andPlay);
+  }
 
-    return export
+  override fun startAnimationWithRange(
+    view: RNSvgaPlayer?,
+    location: Int,
+    length: Int,
+    reverse: Boolean
+  ) {
+    var  range = SVGARange(location, length)
+    view?.startAnimation(range,reverse)
   }
 }

package/android/src/main/java/com/svgaplayer/events/TopFrameEvent.kt

@@ -0,0 +1,19 @@
+package com.svgaplayer.events
+
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class TopFrameEvent(
+    surfaceId: Int,
+    viewTag: Int,
+    private val eventData: WritableMap
+) : Event<TopFrameEvent>(surfaceId, viewTag) {
+
+    companion object {
+        const val EVENT_NAME = "onFrameChanged"
+    }
+
+    override fun getEventName(): String = EVENT_NAME
+
+    override fun getEventData(): WritableMap? = eventData
+}

package/android/src/main/java/com/svgaplayer/events/TopPercentageEvent.kt

@@ -0,0 +1,19 @@
+package com.svgaplayer.events
+
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class TopPercentageEvent(
+    surfaceId: Int,
+    viewTag: Int,
+    private val eventData: WritableMap
+) : Event<TopPercentageEvent>(surfaceId, viewTag) {
+
+    companion object {
+        const val EVENT_NAME = "onPercentageChanged"
+    }
+
+    override fun getEventName(): String = EVENT_NAME
+
+    override fun getEventData(): WritableMap? = eventData
+}

package/ios/RCTSvgaPlayer.h

@@ -7,11 +7,7 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface RCTSvgaPlayer : RCTViewComponentView <SVGAPlayerDelegate>
-
-// Commands
-- (void)startAnimation;
-- (void)stopAnimation;
+@interface RCTSvgaPlayer : RCTViewComponentView 
 
 @end
 

package/ios/RCTSvgaPlayer.mm

@@ -1,5 +1,4 @@
 #import "RCTSvgaPlayer.h"
-
 #import <react/renderer/components/RNSvgaPlayerSpec/ComponentDescriptors.h>
 #import <react/renderer/components/RNSvgaPlayerSpec/EventEmitters.h>
 #import <react/renderer/components/RNSvgaPlayerSpec/Props.h>
@@ -16,6 +15,7 @@ using namespace facebook::react;
 
 @end
 
+
 @implementation RCTSvgaPlayer {
     SVGAPlayer * _svgaPlayer;
     NSString * _currentSource;
@@ -25,11 +25,20 @@ using namespace facebook::react;
     SVGAVideoEntity * _currentVideoItem;
 }
 
+// Event emitter convenience method
+- (const RNSvgaPlayerEventEmitter &)eventEmitter
+{
+  return static_cast<const RNSvgaPlayerEventEmitter &>(*_eventEmitter);
+}
+
 + (ComponentDescriptorProvider)componentDescriptorProvider
 {
     return concreteComponentDescriptorProvider<RNSvgaPlayerComponentDescriptor>();
 }
-
+Class<RCTComponentViewProtocol> RNSvgaPlayerCls(void)
+{
+  return RCTSvgaPlayer.class;
+}
 - (instancetype)initWithFrame:(CGRect)frame
 {
   if (self = [super initWithFrame:frame]) {
@@ -104,12 +113,6 @@ using namespace facebook::react;
 
     [super updateProps:props oldProps:oldProps];
 }
-
-Class<RCTComponentViewProtocol> SvgaPlayerViewCls(void)
-{
-    return RCTSvgaPlayer.class;
-}
-
 // 辅助方法：根据 align 属性设置 contentMode
 - (void)updateContentModeWithAlign:(RNSvgaPlayerAlign)align
 {
@@ -135,20 +138,30 @@ Class<RCTComponentViewProtocol> SvgaPlayerViewCls(void)
     [_svgaPlayer setVideoItem:nil];
     [_svgaPlayer clear];
     _currentVideoItem = nil;
-
-    if (_eventEmitter != nullptr) {
-        std::dynamic_pointer_cast<const facebook::react::RNSvgaPlayerEventEmitter>(_eventEmitter)
-            ->onError(facebook::react::RNSvgaPlayerEventEmitter::OnError{
-                .error = std::string([errorMessage UTF8String])
-            });
+    
+    if(_eventEmitter!= nullptr) {
+        RNSvgaPlayerEventEmitter::OnError result = RNSvgaPlayerEventEmitter::OnError{RNSvgaPlayerEventEmitter::OnError( [errorMessage UTF8String] )};
+        self.eventEmitter.onError(result);
     }
+
+//    if (_eventEmitter != nullptr) {
+//        std::dynamic_pointer_cast<const facebook::react::RNSvgaPlayerEventEmitter>(_eventEmitter)
+//            ->onError(facebook::react::RNSvgaPlayerEventEmitter::OnError{
+//                .error = std::string([errorMessage UTF8String])
+//            });
+//    }
 }
 
 - (void)sendLoadedEvent
 {
-    if (_eventEmitter != nullptr) {
-        std::dynamic_pointer_cast<const facebook::react::RNSvgaPlayerEventEmitter>(_eventEmitter)
-            ->onLoaded(facebook::react::RNSvgaPlayerEventEmitter::OnLoaded{});
+//    if (_eventEmitter != nullptr) {
+//        std::dynamic_pointer_cast<const facebook::react::RNSvgaPlayerEventEmitter>(_eventEmitter)
+//            ->onLoaded(facebook::react::RNSvgaPlayerEventEmitter::OnLoaded{});
+//
+//    }
+    if(_eventEmitter != nullptr) {
+        RNSvgaPlayerEventEmitter::OnLoaded result = RNSvgaPlayerEventEmitter::OnLoaded{RNSvgaPlayerEventEmitter::OnLoaded( {} )};
+        self.eventEmitter.onLoaded(result);
     }
 }
 
@@ -372,7 +385,34 @@ Class<RCTComponentViewProtocol> SvgaPlayerViewCls(void)
 {
     [_svgaPlayer stopAnimation];
 }
-
+- (void)pauseAnimation {
+   [_svgaPlayer pauseAnimation];
+ }
+-(void)stepToFrame:(NSInteger)frame andPlay:(BOOL)play {
+    if (frame < 0 || !_svgaPlayer || _svgaPlayer.delegate != self) {
+        return;
+    }
+    [_svgaPlayer stepToFrame:frame andPlay:play];
+}
+-(void)stepToPercentage:(NSInteger)percentage andPlay:(BOOL)play {
+    if (percentage < 0 || !_svgaPlayer || _svgaPlayer.delegate != self) {
+        return;
+    }
+    [_svgaPlayer stepToPercentage:percentage andPlay:play];
+}
+-(void)startAnimationWithRange:(NSInteger)location length:(NSInteger)length reverse:(BOOL)reverse{
+    if (!_svgaPlayer || _svgaPlayer.delegate != self) {
+            return;
+        }
+        
+        // 检查 location 和 length 的有效性
+        if (location < 0 || length <= 0) {
+            return;
+        }
+        // 设置动画范围
+        [_svgaPlayer startAnimationWithRange:NSMakeRange(location, length) reverse:reverse];
+}
+ 
 // 处理来自 JavaScript 的命令调用
 - (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
 {
@@ -380,7 +420,49 @@ Class<RCTComponentViewProtocol> SvgaPlayerViewCls(void)
         [self startAnimation];
     } else if ([commandName isEqualToString:@"stopAnimation"]) {
         [self stopAnimation];
+    }else if ([commandName isEqualToString:@"pauseAnimation"]) {
+        [self pauseAnimation];
+    }else if([commandName isEqualToString:@"stepToFrame"]){
+        [self stepToFrame:[args[0] integerValue] andPlay:[args[1] boolValue]];
+       
+    }else if([commandName isEqualToString:@"stepToPercentage"]){
+        [self stepToPercentage:[args[0] integerValue] andPlay:[args[1] boolValue]];
+        
+    }else if([commandName isEqualToString:@"startAnimationWithRange"]){
+        // 处理 startAnimationWithRange 命令
+       [self startAnimationWithRange:[args[0] integerValue]
+                                length:[args[1] integerValue]
+                                 reverse:[args[2] boolValue]];
     }
+        
+}
+-(void) svgaPlayerDidAnimatedToFrame:(NSInteger)frame{
+    if (!_svgaPlayer || _svgaPlayer.delegate != self) {
+        return;
+    }
+    if(_eventEmitter!= nullptr) {
+        
+        RNSvgaPlayerEventEmitter::OnFrameChanged result = RNSvgaPlayerEventEmitter::OnFrameChanged{RNSvgaPlayerEventEmitter::OnFrameChanged( frame )};
+        self.eventEmitter.onFrameChanged(result);
+    }
+//    std::dynamic_pointer_cast<const RNSvgaPlayerEventEmitter>(_eventEmitter)
+//    ->onFrameChanged(RNSvgaPlayerEventEmitter::OnFrameChanged{.value=(float)frame});
+        
+    
+}
+-(void) svgaPlayerDidAnimatedToPercentage:(CGFloat)percentage{
+    // 检查播放器是否还有效
+    if (!_svgaPlayer || _svgaPlayer.delegate != self) {
+        return;
+    }
+    if(_eventEmitter != nullptr) {
+        
+        RNSvgaPlayerEventEmitter::OnPercentageChanged result = RNSvgaPlayerEventEmitter::OnPercentageChanged{RNSvgaPlayerEventEmitter::OnPercentageChanged( percentage )};
+        self.eventEmitter.onPercentageChanged(result);
+    }
+    //直接事件
+//    std::dynamic_pointer_cast<const RNSvgaPlayerEventEmitter>(_eventEmitter)
+//    ->onFrameChanged(RNSvgaPlayerEventEmitter::OnFrameChanged{.value=(float)percentage});
 }
 
 // SVGAPlayerDelegate methods
@@ -390,16 +472,16 @@ Class<RCTComponentViewProtocol> SvgaPlayerViewCls(void)
     if (!_svgaPlayer || player != _svgaPlayer) {
         return;
     }
-
-    // 检查事件发送器是否还有效
-    if (_eventEmitter == nullptr) {
-        return;
+    if(_eventEmitter != nullptr) {
+        
+        // 检查事件发送器是否还有效
+        RNSvgaPlayerEventEmitter::OnFinished result = RNSvgaPlayerEventEmitter::OnFinished{RNSvgaPlayerEventEmitter::OnFinished( true )};
+        self.eventEmitter.onFinished(result);
     }
-
-    std::dynamic_pointer_cast<const facebook::react::RNSvgaPlayerEventEmitter>(_eventEmitter)
-        ->onFinished(facebook::react::RNSvgaPlayerEventEmitter::OnFinished{
-            .finished = true
-        });
+//    std::dynamic_pointer_cast<const facebook::react::RNSvgaPlayerEventEmitter>(_eventEmitter)
+//        ->onFinished(facebook::react::RNSvgaPlayerEventEmitter::OnFinished{
+//            .finished = true
+//        });
 }
 
 // React Native Fabric 生命周期方法
@@ -481,4 +563,8 @@ Class<RCTComponentViewProtocol> SvgaPlayerViewCls(void)
     _currentSource = nil;
 }
 
+
+
 @end
+
+

package/package.json

@@ -26,10 +26,10 @@
   "files": [
     "android",
     "ios",
-    "rn-newarch-svga-player.podspec",
+    "lib",
     "src",
     "SvgaPlayer.tsx",
-    "!node_modules/"
+    "rn-newarch-svga-player.podspec"
   ],
   "homepage": "https://github.com/yrjwcharm/rn-newarch-svga-player#readme",
   "keywords": [
@@ -53,5 +53,5 @@
   "scripts": {
     "codegen-lib": "react-native codegen-lib-harmony --no-safety-check --npm-package-name react-native-ohos-svgaplayer --cpp-output-path ../../harmony/svgaplayer/src/main/cpp/generated --ets-output-path ../../harmony/svgaplayer/src/main/ets/generated --turbo-modules-spec-paths ./src  --arkts-components-spec-paths ./src"
   },
-  "version": "1.1.4"
+  "version": "1.1.16"
 }

package/src/specs/SvgaPlayerNativeComponent.ts

@@ -1,35 +1,60 @@
-import type {HostComponent, ViewProps} from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 import type {
   BubblingEventHandler,
+  Double,
   Int32,
   WithDefault,
 } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
-interface NativeProps extends ViewProps {
-  source?: string;
+interface SvgaPlayerProps extends ViewProps {
+  source: string;
   autoPlay?: boolean;
   loops?: Int32;
   clearsAfterStop?: boolean;
   align?: WithDefault<'top' | 'bottom' | 'center', 'center'>;
-
   // 事件回调
-  onError?: BubblingEventHandler<{error: string}>;
-  onFinished?: BubblingEventHandler<{finished: boolean}>;
+  onError?: BubblingEventHandler<{ error: string }>;
+  onFinished?: BubblingEventHandler<{ finished: boolean }>;
   onLoaded?: BubblingEventHandler<{}>;
+  onFrameChanged?: BubblingEventHandler<{ value: Double }>;
+  onPercentageChanged?: BubblingEventHandler<{ value: Double }>;
 }
 
-export type ComponentType = HostComponent<NativeProps>;
+export type ComponentType = HostComponent<SvgaPlayerProps>;
 
 interface NativeCommands {
   startAnimation: (viewRef: React.ElementRef<ComponentType>) => void;
-  // pauseAnimation: (viewRef: React.ElementRef<ComponentType>) => void;
   stopAnimation: (viewRef: React.ElementRef<ComponentType>) => void;
+  pauseAnimation: (viewRef: React.ElementRef<ComponentType>) => void;
+  stepToFrame: (
+    viewRef: React.ElementRef<ComponentType>,
+    frame: Int32,
+    andPlay: boolean
+  ) => void;
+  stepToPercentage: (
+    viewRef: React.ElementRef<ComponentType>,
+    percentage: Int32,
+    andPlay: boolean
+  ) => void;
+  startAnimationWithRange: (
+    viewRef: React.ElementRef<ComponentType>,
+    location: Int32,
+    length: Int32,
+    reverse: boolean
+  ) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['startAnimation', 'stopAnimation'],
+  supportedCommands: [
+    'startAnimation',
+    'pauseAnimation',
+    'stopAnimation',
+    'stepToFrame',
+    'stepToPercentage',
+    'startAnimationWithRange',
+  ],
 });
 
-export default codegenNativeComponent<NativeProps>('RNSvgaPlayer');
+export default codegenNativeComponent<SvgaPlayerProps>('RNSvgaPlayer');

package/readme.md

@@ -1,184 +0,0 @@
-## **_这是一款使用 ReactNative 加载`Android/iOS` Svga 动画的播放器插件_** [三端 Svga 动画统一使用点击这里](https://github.com/yrjwcharm/react-native-ohos/tree/feature/rnoh/svgaplayer)
-
-> ### 版本：latest
-
-<p align="center">
-  <h1 align="center"> <code>rn-newarch-svga-player</code> </h1>
-</p>
-<p align="center">
-    <a href="https://github.com/wonday/react-native-pdf/blob/master/LICENSE">
-        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
-    </a>
-</p>
-
-> [!TIP] [Github 地址](https://github.com/yrjwcharm/rn-newarch-svga-player)
-
-## 安装与使用
-
-> [!TIP] 注意 ⚠️ 本库 android/ios 仅给予 Fabric 新架构支持，旧架构不在跟进，若需旧架构支持请移步<https://github.com/yrjwcharm/react-native-svga-player>
-
-**确保你的 Android/iOS 已经开启了新架构支持 <https://reactnative.cn/docs/0.72/the-new-architecture/use-app-template>**
-
-#### **npm**
-
-```bash
-npm install rn-newarch-svga-player
-```
-
-#### **yarn**
-
-```bash
-yarn add rn-newarch-svga-player
-```
-
-> 若想更改库的别名 react-native-svga-player 来导入。你则需要把 rn-newarch-svga-player 库修改下，重新 yarn 执行
-
-```diff
-+  "dependencies": {
-    "@react-native-oh/react-native-harmony": "0.72.48",
-    "patch-package": "^8.0.0",
-    "postinstall-postinstall": "^2.1.0",
-    "react": "18.2.0",
-    "react-native": "0.72.5",
--    "rn-newarch-svga-player":"^1.1.2"
-+   "react-native-svga-player":"npm:rn-newarch-svga-player@1.1.2"
-  },
-```
-android 需要
-
-```bash
-./gradlew generateCodegenArtifactsFromSchema
-```
-
-ios 需要
-
-```bash
- cd ios
- bundle install && bundle exec pod install
-```
-
-下面的代码展示了这个库的基本使用场景：
-
-```js
-import React, { useRef, useState } from "react";
-import {
-  Button,
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
-import { RNSvgaPlayer, SvgaPlayerRef } from "react-native-svga-player";
-const App = () => {
-  const svgaPlayerRef = useRef < SvgaPlayerRef > null;
-  //播放网络资源
-  const [source, setSource] = useState(
-    "https://raw.githubusercontent.com/yyued/SVGAPlayer-iOS/master/SVGAPlayer/Samples/Goddess.svga"
-  );
-  //播放本地资源
-  // const [source, setSource] = useState(
-  //   'homePage_studyPlanner_computer_welcome.svga',
-  // );
-  return (
-    <SafeAreaView style={styles.container}>
-      <StatusBar barStyle={"dark-content"} />
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <Text style={styles.welcome}>Svga</Text>
-        <RNSvgaPlayer
-          ref={svgaPlayerRef}
-          source={source}
-          autoPlay={true}
-          loops={1} // 循环次数，默认 0无限循环
-          clearsAfterStop={false} // 停止后清空画布，默认 true
-          style={styles.svgaStyle}
-          onFinished={() => {
-            console.log("播放完成");
-          }} // 播放完成回调
-          onLoaded={() => {
-            console.log("动画加载完成");
-          }}
-        />
-        <View style={styles.flexAround}>
-          <Button
-            title="开始动画"
-            onPress={() => {
-              svgaPlayerRef.current?.startAnimation();
-            }}
-          />
-          <Button
-            title="暂停动画"
-            onPress={() => {
-              // svgaPlayerRef.current?.pauseAnimation();
-            }}
-          />
-          <Button
-            title="停止动画"
-            onPress={() => {
-              svgaPlayerRef.current?.stopAnimation();
-            }}
-          />
-        </View>
-        <View style={[styles.flexAround, { marginTop: 20 }]}>
-          <Button
-            title="手动加载动画"
-            onPress={() => {
-              setSource(
-                "https://raw.githubusercontent.com/yyued/SVGAPlayer-iOS/master/SVGAPlayer/Samples/matteBitmap.svga"
-              );
-            }}
-          />
-          <Button
-            title="指定帧开始"
-            onPress={() => {
-              // svgaPlayerRef.current?.stepToFrame(20, true);
-            }}
-          />
-          <Button
-            title="指定百分比开始"
-            onPress={() => {
-              // svgaPlayerRef.current?.stepToPercentage(1, true);
-            }}
-          />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-};
-export default App;
-const styles = StyleSheet.create({
-  flexAround: { flexDirection: "row", justifyContent: "space-around" },
-  container: {
-    flex: 1,
-  },
-  svgaStyle: {
-    width: 150,
-    height: 150,
-    marginTop: 30,
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: "center",
-    margin: 10,
-    marginTop: 80,
-  },
-  instructions: {
-    textAlign: "center",
-    color: "#333333",
-    marginBottom: 5,
-  },
-});
-```
-
-#### 新架构[Android/iOS]demo 请参考 <https://github.com/yrjwcharm/react-native-ohos/tree/feature/newarch/svgaplayer>
-
-更多详情用法参考 [三端 Svga 动画统一使用点击这里](https://github.com/yrjwcharm/react-native-ohos/tree/feature/rnoh/svgaplayer)
-
-#### 开源不易，希望您可以动一动小手点点小 ⭐⭐
-
-#### 👴 希望大家如有好的需求踊跃提交,如有问题请提交 issue，空闲时间会扩充与修复优化
-
-## 开源协议
-
-本项目基于 [The MIT License (MIT)](https://github.com/yrjwcharm/react-native-ohos-svgaplayer/blob/master/LICENSE) ，请自由地享受和参与开源。