@mpxjs/webpack-plugin 2.9.65 → 2.9.66

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -0,0 +1,215 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
+// 微信 timingFunction 和 RN Easing 对应关系
+const EasingKey = {
+    linear: Easing.linear,
+    ease: Easing.ease,
+    'ease-in': Easing.in(Easing.ease),
+    'ease-in-out': Easing.inOut(Easing.ease),
+    'ease-out': Easing.out(Easing.ease)
+    // 'step-start': '',
+    // 'step-end': ''
+};
+const TransformInitial = {
+    // 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,
+};
+// 动画默认初始值
+const InitialValue = Object.assign({
+    opacity: 1,
+    backgroundColor: 'transparent',
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    transformOrigin: ['50%', '50%', 0]
+}, TransformInitial);
+const TransformOrigin = 'transformOrigin';
+// deg 角度
+// const isDeg = (key: RuleKey) => ['rotateX', 'rotateY', 'rotateZ', 'rotate', 'skewX', 'skewY'].includes(key)
+// 背景色
+// const isBg = (key: RuleKey) => key === 'backgroundColor'
+// transform
+const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+export default function useAnimationHooks(props) {
+    const { style: originalStyle = {}, animation } = props;
+    // id 标识
+    const id = animation?.id || -1;
+    // 有动画样式的 style key
+    const animatedStyleKeys = useSharedValue([]);
+    const animatedKeys = useRef({});
+    // ** 全量 style prop sharedValue
+    // 不能做增量的原因：
+    // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
+    // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+    const shareValMap = useMemo(() => {
+        return Object.keys(InitialValue).reduce((valMap, key) => {
+            const defaultVal = getInitialVal(key, isTransform(key));
+            valMap[key] = makeMutable(defaultVal);
+            return valMap;
+        }, {});
+    }, []);
+    // ** 获取动画样式prop & 驱动动画
+    useEffect(() => {
+        if (id === -1)
+            return;
+        // 更新动画样式 key map
+        animatedKeys.current = getAnimatedStyleKeys();
+        const keys = Object.keys(animatedKeys.current);
+        animatedStyleKeys.value = formatAnimatedKeys([TransformOrigin, ...keys]);
+        // 驱动动画
+        createAnimation(keys);
+    }, [id]);
+    // ** 清空动画
+    useEffect(() => {
+        return () => {
+            Object.values(shareValMap).forEach((value) => {
+                cancelAnimation(value);
+            });
+        };
+    }, []);
+    // 根据 animation action 创建&驱动动画 key => wi
+    function createAnimation(animatedKeys = []) {
+        const actions = animation?.actions || [];
+        const sequence = {};
+        const lastValueMap = {};
+        actions.forEach(({ animatedOption, rules, transform }, index) => {
+            const { delay, duration, timingFunction, transformOrigin } = animatedOption;
+            const easing = EasingKey[timingFunction] || Easing.inOut(Easing.quad);
+            let needSetCallback = true;
+            const setTransformOrigin = (finished) => {
+                'worklet';
+                // 动画结束后设置下一次transformOrigin
+                if (finished) {
+                    if (index < actions.length - 1) {
+                        const transformOrigin = actions[index + 1].animatedOption?.transformOrigin;
+                        transformOrigin && (shareValMap[TransformOrigin].value = transformOrigin);
+                    }
+                }
+            };
+            if (index === 0) {
+                // 设置当次中心
+                shareValMap[TransformOrigin].value = transformOrigin;
+            }
+            // 添加每个key的多次step动画
+            animatedKeys.forEach(key => {
+                let toVal = (rules.get(key) || transform.get(key));
+                // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
+                if (!toVal) {
+                    toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value;
+                }
+                const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : 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 = withSequence(...animations);
+            });
+        });
+    }
+    // 创建单个animation
+    function getAnimation({ key, value }, { delay, duration, easing }, callback) {
+        const animation = typeof callback === 'function'
+            ? withTiming(value, { duration, easing }, callback)
+            : withTiming(value, { duration, easing });
+        return delay ? withDelay(delay, animation) : animation;
+    }
+    // 获取初始值（prop style or 默认值）
+    function getInitialVal(key, isTransform = false) {
+        if (isTransform && originalStyle.transform?.length) {
+            let initialVal = InitialValue[key];
+            // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+            originalStyle.transform.forEach(item => {
+                if (item[key] !== undefined)
+                    initialVal = item[key];
+            });
+            return initialVal;
+        }
+        return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key];
+    }
+    // 循环 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 => {
+                if (!keyMap[key])
+                    keyMap[key] = true;
+            });
+            return keyMap;
+        }, animatedKeys.current);
+    }
+    // animated key transform 格式化
+    function formatAnimatedKeys(keys = []) {
+        const animatedKeys = [];
+        const transforms = [];
+        keys.forEach(key => {
+            if (isTransform(key)) {
+                transforms.push(key);
+            }
+            else {
+                animatedKeys.push(key);
+            }
+        });
+        if (transforms.length)
+            animatedKeys.push(transforms);
+        return animatedKeys;
+    }
+    // transform 数组转对象
+    function getTransformObj() {
+        'worklet';
+        const transforms = originalStyle.transform || [];
+        return transforms.reduce((transformObj, item) => {
+            return Object.assign(transformObj, item);
+        }, {});
+    }
+    // ** 生成动画样式
+    return useAnimatedStyle(() => {
+        // console.info(`useAnimatedStyle styles=`, originalStyle)
+        return animatedStyleKeys.value.reduce((styles, key) => {
+            // console.info('getAnimationStyles', key, shareValMap[key].value)
+            if (Array.isArray(key)) {
+                const transformStyle = getTransformObj();
+                key.forEach((transformKey) => {
+                    transformStyle[transformKey] = shareValMap[transformKey].value;
+                });
+                styles.transform = Object.entries(transformStyle).map(([key, value]) => {
+                    return { [key]: value };
+                });
+            }
+            else {
+                styles[key] = shareValMap[key].value;
+            }
+            return styles;
+        }, Object.assign({}, originalStyle));
+    });
+}

