@mpxjs/webpack-plugin 2.10.17 → 2.10.18

package/lib/runtime/components/react/animationHooks/useTransitionHooks.ts

@@ -0,0 +1,301 @@
+import { hasOwn, dash2hump, error, warn } from '@mpxjs/utils'
+import { useMemo, useRef, useEffect } from 'react'
+import {
+  Easing,
+  makeMutable,
+  runOnJS,
+  useSharedValue,
+  useAnimatedStyle,
+  cancelAnimation
+} from 'react-native-reanimated'
+import {
+  easingKey,
+  transitionSupportedProperty,
+  transformInitial,
+  cubicBezierExp,
+  secondRegExp,
+  percentExp,
+  getTransformObj,
+  getUnit,
+  getInitialVal,
+  getAnimation,
+  isTransform
+} from './utils'
+import { parseValues, useRunOnJSCallback } from '../utils'
+import type { SharedValue, AnimatableValue, EasingFunction } from 'react-native-reanimated'
+import type { TransformsStyle } from 'react-native'
+import type { ExtendedViewStyle } from '../types/common'
+import type { AnimationHooksPropsType, TransitionMap, TimingFunction } from './utils'
+
+type AnimationDataType = {
+  property?: string
+  duration?: number
+  delay?: number
+  easing: EasingFunction
+}
+const propName = {
+  transition: '',
+  transitionDuration: 'duration',
+  transitionProperty: 'property',
+  transitionTimingFunction: 'easing',
+  transitionDelay: 'delay'
+}
+const behaviorExp = /^(allow-discrete|normal)$/
+const defaultValueExp = /^(inherit|initial|revert|revert-layer|unset)$/
+const timingFunctionExp = /^(step-start|step-end|steps)/
+// cubic-bezier 参数解析
+function getBezierParams (str: string) {
+  // ease 0.25, 0.1, 0.25, 1.0
+  return str.match(cubicBezierExp)?.[1]?.split(',').map(item => +item)
+}
+// 解析 transition-prop
+function parseTransitionSingleProp (vals: string[], property: string) {
+  let setDuration = false
+  property = propName[property as keyof typeof propName]
+  return vals.map(val => {
+    // transition-property all
+    if (val === 'all') {
+      error('[Mpx runtime error]: the value of transition-property is not supported \'all\'')
+      return undefined
+    }
+    // behavior
+    if (behaviorExp.test(val)) {
+      error('[Mpx runtime error]: transition-behavior is not supported')
+      return undefined
+    }
+    // global values
+    if (defaultValueExp.test(val)) {
+      error('[Mpx runtime error]: global values is not supported')
+      return undefined
+    }
+    if (timingFunctionExp.test(val)) {
+      error('[Mpx runtime error]: the timingFunction in step-start,step-end,steps() is not supported')
+      return undefined
+    }
+    // timingFunction
+    if (Object.keys(easingKey).includes(val) || cubicBezierExp.test(val)) {
+      const bezierParams = getBezierParams(val)
+      return {
+        easing: bezierParams?.length ? Easing.bezier(bezierParams[0], bezierParams[1], bezierParams[2], bezierParams[3]) : easingKey[val as TimingFunction] || Easing.inOut(Easing.ease)
+      }
+    }
+    // duration & delay
+    if (secondRegExp.test(val)) {
+      const newProperty = property || (!setDuration ? 'duration' : 'delay')
+      setDuration = true
+      // console.log('parseTransitionSingleProp val=', val, property, setDuration)
+      return {
+        [newProperty]: getUnit(val)
+      }
+    }
+    // property
+    return {
+      property: dash2hump(val)
+    }
+  }).filter(item => item !== undefined)
+}
+// transition 解析
+function parseTransitionStyle (originalStyle: ExtendedViewStyle) {
+  let transitionData: AnimationDataType[] = []
+  Object.entries(originalStyle).filter(arr => arr[0].includes('transition')).forEach(([prop, value]) => {
+    if (prop === 'transition') {
+      const vals = parseValues(value, ',').map(item => {
+        return parseTransitionSingleProp(parseValues(item), prop).reduce((map, subItem) => {
+          return Object.assign(map, subItem)
+        }, {} as AnimationDataType)
+      })
+      // console.log(`parseTransitionStyle ${prop}=${value}  formatVal=`, vals)
+      if (transitionData.length) {
+        transitionData = (vals.length > transitionData.length ? vals : transitionData).map((transitionItem, i) => {
+          const valItem = vals[i] || {}
+          const current = transitionData[i] || {}
+          // console.log('parseTransitionStyle current=', current)
+          // console.log('parseTransitionStyle valItem=', valItem)
+          // console.log('parseTransitionStyle mergeObj=', Object.assign({}, current, valItem))
+          return Object.assign({}, current, valItem)
+        })
+        // console.log(`parseTransitionStyle ${prop}=${value}, transitionData=`, transitionData)
+      } else {
+        transitionData = vals
+      }
+    } else {
+      const vals = parseTransitionSingleProp(parseValues(value, ','), prop)
+      // console.log(`parseTransitionStyle ${prop}=${value}  formatVal=`, vals)
+      // formatVal [{"property": "transform"}, {"property": "marginLeft"}]
+      if (transitionData.length) {
+        transitionData = (vals.length > transitionData.length ? vals : transitionData).map((transitionItem, i) => {
+          const valItem = vals[i] || vals[vals.length - 1]
+          const current = transitionData[i] || transitionData[transitionData.length - 1]
+          // console.log('parseTransitionStyle current=', current)
+          // console.log('parseTransitionStyle valItem=', valItem)
+          // console.log('parseTransitionStyle mergeObj=', Object.assign({}, current, valItem))
+          return Object.assign({}, current, valItem)
+        })
+        // console.log(`parseTransitionStyle ${prop}=${value}, transitionData=`, transitionData)
+      } else {
+        transitionData = vals as AnimationDataType[]
+      }
+      // transitionData.push(...vals)
+    }
+  })
+  // console.log(`parseTransitionStyle transitionData=`, transitionData)
+  // 从style 中解析的动画数据，结构如下：
+  // transitionMap= {"marginLeft": {"delay": 0, "duration": 3000, "easing": []}, "transform": {"delay": 0, "duration": 3000, "easing": []}}
+  const transitionMap = transitionData.reduce((acc, cur) => {
+    // hasOwn(transitionSupportedProperty, dash2hump(val)) || val === Transform
+    const { property = '', duration = 0, delay = 0, easing = Easing.inOut(Easing.ease) } = cur
+    if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration > 0) {
+      acc[property] = {
+        duration,
+        delay,
+        easing
+      }
+    }
+    return acc
+  }, {} as TransitionMap)
+  // console.log(`parseTransitionStyle transitionMap=`, transitionMap)
+  return transitionMap
+}
+
+export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType) {
+  // console.log(`useTransitionHooks, props=`, props)
+  const { style: originalStyle = {}, transitionend } = props
+  // style变更标识(首次render不执行)，初始值为0，首次渲染后为1
+  const animationDeps = useRef(0)
+  // 记录上次style map
+  // const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
+  // ** 从 style 中获取动画数据
+  const transitionMap = useMemo(() => {
+    return parseTransitionStyle(originalStyle)
+  }, [])
+  // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
+  const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
+    // 记录需要执行动画的 propName
+    const animatedKeys = [] as string[]
+    // 有动画样式的 style key(useAnimatedStyle使用)
+    const animatedStyleKeys = [] as (string|string[])[]
+    const transforms = [] as string[]
+    const shareValMap = Object.keys(transitionMap).reduce((valMap, property) => {
+      // const { property } = transition || {}
+      if (property === 'transform') {
+        Object.keys(originalStyle.transform ? getTransformObj(originalStyle.transform!) : transformInitial).forEach((key) => {
+          const defaultVal = getInitialVal(originalStyle, key)
+          // console.log(`shareValMap property=${key} defaultVal=${defaultVal}`)
+          valMap[key] = makeMutable(defaultVal)
+          animatedKeys.push(key)
+          transforms.push(key)
+        })
+      } else if (hasOwn(transitionSupportedProperty, property)) {
+        const defaultVal = getInitialVal(originalStyle, property)
+        // console.log(`shareValMap property=${property} defaultVal=${defaultVal}`)
+        valMap[property] = makeMutable(defaultVal)
+        animatedKeys.push(property)
+        animatedStyleKeys.push(property)
+      }
+      // console.log('shareValMap = ', valMap)
+      return valMap
+    }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
+    if (transforms.length) animatedStyleKeys.push(transforms)
+    return {
+      shareValMap,
+      animatedKeys,
+      animatedStyleKeys
+    }
+  }, [])
+  const runOnJSCallbackRef = useRef({})
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+  // 根据 animation action 创建&驱动动画
+  function createAnimation () {
+    let transformTransitionendDone = false
+    animatedKeys.forEach(key => {
+      // console.log(`createAnimation key=${key} originalStyle=`, originalStyle)
+      const isTransformKey = isTransform(key)
+      let ruleV = originalStyle[key]
+      if (isTransformKey) {
+        const transform = getTransformObj(originalStyle.transform!)
+        ruleV = transform[key]
+      }
+      let toVal = ruleV !== undefined
+        ? ruleV
+        : transitionSupportedProperty[key]
+      const shareVal = shareValMap[key].value
+      if (percentExp.test(`${toVal}`) && !percentExp.test(shareVal as string) && !isNaN(+shareVal)) {
+        // 获取到的toVal为百分比格式化shareValMap为百分比
+        shareValMap[key].value = `${shareVal as number * 100}%`
+      } else if (percentExp.test(shareVal as string) && !percentExp.test(toVal as string) && !isNaN(+toVal)) {
+        // 初始值为百分比则格式化toVal为百分比
+        toVal = `${toVal * 100}%`
+      } else if (typeof toVal !== typeof shareVal) {
+        // 动画起始值和终态值类型不一致报错提示一下
+        warn(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
+      }
+      if ((toVal === 'auto' && !isNaN(+shareVal)) || (shareVal === 'auto' && !isNaN(+toVal))) {
+        // 有 auto 直接赋值不做动画
+        shareValMap[key].value = toVal
+      } else {
+        // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
+        const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key]
+        // console.log('animationOptions=', { delay, duration, easing })
+        let callback
+        if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
+          runOnJSCallbackRef.current = {
+            animationCallback: (duration: number, finished: boolean, current?: AnimatableValue) => {
+              transitionend(finished, current, duration)
+            }
+          }
+          callback = (finished?: boolean, current?: AnimatableValue) => {
+            'worklet'
+            // 动画结束后设置下一次transformOrigin
+            if (finished) {
+              runOnJS(runOnJSCallback)('animationCallback', duration, finished, current)
+            }
+          }
+        }
+        const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, callback)
+        // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
+        if (isTransformKey) {
+          transformTransitionendDone = true
+        }
+        shareValMap[key].value = animation
+      }
+      // console.log(`useTransitionHooks, ${key}=`, animation)
+    })
+  }
+  // ** style 更新
+  useEffect(() => {
+    // console.log('useEffect originalStyle animationDeps=', animationDeps.current, originalStyle)
+    // 首次不执行
+    if (!animationDeps.current) {
+      animationDeps.current = 1
+      return
+    }
+    createAnimation()
+  }, [originalStyle])
+  // ** 清空动画
+  useEffect(() => {
+    return () => {
+      Object.values(shareValMap).forEach((value) => {
+        cancelAnimation(value)
+      })
+    }
+  }, [])
+  // ** 生成动画样式
+  return useAnimatedStyle(() => {
+    // console.info(`useAnimatedStyle styles=`, originalStyle)
+    return animatedStyleKeys.reduce((styles, key) => {
+      if (Array.isArray(key)) {
+        const transformStyle = getTransformObj(originalStyle.transform || [])
+        key.forEach((transformKey) => {
+          transformStyle[transformKey] = shareValMap[transformKey].value
+        })
+        styles.transform = Object.entries(transformStyle).map(([key, value]) => {
+          return { [key]: value }
+        }) as Extract<'transform', TransformsStyle>
+      } else {
+        styles[key] = shareValMap[key].value
+      }
+      // console.log('animationStyle', styles)
+      return styles
+    }, {} as ExtendedViewStyle)
+  })
+}

