@mpxjs/webpack-plugin 2.10.17-beta.3 → 2.10.17-beta.6

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

@@ -0,0 +1,198 @@
+import { useMemo, useRef, useEffect } from 'react'
+import { error, hasOwn } from '@mpxjs/utils'
+import {
+  Easing,
+  withSequence,
+  makeMutable,
+  runOnJS,
+  useSharedValue,
+  useAnimatedStyle,
+  cancelAnimation
+} from 'react-native-reanimated'
+import {
+  easingKey,
+  animationAPIInitialValue,
+  percentExp,
+  isTransform,
+  getInitialVal,
+  getAnimation,
+  getTransformObj,
+  formatAnimatedKeys
+} from './utils'
+import { useRunOnJSCallback } from '../utils'
+import type { NativeSyntheticEvent, TransformsStyle } from 'react-native'
+import type { AnimationCallback, SharedValue, AnimatableValue } from 'react-native-reanimated'
+import type { ExtendedViewStyle } from '../types/common'
+import type { AnimationHooksPropsType } from './utils'
+
+export default function useAnimationAPIHooks<T, P> (props: AnimationHooksPropsType) {
+  // console.log(`useAnimationAPIHooks, props=`, props)
+  const { style: originalStyle = {}, animation, transitionend } = props
+  // style变更标识(首次render不执行)
+  const animationDeps = useRef(-1)
+  // animation API 使用 animation.id 为依赖
+  if (animation?.id) {
+    animationDeps.current = animation.id
+  }
+  // 有动画样式的 style key(useAnimatedStyle使用)
+  const animatedStyleKeys = useSharedValue([] as (string|string[])[])
+  // 记录需要执行动画的 propName
+  const animatedKeys = useRef([] as string[])
+  // 记录上次style map
+  const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
+  // ** 全量 style prop sharedValue
+  const shareValMap = useMemo(() => {
+    return Object.keys(animationAPIInitialValue).reduce((valMap, key) => {
+      const defaultVal = getInitialVal(originalStyle, key)
+      valMap[key] = makeMutable(defaultVal)
+      return valMap
+    }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
+  }, [])
+  const runOnJSCallbackRef = useRef({})
+  if (transitionend) {
+    runOnJSCallbackRef.current = {
+      transitionend
+    }
+  }
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+  // 设置 lastShareValRef & shareValMap
+  function updateStyleVal () {
+    Object.keys(shareValMap).forEach(key => {
+      let value = originalStyle[key]
+      if (isTransform(key)) {
+        value = originalStyle.transform
+        Object.entries(getTransformObj(value)).forEach(([key, value]) => {
+          if (value !== lastStyleRef.current[key]) {
+            lastStyleRef.current[key] = value
+            shareValMap[key].value = value
+          }
+        })
+      } else {
+        if (value !== lastStyleRef.current[key]) {
+          lastStyleRef.current[key] = value
+          shareValMap[key].value = value
+        }
+      }
+    })
+  }
+  // 根据 animation action 创建&驱动动画
+  function createAnimation (animatedKeys: string[] = []) {
+    const actions = animation?.actions || []
+    const sequence = {} as { [propName: keyof ExtendedViewStyle]: (string|number)[] }
+    const lastValueMap = {} as { [propName: keyof ExtendedViewStyle]: string|number }
+    actions.forEach(({ animatedOption, rules, transform }, index) => {
+      const { delay, duration, timingFunction, transformOrigin } = animatedOption
+      const easing = timingFunction ? easingKey[timingFunction] : Easing.inOut(Easing.quad)
+      let needSetCallback = true
+      const callback: AnimationCallback = (finished?: boolean, current?: AnimatableValue) => {
+        'worklet'
+        // 动画结束后设置下一次transformOrigin
+        if (finished) {
+          if (index < actions.length - 1) {
+            const transformOrigin = actions[index + 1].animatedOption?.transformOrigin
+            transformOrigin && (shareValMap.transformOrigin.value = transformOrigin)
+          }
+          transitionend && runOnJS(runOnJSCallback)('transitionend', finished, current, duration)
+        }
+      }
+      if (index === 0 && transformOrigin) {
+        // 设置当次中心
+        shareValMap.transformOrigin.value = transformOrigin
+      }
+      // 添加每个key的多次step动画
+      animatedKeys.forEach(key => {
+        const shareVal = shareValMap[key].value
+        const ruleV = isTransform(key) ? transform.get(key) : rules.get(key)
+        // color 设置为 1
+        // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
+        let toVal = ruleV !== undefined
+          ? ruleV
+          : index > 0
+            ? lastValueMap[key]
+            : shareVal
+        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 as number * 100}%`
+        } else if (typeof toVal !== typeof shareVal) {
+          // 动画起始值和终态值类型不一致报错提示一下
+          error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
+        }
+        // Todo 对齐wx
+        const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, needSetCallback ? callback : undefined)
+        needSetCallback = false
+        if (!sequence[key]) {
+          sequence[key] = [animation]
+        } else {
+          sequence[key].push(animation)
+        }
+        // 更新一下 lastValueMap
+        lastValueMap[key] = toVal!
+      })
+      // 赋值驱动动画
+      animatedKeys.forEach((key) => {
+        const animations = sequence[key]
+        shareValMap[key].value = animations.length > 1 ? withSequence(...animations) : animations[0]
+      })
+    })
+  }
+  // 循环 animation actions 获取所有有动画的 style prop name
+  function getAnimatedStyleKeys () {
+    return (animation?.actions || []).reduce((keyMap, action) => {
+      const { rules, transform } = action
+      const ruleArr = [...rules.keys(), ...transform.keys()]
+      ruleArr.forEach(key => {
+        keyMap.push(key)
+      })
+      // console.log('getAnimatedStyleKeys keyMap=', keyMap)
+      return keyMap
+    }, [] as string[])
+  }
+  // 获取动画样式&驱动动画
+  function startAnimation () {
+    // 更新动画样式 key map
+    animatedKeys.current = getAnimatedStyleKeys()
+    animatedStyleKeys.value = formatAnimatedKeys(['transformOrigin', ...animatedKeys.current])
+    // 驱动动画
+    createAnimation(animatedKeys.current)
+  }
+  // ** style 更新
+  useEffect(() => {
+    // animation api style 更新同步更新 shareVal（默认）
+    updateStyleVal()
+  }, [originalStyle])
+  // ** 获取动画样式prop & 驱动动画
+  useEffect(() => {
+    if (animationDeps.current <= 0) return
+    startAnimation()
+  }, [animationDeps.current])
+  // ** 清空动画
+  useEffect(() => {
+    return () => {
+      Object.values(shareValMap).forEach((value) => {
+        cancelAnimation(value)
+      })
+    }
+  }, [])
+  // ** 生成动画样式
+  return useAnimatedStyle(() => {
+    // console.info(`useAnimatedStyle styles=`, originalStyle)
+    return animatedStyleKeys.value.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/useTransitionHooks.ts

@@ -0,0 +1,297 @@
+import { hasOwn, dash2hump, error } 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, animatedKeysShareVal } = useMemo(() => {
+    // 记录需要执行动画的 propName
+    const animatedKeys = [] as string[]
+    const animatedKeysShareVal = [] 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)
+        animatedKeysShareVal.push(property)
+      }
+      // console.log('shareValMap = ', valMap)
+      return valMap
+    }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
+    if (transforms.length) animatedKeysShareVal.push(transforms)
+    return {
+      shareValMap,
+      animatedKeys,
+      animatedKeysShareVal
+    }
+  }, [])
+  // 有动画样式的 style key(useAnimatedStyle使用)
+  const animatedStyleKeys = useSharedValue(animatedKeysShareVal)
+  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) {
+        // 动画起始值和终态值类型不一致报错提示一下
+        error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
+      }
+      // 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.value.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,196 @@
+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',
+  width: 0,
+  height: 0,
+  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
+}