package/lib/runtime/components/react/dist/utils.jsx

@@ -87,7 +87,8 @@ export const getRestProps = (transferProps = {}, originProps = {}, deletePropsKe
 export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
-        return displayName === 'mpx-text' || displayName === 'Text';
+        const isCustomText = ele.type?.isCustomText;
+        return displayName === 'mpx-text' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -33,12 +33,13 @@
  */
 import { ScrollView } from 'react-native-gesture-handler'
 import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
-import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef } from 'react'
+import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext } from 'react'
 import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils'
+import { IntersectionObserverContext } from './context'
 
 interface ScrollViewProps {
   children?: ReactNode;
@@ -60,6 +61,7 @@ interface ScrollViewProps {
   'scroll-top'?: number;
   'scroll-left'?: number;
   'enable-offset'?: boolean;
+  'enable-trigger-intersection-observer'?: boolean;
   'enable-var'?: boolean;
   'external-var-context'?: Record<string, any>;
   'parent-font-size'?: number;
@@ -107,6 +109,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'scroll-x': scrollX = false,
     'scroll-y': scrollY = false,
     'enable-back-to-top': enableBackToTop = false,
+    'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false,
     'paging-enabled': pagingEnabled = false,
     'upper-threshold': upperThreshold = 50,
     'lower-threshold': lowerThreshold = 50,
@@ -139,6 +142,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const hasCallScrollToUpper = useRef(true)
   const hasCallScrollToLower = useRef(false)
   const initialTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const intersectionObservers = useContext(IntersectionObserverContext)
 
   const {
     normalStyle,
@@ -285,6 +289,11 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         }, props)
       )
     updateScrollOptions(e, { scrollLeft, scrollTop })
+    if (enableTriggerIntersectionObserver && intersectionObservers) {
+      for (const key in intersectionObservers) {
+        intersectionObservers[key].throttleMeasure()
+      }
+    }
   }
 
   function onScrollEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
@@ -407,6 +416,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'scroll-x',
     'scroll-y',
     'enable-back-to-top',
+    'enable-trigger-intersection-observer',
     'paging-enabled',
     'show-scrollbar',
     'upper-threshold',

package/lib/runtime/components/react/mpx-swiper/carouse.tsx

