@tarojs/plugin-platform-harmony-ets 4.0.0-beta.21 → 4.0.0-beta.23

package/dist/apis/base/system.ts

@@ -75,7 +75,7 @@ export const getSystemInfoSync: typeof Taro.getSystemInfoSync = function () {
   res.notificationSoundAuthorized = false // 通知带有声音的开关（仅 iOS 有效）boolean
   res.phoneCalendarAuthorized = null // 使用日历的开关 boolean
   res.wifiEnabled = false // Wi-Fi 的系统开关 boolean
-  res.pixelRatio = display && (Math.round(display.xDPI / display.width * 100) / 100) // 设备像素比,number
+  res.pixelRatio = display && display.densityPixels // 设备像素比,number
   res.platform = 'harmony' // 客户端平台 string
   res.safeArea = safeArea // 在竖屏正方向下的安全区域 General.SafeAreaResult
   res.screenHeight = display?.height // 屏幕高度，单位px number

package/dist/apis/canvas/index.ts

@@ -1,12 +1,21 @@
+import { eventSource } from '@tarojs/runtime'
+
 import { temporarilyNotSupport } from '../utils'
 
+// @ts-ignore
+import type { TaroCanvasElement } from '@tarojs/runtime'
 // 画布
 
 /** 创建离屏 canvas 实例 */
 export const createOffscreenCanvas = /* @__PURE__ */ temporarilyNotSupport('createOffscreenCanvas')
 
 /** 创建 canvas 的绘图上下文 CanvasContext 对象 */
-export const createCanvasContext = /* @__PURE__ */ temporarilyNotSupport('createOffscreenCanvas')
+// export const createCanvasContext = /* @__PURE__ */ temporarilyNotSupport('createOffscreenCanvas')
+export const createCanvasContext = (canvasId: string) => {
+  const dom = eventSource.get(`canvasId-${canvasId}`)
+  // return dom as TaroCanvasElement
+  if (dom) return (dom as unknown as TaroCanvasElement).context
+}
 
 /** 把当前画布指定区域的内容导出生成指定大小的图片 */
 export const canvasToTempFilePath = /* @__PURE__ */ temporarilyNotSupport('createOffscreenCanvas')

package/dist/apis/index.ts

@@ -58,20 +58,30 @@ export function initPxTransform ({
 
 const display = _display.getDefaultDisplaySync()
 
+let displayWidth = display.width
+let ratioCache: number | false = false
 let designWidthFunc: (input: number) => number
+let designWidth = defaultDesignWidth
+let deviceRatio = defaultDesignRatio
 function getRatio (value: number) {
-  const config = (Current as any).taro?.config || {}
-  if (!isFunction(designWidthFunc)) {
-    designWidthFunc = isFunction(config.designWidth)
-      ? config.designWidth
-      : () => config.designWidth
-  }
-  const designWidth = designWidthFunc(value) || defaultDesignWidth
-  const deviceRatio = config.deviceRatio || defaultDesignRatio
-  if (!(designWidth in deviceRatio)) {
-    throw new Error(`deviceRatio 配置中不存在 ${designWidth} 的设置！`)
+  // Note: 提前调用 display 可能无法获取正确值
+  if (ratioCache === false || displayWidth !== display.width) {
+    const config = (Current as any).taro?.config || {}
+    if (!isFunction(designWidthFunc)) {
+      designWidthFunc = isFunction(config.designWidth)
+        ? config.designWidth
+        : () => config.designWidth
+      designWidth = designWidthFunc(value) || defaultDesignWidth
+      deviceRatio = config.deviceRatio || defaultDesignRatio
+      if (!(designWidth in deviceRatio)) {
+        throw new Error(`deviceRatio 配置中不存在 ${designWidth} 的设置！`)
+      }
+    }
+    displayWidth = display.width
+    ratioCache = Math.min(display.width, display.height) / designWidth / deviceRatio[designWidth]
   }
-  return Math.min(display.width, display.height) / designWidth / deviceRatio[designWidth]
+
+  return ratioCache
 }
 
 // Note: 设置为 style 单位时会自动完成设计稿转换，设计开发者调用 API 时也许抹平差异，例如 pageScrollTo[option.offsetTop]
@@ -79,6 +89,9 @@ export function pxTransformHelper (size: number, unit?: string, isNumber = false
   const config = (Current as any).taro?.config || {}
   const targetUnit = unit || config.targetUnit || defaultTargetUnit
 
+  if (targetUnit === 'PX') {
+    return px2vp(size * display.scaledDensity) + 'vp'
+  }
   const ratio = getRatio(size)
   let val = size * ratio
 

package/dist/apis/ui/animation/animation.ts

@@ -1,4 +1,5 @@
 import matrix4 from '@ohos.matrix4'
+import { isUndefined } from '@tarojs/shared'
 
 import { temporarilyNotSupport } from '../../utils'
 
@@ -110,7 +111,7 @@ export class Animation implements Taro.Animation {
   }
 
   scale (sx: number, sy?: number | undefined): Taro.Animation {
-    this.rule.scale = { x: sx, y: sy }
+    this.rule.scale = { x: sx, y: isUndefined(sy) ? sx : sy }
     return this
   }
 

package/dist/apis/wxml/IntersectionObserver.ts

@@ -45,7 +45,7 @@ export class IntersectionObserver implements Taro.IntersectionObserver {
 
   public observe (targetSelector: string, callback: Taro.IntersectionObserver.ObserveCallback): void {
     if (!this._component) return
-    
+
     const { observeAll, thresholds } = this._options
     const node = findChildNodeWithDFS(this._component, targetSelector, observeAll)
     this._observerNodes = node
@@ -68,6 +68,10 @@ export class IntersectionObserver implements Taro.IntersectionObserver {
           callback(this.handleResult(isVisible, currentRatio))
         })
       }
+    } else {
+      callback({
+        errMsg: 'IntersectionObserver.observe:fail cannot find the node for selector.'
+      })
     }
   }
 

package/dist/components-harmony-ets/button.ets

@@ -98,6 +98,13 @@ export default struct TaroButton {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroButtonElement) => void = this.customBuilder
   @ObjectLink node: TaroButtonElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
@@ -112,7 +119,7 @@ export default struct TaroButton {
         }
       }
       .themeStyles(getThemeAttributes(this.node))
-      .attributeModifier(commonStyleModify.setNode(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .constraintSize({
         minWidth: this.node.hmStyle?.minWidth || getButtonMinWidth(this.node),
         minHeight: this.node.hmStyle?.minHeight || getButtonMinHeight(this.node),

package/dist/components-harmony-ets/canvas.ets

@@ -0,0 +1,51 @@
+import type { TaroAny, TaroCanvasElement } from '@tarojs/runtime'
+import { cancelAnimationFrame, requestAnimationFrame } from '@tarojs/runtime'
+import commonStyleModify from './style'
+
+@Component
+export default struct TaroCanvas {
+  @ObjectLink node: TaroCanvasElement
+  rafId: number = 0
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  aboutToDisappear() {
+    if(this.rafId) {
+      cancelAnimationFrame(this.rafId)
+    }
+  }
+
+  build() {
+    Canvas(this.node._context)
+      .attributeModifier(commonStyleModify.setNode(this.node as TaroAny, {
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#ffff00'
+      }).setAnimationStyle(this.overwriteStyle))
+      .onReady(() => {
+        const context = this.node._context
+
+        const draw = () => {
+          if (this.node._drawList.length) {
+            while (this.node._drawList.length) {
+              const item = this.node._drawList.shift()
+              if (item) {
+                if (typeof context[item.key] === 'function') {
+                  context[item.key](...[].concat(item.value))
+                } else {
+                  context[item.key] = item.value
+                }
+              }
+            }
+          }
+          this.rafId = requestAnimationFrame(draw)
+        }
+        draw()
+      })
+  }
+}

package/dist/components-harmony-ets/checkbox.ets

@@ -38,10 +38,12 @@ export struct TaroCheckbox {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroCheckboxElement) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
       this.node._isInit = true
+      this.node._instance = this
       this.node._reset = this.node.checked || false
     }
   }
@@ -51,7 +53,7 @@ export struct TaroCheckbox {
       Stack() {
         Row() {
           Checkbox(getOptions(this.node))
-            .attributeModifier(commonStyleModify.setNode(this.node))
+            .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
             .checkboxAttr(getAttributes(this.node))
             .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
             .select(this.node.checked)
@@ -99,6 +101,7 @@ export struct TaroCheckboxGroup {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroCheckboxGroupElement) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxGroupElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
@@ -106,6 +109,7 @@ export struct TaroCheckboxGroup {
 
   aboutToAppear () {
     if (this.node) {
+      this.node._instance = this
       // 阻止事件冒泡传递上去
       this.node.addEventListener('change', (e: TaroEvent<ChangeEventDetail>) => {
         e.stopPropagation()
@@ -129,7 +133,7 @@ export struct TaroCheckboxGroup {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .defaultEvent()
         .visibleChangeEvent()
         .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
@@ -138,7 +142,7 @@ export struct TaroCheckboxGroup {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .defaultEvent()
         .visibleChangeEvent()
         .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)

package/dist/components-harmony-ets/form.ets

@@ -13,13 +13,21 @@ export default struct TaroForm {
   @BuilderParam createLazyChildren: (node: TaroFormElement) => void = this.customBuilder
   @ObjectLink node: TaroFormElement
 
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
       if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
         .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
         .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
@@ -32,7 +40,7 @@ export default struct TaroForm {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
         .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
         .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {

package/dist/components-harmony-ets/icon.ets

@@ -53,6 +53,13 @@ export default struct TaroIcon {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroIconElement) => void = this.customBuilder
   @ObjectLink node: TaroIconElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
@@ -62,7 +69,7 @@ export default struct TaroIcon {
         .attributeModifier(commonStyleModify.setNode(this.node, {
           width: convertNumber2PX(23),
           height: convertNumber2PX(23)
-        }))
+        }).setAnimationStyle(this.overwriteStyle))
         .size({
           width: convertNumber2VP(Number(this.node._attrs.size) || 23),
           height: convertNumber2VP(Number(this.node._attrs.size) || 23),

package/dist/components-harmony-ets/image.ets

@@ -21,6 +21,13 @@ export default struct TaroImage {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroImageElement) => void = this.customBuilder
   @ObjectLink node: TaroImageElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
@@ -30,7 +37,7 @@ export default struct TaroImage {
           this.node._nodeInfo.areaInfo = res[1]
         }))
         .objectFit(getImageMode(this.node.getAttribute('mode')))
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onComplete(e => eventHandler(e, 'complete', this.node))
         .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
     }

package/dist/components-harmony-ets/index.ets

@@ -0,0 +1,53 @@
+import TaroImage from './image'
+import TaroText from './text'
+import TaroView from './view'
+import TaroIcon from './icon'
+import TaroForm from './form'
+import TaroLabel from './label'
+import TaroInput from './input'
+import TaroVideo from './video'
+import TaroCanvas from './canvas'
+import TaroButton from './button'
+import TaroPicker from './picker'
+import TaroSlider from './slider'
+import TaroSwitch from './switch'
+import TaroSwiper from './swiper'
+import TaroWebView from './webView'
+import TaroTextArea from './textArea'
+import TaroRichText from './richText'
+import TaroProgress from './progress'
+import TaroInnerHtml from './innerHtml'
+import TaroScrollView from './scrollView'
+import TaroMovableArea from './movableArea'
+import TaroMovableView from './movableView'
+import { TaroRadio, TaroRadioGroup } from './radio'
+import { TaroCheckboxGroup, TaroCheckbox } from './checkbox'
+
+export {
+  TaroImage,
+  TaroCanvas,
+  TaroText,
+  TaroView,
+  TaroIcon,
+  TaroForm,
+  TaroLabel,
+  TaroInput,
+  TaroVideo,
+  TaroButton,
+  TaroPicker,
+  TaroSlider,
+  TaroSwitch,
+  TaroSwiper,
+  TaroWebView,
+  TaroTextArea,
+  TaroRichText,
+  TaroProgress,
+  TaroInnerHtml,
+  TaroScrollView,
+  TaroMovableArea,
+  TaroMovableView,
+  TaroRadio,
+  TaroRadioGroup,
+  TaroCheckboxGroup,
+  TaroCheckbox
+}

package/dist/components-harmony-ets/input.ets

@@ -51,6 +51,7 @@ export default struct TaroInput {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroInputElement) => void = this.customBuilder
   @ObjectLink node: TaroInputElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node) {
@@ -72,7 +73,7 @@ export default struct TaroInput {
       .maxLength(Number(this.node._attrs?.maxlength) || null)
       .placeholderColor(getPlaceholderColor(this.node))
       .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
-      .attributeModifier(commonStyleModify.setNode(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .styles(this.node?.hmStyle)
       .attrs(getAttributes(this.node))
       .onChange((value: string) => {

package/dist/components-harmony-ets/label.ets

@@ -39,6 +39,13 @@ export default struct TaroLabel {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node:TaroLabelElement) => void = this.customBuilder
   @ObjectLink node:TaroLabelElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
@@ -46,7 +53,7 @@ export default struct TaroLabel {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick((e: ClickEvent) => {
           const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
           const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
@@ -65,7 +72,7 @@ export default struct TaroLabel {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick((e: ClickEvent) => {
           const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
           const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''

package/dist/components-harmony-ets/movableArea.ets

@@ -1,4 +1,4 @@
-import type { TaroMovableAreaElement, TaroMovableViewElement} from '@tarojs/runtime'
+import type { TaroAny, TaroMovableAreaElement, TaroMovableViewElement } from '@tarojs/runtime'
 import { rowModify, columnModify } from './style'
 
 import { FlexManager } from './utils/flexManager'
@@ -8,6 +8,13 @@ export default struct TaroMovableArea {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroMovableAreaElement) => void = this.customBuilder
   @ObjectLink node: TaroMovableAreaElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node && this.node.hmStyle?.display !== 'none') {
@@ -15,7 +22,7 @@ export default struct TaroMovableArea {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(rowModify.setNode(this.node))
+        .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
         .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .clip(true)
@@ -51,7 +58,7 @@ export default struct TaroMovableArea {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(columnModify.setNode(this.node))
+        .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
         .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .clip(true)

package/dist/components-harmony-ets/movableView.ets

@@ -1,4 +1,4 @@
-import type { TaroMovableViewElement } from '@tarojs/runtime'
+import type { TaroAny, TaroMovableViewElement } from '@tarojs/runtime'
 
 import { rowModify, columnModify } from './style'
 
@@ -9,6 +9,13 @@ export default struct TaroMovableView {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroMovableViewElement) => void = this.customBuilder
   @ObjectLink node: TaroMovableViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node && this.node.hmStyle?.display !== 'none') {
@@ -18,14 +25,14 @@ export default struct TaroMovableView {
           Row() {
             this.createLazyChildren(this.node)
           }
-          .attributeModifier(rowModify.setNode(this.node))
+          .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
           .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         } else {
           Column() {
             this.createLazyChildren(this.node)
           }
-          .attributeModifier(columnModify.setNode(this.node))
+          .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
           .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         }

package/dist/components-harmony-ets/picker.ets

@@ -7,7 +7,7 @@ import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroEvent } from '@tarojs/runtime'
 
-import { PickerDateProps, PickerMultiSelectorProps, PickerSelectorProps, PickerTimeProps } from './types'
+import { PickerDateProps, PickerMultiSelectorProps, PickerSelectorProps, PickerTimeProps } from '@tarojs/components/types'
 
 interface TimeRange {
   startHH: number

package/dist/components-harmony-ets/progress.ets

@@ -12,6 +12,13 @@ export default struct TaroProgress {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroProgressElement) => void = this.customBuilder
   @ObjectLink node: TaroProgressElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node && this.node.hmStyle?.display !== 'none') {
@@ -20,7 +27,7 @@ export default struct TaroProgress {
           value: parseFloat(this.node.getAttribute('percent')),
           type: ProgressType.Linear
         })
-          .attributeModifier(commonStyleModify.setNode(this.node))
+          .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .color(this.node.getAttribute('activeColor') ?? PROGRESS_ACTIVECOLOR)
           .backgroundColor(this.node.getAttribute('backgroundColor') ?? PROGRESS_BACKGROUNDCOLOR)
           .style({

package/dist/components-harmony-ets/radio.ets

@@ -37,10 +37,12 @@ export struct TaroRadio {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroRadioElement) => void = this.customBuilder
   @ObjectLink node: TaroRadioElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
       this.node._isInit = true
+      this.node._instance = this
       this.node._reset = this.node.checked || false
     }
   }
@@ -54,7 +56,7 @@ export struct TaroRadio {
             value: this.node.value || '',
           })
             .checked(this.node.checked)
-            .attributeModifier(commonStyleModify.setNode(this.node))
+            .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
             .radioAttr(getAttributes(this.node))
             .onChange((value: boolean) => {
               if (this.node) {
@@ -99,6 +101,7 @@ export struct TaroRadioGroup {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroRadioGroupElement) => void = this.customBuilder
   @ObjectLink node: TaroRadioGroupElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
@@ -106,6 +109,7 @@ export struct TaroRadioGroup {
 
   aboutToAppear () {
     if (this.node) {
+      this.node._instance = this
       const childList = this.node.getElementsByTagName<TaroRadioElement>('RADIO')
       childList.forEach(element => {
         element.group = this.node?._attrs.name || this.node?._nid
@@ -131,7 +135,7 @@ export struct TaroRadioGroup {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .defaultEvent()
         .visibleChangeEvent()
         .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
@@ -140,7 +144,7 @@ export struct TaroRadioGroup {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .defaultEvent()
         .visibleChangeEvent()
         .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)

package/dist/components-harmony-ets/scrollView.ets

@@ -62,6 +62,13 @@ export default struct TaroScrollView {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroScrollViewElement) => void = this.customBuilder
   @ObjectLink node: TaroScrollViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build () {
     if (this.node.hmStyle?.display !== 'none') {
@@ -74,7 +81,7 @@ export default struct TaroScrollView {
               this.createLazyChildren(this.node)
             }
           }
-          .attributeModifier(rowModify.setNode(this.node))
+          .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .width(null)
           .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
             this.node._nodeInfo._scroll = areaResult
@@ -90,7 +97,7 @@ export default struct TaroScrollView {
               this.createLazyChildren(this.node)
             }
           }
-          .attributeModifier(columnModify.setNode(this.node))
+          .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .height(null)
           .alignItems(HorizontalAlign.Start)
           .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {

package/dist/components-harmony-ets/slider.ets

@@ -42,6 +42,7 @@ export default struct TaroSlider {
   @ObjectLink node: TaroSliderElement
 
   @State value: number = 0
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node) {
@@ -64,7 +65,7 @@ export default struct TaroSlider {
       style: SliderStyle.OutSet,
       direction: Axis.Horizontal
     })
-      .attributeModifier(commonStyleModify.setNode(node))
+      .attributeModifier(commonStyleModify.setNode(node).setAnimationStyle(this.overwriteStyle))
       .attrs(getAttributes(node))
       .width(!!node._attrs.showValue ? '90%' : '100%')
       .themeStyles(!!node._attrs.disabled)