package/lib/runtime/components/react/animationHooks/utils.ts

@@ -0,0 +1,197 @@
+import {
+  Easing,
+  withTiming,
+  withDelay
+} from 'react-native-reanimated'
+import type { AnimatableValue, WithTimingConfig, AnimationCallback, EasingFunction } from 'react-native-reanimated'
+import { hasOwn } from '@mpxjs/utils'
+import type { ExtendedViewStyle } from '../types/common'
+import type { _ViewProps } from '../mpx-view'
+
+export type TimingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-in-out'| 'ease-out'
+
+export type AnimatedOption = {
+  duration: number
+  delay?: number
+  useNativeDriver?: boolean
+  timingFunction?: TimingFunction
+  transformOrigin?: string
+}
+export type ExtendWithTimingConfig = WithTimingConfig & {
+  delay?: number
+}
+export type AnimationStepItem = {
+  animatedOption: AnimatedOption
+  rules: Map<string, number | string>
+  transform: Map<string, number>
+}
+export type AnimationProp = {
+  id: number,
+  actions: AnimationStepItem[]
+}
+
+export type CustomAnimationCallback = (finished?: boolean, current?: AnimatableValue, duration?: number) => void
+
+export type TransitionMap = {
+  [propName: string]: {
+    duration: number
+    delay?: number
+    easing: EasingFunction
+  }
+}
+
+export type InterpolateOutput = {
+  [propName: string]: string[]
+}
+
+export type AnimationHooksPropsType = _ViewProps & { transitionend?: CustomAnimationCallback }
+
+// ms s 单位匹配
+export const secondRegExp = /^\s*(\d*(?:\.\d+)?)(s|ms)?\s*$/
+export const cubicBezierExp = /cubic-bezier\(["']?(.*?)["']?\)/
+export const percentExp = /^((-?(\d+(\.\d+)?|\.\d+))%)$/
+// export const PropNameColorExp = /^c|Color$/
+// export const NumberExp = /^((opacity|flex-grow|flex-shrink|gap|left|right|top|bottom)|(.+-(width|height|left|right|top|bottom|radius|spacing|size|gap|index|offset|opacity)))$/
+// export const ColorExp = /^(color|(.+Color))$/
+// transform
+// export const transform = 'transform'
+// export const transformOrigin = 'transformOrigin'
+// export const transition = 'transition'
+
+// 微信 timingFunction 和 RN Easing 对应关系
+export const easingKey = {
+  linear: Easing.linear,
+  ease: Easing.inOut(Easing.ease),
+  'ease-in': Easing.in(Easing.poly(3)),
+  'ease-in-out': Easing.inOut(Easing.poly(3)),
+  'ease-out': Easing.out(Easing.poly(3))
+  // 'step-start': '',
+  // 'step-end': ''
+}
+export const transformInitial: ExtendedViewStyle = {
+  // matrix: 0,
+  // matrix3d: 0,
+  // rotate: '0deg',
+  rotateX: '0deg',
+  rotateY: '0deg',
+  rotateZ: '0deg',
+  // rotate3d:[0,0,0]
+  // scale: 1,
+  // scale3d: [1, 1, 1],
+  scaleX: 1,
+  scaleY: 1,
+  // scaleZ: 1,
+  // skew: 0,
+  skewX: '0deg',
+  skewY: '0deg',
+  // translate: 0,
+  // translate3d: 0,
+  translateX: 0,
+  translateY: 0
+  // translateZ: 0,
+}
+// animation api 动画默认初始值
+export const animationAPIInitialValue: ExtendedViewStyle = Object.assign({
+  opacity: 1,
+  backgroundColor: 'transparent',
+  // fixme 未设置 height 初始值定义了 transition-property height 时把动画高度值把原由子元素撑开的高度给覆盖的问题
+  width: 'auto',
+  height: 'auto',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  transformOrigin: ['50%', '50%', 0]
+}, transformInitial)
+// transition property
+export const transitionSupportedProperty = Object.assign({
+  color: 'transparent',
+  borderColor: 'transparent',
+  borderBottomColor: 'transparent',
+  borderLeftColor: 'transparent',
+  borderRightColor: 'transparent',
+  borderTopColor: 'transparent',
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  borderRadius: 0,
+  borderBottomWidth: 0,
+  borderLeftWidth: 0,
+  borderRightWidth: 0,
+  borderTopWidth: 0,
+  borderWidth: 0,
+  margin: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+  marginTop: 0,
+  marginHorizontal: 0,
+  marginVertical: 0,
+  maxHeight: 0,
+  maxWidth: 0,
+  minHeight: 0,
+  minWidth: 0,
+  padding: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
+  fontSize: 0, // Todo
+  letterSpacing: 0 // Todo
+}, animationAPIInitialValue)
+
+// export type PropertyType = keyof transitionSupportedProperty
+// transform
+export const isTransform = (key: string) => hasOwn(transformInitial, key)
+// transform 数组转对象
+export function getTransformObj (transforms: { [propName: string]: string | number }[]) {
+  'worklet'
+  return (transforms || []).reduce((transformObj, item) => {
+    return Object.assign(transformObj, item)
+  }, {} as { [propName: string]: string | number })
+}
+// 获取样式初始值（prop style or 默认值）
+export function getInitialVal (style: ExtendedViewStyle, key: string) {
+  if (isTransform(key) && Array.isArray(style.transform)) {
+    let initialVal = transitionSupportedProperty[key]
+    // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+    style.transform.forEach(item => {
+      if (item[key] !== undefined) initialVal = item[key]
+    })
+    return initialVal
+  }
+  return style[key] === undefined ? transitionSupportedProperty[key] : style[key]
+}
+// animated key transform 格式化
+export function formatAnimatedKeys (keys: string[]) {
+  // console.log('formatAnimatedKeys keys=', keys)
+  const animatedKeys = [] as (string|string[])[]
+  const transforms = [] as string[]
+  keys.forEach(key => {
+    if (isTransform(key)) {
+      transforms.push(key)
+    } else {
+      animatedKeys.push(key)
+    }
+  })
+  if (transforms.length) animatedKeys.push(transforms)
+  // console.log('formatAnimatedKeys animatedKeys=', animatedKeys)
+  return animatedKeys
+}
+// 解析动画时长
+export function getUnit (duration: string) {
+  const match = secondRegExp.exec(duration)
+  return match ? match[2] === 's' ? +match[1] * 1000 : +match[1] : 0
+}
+
+// 根据动画数据创建单个animation
+export function getAnimation ({ key, value }: { key: string, value: string|number }, { delay = 0, duration, easing }: ExtendWithTimingConfig, callback?: AnimationCallback) {
+  // console.log('getAnimation', key, value, delay, duration, easing)
+  const animation = typeof callback === 'function'
+    ? withTiming(value, { duration, easing }, callback)
+    : withTiming(value, { duration, easing })
+  return delay ? withDelay(delay, animation) : animation
+}