@@ -87,6 +87,8 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0)
   const defaultX = (defaultWidth * initOffsetIndex) || 0
   const defaultY = (defaultHeight * initOffsetIndex) || 0
+  // 主动scorllTo时是否要出发onScrollEnd
+  const needTriggerScrollEnd = useRef(true)
   // 内部存储上一次的offset值
   const autoplayTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null)
   const scrollViewRef = useRef<ScrollView & View>(null)
@@ -100,22 +102,21 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   // 内部存储上一次的偏移量
   const internalsRef = useRef({
     offset: {
-      x: defaultX || 0,
-      y: defaultY || 0
+      x: 0,
+      y: 0
     },
     isScrolling: false
   })
   const isDragRef = useRef(false)
   const [state, setState] = useState({
-    children: newChild,
     width: dir === 'x' && typeof defaultWidth === 'number' ? defaultWidth - previousMargin - nextMargin : defaultWidth,
     height: dir === 'y' && typeof defaultHeight === 'number' ? defaultHeight - previousMargin - nextMargin : defaultHeight,
     // 真正的游标索引, 从0开始
     index: initIndex,
     total: totalElements,
     offset: {
-      x: dir === 'x' ? defaultX : 0,
-      y: dir === 'y' ? defaultY : 0
+      x: 0,
+      y: 0
     },
     dir
   } as CarouseState)