package/lib/runtime/components/react/context.ts

@@ -1,5 +1,5 @@
 import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
-import { NativeSyntheticEvent, Animated } from 'react-native'
+import type { NativeSyntheticEvent, Animated, ScaledSize } from 'react-native'
 import { noop } from '@mpxjs/utils'
 
 export type LabelContextValue = MutableRefObject<{
@@ -10,8 +10,12 @@ export type KeyboardAvoidContextValue = MutableRefObject<{
   cursorSpacing: number
   ref: MutableRefObject<any>
   adjustPosition: boolean
+  holdKeyboard?: boolean
   keyboardHeight?: number
+  /** @internal bindfocus 异步延迟上报方法 */
   onKeyboardShow?: () => void
+  /** @internal 多个 Input 切换聚焦场景标记位 */
+  readyToShow?: boolean
 } | null>
 
 export interface GroupValue {
@@ -48,7 +52,7 @@ export interface PortalContextValue {
 
 export interface ScrollViewContextValue {
   gestureRef: React.RefObject<any> | null
-  scrollOffset: Animated.Value
+  scrollOffset: Animated.Value | null
 }
 
 export interface RouteContextValue {
@@ -56,6 +60,11 @@ export interface RouteContextValue {
   navigation: Record<string, any>
 }
 
+export interface DimensionsValue {
+  window: ScaledSize;
+  screen: ScaledSize;
+}
+
 export interface StickyContextValue {
   registerStickyHeader: Function
   unregisterStickyHeader: Function
@@ -83,7 +92,7 @@ export const SwiperContext = createContext({})
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
-export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null, scrollOffset: new Animated.Value(0) })
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null, scrollOffset: null })
 
 export const PortalContext = createContext<PortalContextValue>(null as any)
 

package/lib/runtime/components/react/dist/animationHooks/index.d.ts

@@ -0,0 +1,15 @@
+import type { MutableRefObject } from 'react';
+import type { NativeSyntheticEvent } from 'react-native';
+import type { _ViewProps } from '../mpx-view';
+export type AnimationType = 'api' | 'animation' | 'transition' | 'none';
+export default function useAnimationHooks<T, P>(props: _ViewProps & {
+    enableAnimation?: boolean | AnimationType;
+    layoutRef: MutableRefObject<any>;
+    transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}): {
+    enableStyleAnimation: boolean;
+    animationStyle?: undefined;
+} | {
+    enableStyleAnimation: boolean;
+    animationStyle: import("../types/common").ExtendedViewStyle;
+};

package/lib/runtime/components/react/dist/animationHooks/index.js

@@ -0,0 +1,67 @@
+import { error, collectDataset, hasOwn } from '@mpxjs/utils';
+import { useRef } from 'react';
+import useAnimationAPIHooks from './useAnimationAPIHooks';
+import useTransitionHooks from './useTransitionHooks';
+export default function useAnimationHooks(props) {
+    const { style: originalStyle = {}, enableAnimation, animation, transitionend, layoutRef } = props;
+    // 记录动画类型
+    let animationType = '';
+    if (hasOwn(originalStyle, 'animation') || (hasOwn(originalStyle, 'animationName') && hasOwn(originalStyle, 'animationDuration'))) {
+        // css animation 只做检测提示
+        animationType = 'animation';
+    }
+    if (!!animation || enableAnimation === true) {
+        animationType = 'api';
+    }
+    // 优先级 css transition > API
+    if (hasOwn(originalStyle, 'transition') || (hasOwn(originalStyle, 'transitionProperty') && hasOwn(originalStyle, 'transitionDuration'))) {
+        animationType = 'transition';
+    }
+    // 优先以 enableAnimation 定义类型为准
+    if (enableAnimation === 'api' || enableAnimation === 'transition' || enableAnimation === 'animation') {
+        animationType = enableAnimation;
+    }
+    const animationTypeRef = useRef(animationType);
+    if (animationType && animationTypeRef.current !== animationType) {
+        // 允许 API、CssTransition 到 none，不允许 API、CssTransition 互切，不允许 none 到 API、CssTransition
+        error('[Mpx runtime error]: The animation type should be stable in the component lifecycle, or you can set animation type with [enable-animation].');
+    }
+    if (animationType === 'animation') {
+        // 暂不支持 CssAnimation 提示
+        error('[Mpx runtime error]: CSS animation is not supported yet');
+        return { enableStyleAnimation: false };
+    }
+    if (!animationTypeRef.current)
+        return { enableStyleAnimation: false };
+    const hooksProps = { style: originalStyle };
+    if (transitionend && typeof transitionend === 'function') {
+        function withTimingCallback(finished, current, duration) {
+            const target = {
+                id: animation?.id || -1,
+                dataset: collectDataset(props),
+                offsetLeft: layoutRef?.current?.offsetLeft || 0,
+                offsetTop: layoutRef?.current?.offsetTop || 0
+            };
+            transitionend({
+                type: 'transitionend',
+                // elapsedTime 对齐wx 单位s
+                detail: { elapsedTime: duration ? duration / 1000 : 0, finished, current },
+                target,
+                currentTarget: target,
+                timeStamp: Date.now()
+            });
+        }
+        Object.assign(hooksProps, { transitionend: withTimingCallback });
+    }
+    if (animationTypeRef.current === 'api') {
+        Object.assign(hooksProps, { animation });
+    }
+    return {
+        enableStyleAnimation: !!animationTypeRef.current,
+        animationStyle: animationTypeRef.current === 'api'
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            ? useAnimationAPIHooks(hooksProps)
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            : useTransitionHooks(hooksProps)
+    };
+}

package/lib/runtime/components/react/dist/animationHooks/useAnimationAPIHooks.d.ts

@@ -0,0 +1,3 @@
+import type { ExtendedViewStyle } from '../types/common';
+import type { AnimationHooksPropsType } from './utils';
+export default function useAnimationAPIHooks<T, P>(props: AnimationHooksPropsType): ExtendedViewStyle;