@@ -138,25 +139,38 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
 
   useEffect(() => {
     // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
-    if (!props.autoplay && props.current !== state.index) {
+    if (!props.autoplay && props.current !== undefined && props.current !== state.index) {
       const initIndex = props.current || 0
       // 这里要排除超过元素个数的设置
-      const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0)
-      const defaultX = (defaultWidth * initOffsetIndex) || 0
-      const offset = {
-        x: dir === 'x' ? defaultX : 0,
-        y: dir === 'y' ? defaultY : 0
+      const { nextIndex, nextOffset } = getMultiNextConfig(props.current)
+      // 1. 安卓需要主动更新下内部状态, 2. IOS不能触发完wcrollTo之后立即updateState, 会造成滑动两次
+      // 2. setTimeout 是fix 当再渲染过程中触发scrollTo失败的问题
+      if (Platform.OS === 'ios') {
+        needTriggerScrollEnd.current = false
+        setTimeout(() => {
+          scrollViewRef.current?.scrollTo({
+            ...nextOffset,
+            animated: true
+          })
+        }, 50)
+      } else {
+        updateState(nextIndex, nextOffset)
       }
-      state.offset = offset
-      internalsRef.current.offset = offset
-      setState((preState) => {
-        return {
-          ...preState,
-          offset
-        }
-      })
     }
-  }, [props.current])
+  }, [props.current, state.width, state.height])
+
+  function getMultiNextConfig (target: number) {
+    const step = state.dir === 'x' ? state.width : state.height
+    const targetPos = step * props.current
+    const targetOffset = {
+      x: dir === 'x' ? targetPos : 0,
+      y: dir === 'y' ? targetPos : 0
+    }
+    return {
+      nextIndex: target,
+      nextOffset: targetOffset
+    }
+  }
   /**
    * @desc: 更新状态: index和offset, 并响应索引变化的事件
    * scrollViewOffset: 移动到的目标位置
@@ -208,7 +222,6 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
       nextIndex = isBack ? nextIndex - 2 : nextIndex
     }
     if (!props.circular) {
-      // nextIndex = isBack ? nextIndex - 2 : nextIndex
       nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * nextIndex })
     } else {
       if (isBack) {
@@ -254,13 +267,12 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
       createAutoPlay()
       return
     }
-    if (!Array.isArray(state.children)) {
+    if (!Array.isArray(props.children)) {
       return
     }
     const step = state.dir === 'x' ? state.width : state.height
     const { nextOffset, autoMoveOffset, isAutoEnd } = getNextConfig(state.offset)
     // 这里可以scroll到下一个元素, 但是把scrollView的偏移量在设置为content,视觉效果就没了吧
-    // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true })
     if (Platform.OS === 'ios') {
       if (!isAutoEnd) {
         scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true })
@@ -286,7 +298,6 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
         // 安卓无法实现视觉的无缝连接, 只能回到真正的位置, 且安卓调用scrollTo不能触发onMomentumScrollEnd,还未找到为啥
         if (state.dir === 'x') {
           scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true })
-          // scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.y, animated: true })
         } else {
           scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: step, animated: true })
         }
@@ -304,9 +315,15 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
 
   /**
    * 当用户开始拖动结束
+   * 注意: 当手动调用scrollTo的时候, 安卓不会触发onMomentumScrollEnd, IOS会触发onMomentumScrollEnd
    */
   function onScrollEnd (event: NativeSyntheticEvent<NativeScrollEvent>) {
-    // 这里安卓好像没有触发onScrollEnd, 调用scrollTo的时候
+    if (Platform.OS === 'ios' && !needTriggerScrollEnd.current) {
+      const { nextIndex, nextOffset } = getMultiNextConfig(props.current)
+      updateState(nextIndex, nextOffset)
+      needTriggerScrollEnd.current = true
+      return
+    }
     if (totalElements === 1) {
       return
     }
@@ -334,57 +351,41 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
    * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
   */
   function onWrapperLayout (e: LayoutChangeEvent) {
-    if (hasSelfPercent) {
-      const { width, height } = e?.nativeEvent?.layout || {}
-      setWidth(width || 0)
-      setHeight(height || 0)
-    }
-    if (props.enableOffset) {
-      scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-        layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-        const isWDiff = state.width !== width
-        const isHDiff = state.height !== height
-        if (isWDiff || isHDiff) {
-          const changeState = {
-            width: isWDiff ? width : state.width,
-            height: isHDiff ? height : state.height
-          }
-          const attr = state.dir === 'x' ? 'width' : 'height'
-          changeState[attr] = changeState[attr] - previousMargin - nextMargin
-          const correctOffset = Object.assign({}, state.offset, {
-            [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
-          })
-          state.offset = correctOffset
-          state.width = changeState.width
-          state.height = changeState.height
-          setState((preState) => {
-            return {
-              ...preState,
-              offset: correctOffset,
-              width: changeState.width,
-              height: changeState.height
-            }
-          })
-          scrollViewRef.current?.scrollTo({ x: correctOffset.x, y: correctOffset.y, animated: false })
+    scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
+      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+      const isWDiff = state.width !== width
+      const isHDiff = state.height !== height
+      if (isWDiff || isHDiff) {
+        const changeState = {
+          width: isWDiff ? width : state.width,
+          height: isHDiff ? height : state.height
         }
-        props.getInnerLayout && props.getInnerLayout(layoutRef)
-      })
-    }
+        const attr = state.dir === 'x' ? 'width' : 'height'
+        changeState[attr] = changeState[attr] - previousMargin - nextMargin
+        const correctOffset = Object.assign({}, state.offset, {
+          [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
+        })
+        state.width = changeState.width
+        state.height = changeState.height
+        // 这里setState之后,会再触发重新渲染, renderScrollView会再次触发onScrollEnd,
+        setState((preState) => {
+          return {
+            ...preState,
+            width: changeState.width,
+            height: changeState.height
+          }
+        })
+      }
+      props.getInnerLayout && props.getInnerLayout(layoutRef)
+    })
   }
 
   function getOffset (): Array<number> {
     const step = state.dir === 'x' ? state.width : state.height
     if (!step || Number.isNaN(+step)) return []
     const offsetArray = []
-    if (previousMargin) {
-      offsetArray.push(0)
-      for (let i = 1; i < totalElements; i++) {
-        offsetArray.push(i * step - previousMargin)
-      }
-    } else {
-      for (let i = 0; i < totalElements; i++) {
-        offsetArray.push(i * step)
-      }
+    for (let i = 0; i < totalElements; i++) {
+      offsetArray.push(i * step)
     }
     return offsetArray
   }
@@ -394,7 +395,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
     const scrollElementProps = {
       ref: scrollViewRef,
       horizontal: props.horizontal,
-      pagingEnabled: false,
+      pagingEnabled: true,
       snapToOffsets: offsetsArray,
       decelerationRate: 0.99, // 'fast'
       showsHorizontalScrollIndicator: false,
@@ -461,20 +462,21 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   }
 
   function renderPages () {
-    const { width, height, total, children } = state
+    const { width, height } = state
+    const { children } = props
     const { circular } = props
     const pageStyle = { width: width, height: height }
     // 设置了previousMargin或者nextMargin,
     // 1. 元素的宽度是减去这两个数目之和
     // 2. previousMargin设置marginLeft正值, nextmargin设置marginRight负值
     // 3. 第一个元素设置previousMargin 和 nextMargin, 最后一个元素
-    if (total > 1 && Array.isArray(children)) {
+    if (totalElements > 1 && Array.isArray(children)) {
       let arrElements: (Array<ReactNode>) = []
       // pages = ["2", "0", "1", "2", "0"]
       const pages = Array.isArray(children) ? Object.keys(children) : []
       /* 无限循环的时候 */
       if (circular) {
-        pages.unshift(total - 1 + '')
+        pages.unshift(totalElements - 1 + '')
         pages.push('0')
       }
       arrElements = pages.map((page, i) => {
@@ -486,7 +488,6 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
         } else if (i === pages.length - 1 && typeof width === 'number') {
           nextMargin && (extraStyle.marginRight = nextMargin)
         }
-        // return (<View style={[pageStyle, styles.slide, extraStyle]} key={ 'page' + i}>{children[+page]}</View>)
         return (<View style={[pageStyle, styles.slide, extraStyle]} key={ 'page' + i}>
           {wrapChildren(
             {

package/lib/runtime/components/react/mpx-view.tsx

@@ -7,6 +7,9 @@
 import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent, Text } from 'react-native'
 import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, Children, cloneElement } from 'react'
 import useInnerProps from './getInnerListeners'
+import Animated from 'react-native-reanimated'
+import useAnimationHooks from './useAnimationHooks'
+import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils'
@@ -14,6 +17,7 @@ import LinearGradient from 'react-native-linear-gradient'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
+  animation?: AnimationProp
   children?: ReactNode | ReactNode[]
   'hover-style'?: ExtendedViewStyle
   'hover-start-time'?: number
@@ -24,6 +28,7 @@ export interface _ViewProps extends ViewProps {
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
+  'enable-animation'?: boolean
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
@@ -650,9 +655,11 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'enable-background': enableBackground,
+    'enable-animation': enableAnimation,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
-    'parent-height': parentHeight
+    'parent-height': parentHeight,
+    animation
   } = props
 
   const [isHover, setIsHover] = useState(false)
@@ -747,9 +754,10 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     layoutProps
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
+  const viewStyle = Object.assign({}, innerStyle, layoutStyle)
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    style: { ...innerStyle, ...layoutStyle },
+    style: viewStyle,
     ...layoutProps,
     ...(hoverStyle && {
       bindtouchstart: onTouchStart,
@@ -764,25 +772,37 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     layoutRef
   })
 
-  return (
-    <View
+  enableAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableAnimation)
+  if (enableAnimationRef.current !== enableAnimation) {
+    throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+  const finalStyle = enableAnimation
+    ? useAnimationHooks({
+      animation,
+      style: viewStyle
+    })
+    : viewStyle
+  const childNode = wrapWithChildren(props, {
+    hasVarDec,
+    enableBackground: enableBackgroundRef.current,
+    textStyle,
+    backgroundStyle,
+    varContext: varContextRef.current,
+    textProps
+  })
+  return animation?.actions?.length
+    ? (<Animated.View
       {...innerProps}
+      style={finalStyle}
     >
-      {
-        wrapWithChildren(
-          props,
-          {
-            hasVarDec,
-            enableBackground: enableBackgroundRef.current,
-            textStyle,
-            backgroundStyle,
-            varContext: varContextRef.current,
-            textProps
-          }
-        )
-      }
-    </View>
-  )
+      {childNode}
+    </Animated.View>)
+    : (<View
+      {...innerProps}
+    >
+      {childNode}
+    </View>)
 })
 
 _View.displayName = 'mpx-view'

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -47,7 +47,7 @@ interface FormRef {
 }
 
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element => {
-  const { src, bindmessage = noop, bindload = noop, binderror = noop } = props
+  const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props
   if (props.style) {
     warn('The web-view component does not support the style prop.')
   }