Merge pull request #2364 from didi/feat-transion-25.05.10

transition动画

Author: Blackgan3

docs-vitepress/guide/rn/style.md

@@ -1429,3 +1429,110 @@ object-fit: contain;    /* 完整显示，保持比例 */
 object-fit: cover;      /* 覆盖填充，保持比例，可能裁剪 */
 object-fit: scale-down; /* 缩小显示 */
 ```
+
+
+## 跨端动画
+基础组件 view 支持两种动画形式 createAnimation API 和 transition，
+可以通过设置 animation 属于来使用 createAnimation API 动画，通过 class 或者 style 设置 css transition 来使用 transition 动画，
+可以用过 prop enableAnimation = api/transition 来指定使用 createAnimation API/transition 的动画形式，，enableAnimation 设置 true 默认为 createAnimation API 形式，需要注意的是指定动画类型后，对应的动画参数也需要匹配设置，详细使用文档如下：
+
+### createAnimation 动画API
+创建一个动画实例 animation，调用实例的方法来描述动画，最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
+详情参考以下动画部分微信小程序文档，以下仅描述支持能力有差异部分：
+#### [wx.createAnimation](https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html)
+- 参数 timingFunction 不支持 step-start 和 step-end
+#### [动画实例 animation](https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html)
+- translateZ() 不支持
+- translate3d() 不支持
+- rotate3d() 不支持
+- rotateZ() 不支持
+- scaleZ() 不支持
+- scale3d() 不支持
+- animation.matrix() 不支持
+- animation.matrix3d() 不支持
+
+### CSS transition
+CSS transition 动画至少需要设置动画时长和动画属性，可通过单独属性 transition-property 和 transition-property 设置，也可以通过 transition 缩写设置
+>重要提示：transition 支持设置百分比，如 ```marginTop: 1%;marginTop: 100%;```；要注意的是起始值和结束值需设置为同一类型，同为px或者同为百分比， 支持 ```marginTop: 10px;marginTop: 100px; ```，**不支持 ```marginTop: 10px; marginTop: 100%;```**
+
+#### [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
+```css
+/**** 支持 */
+/* property name | duration */
+transition: margin-right 4s;
+/* property name | duration | delay */
+transition: margin-right 4s 1s;
+/* property name | duration | easing function */
+transition: margin-right 4s ease-in-out;
+/* property name | duration | easing function | delay */
+transition: margin-right 4s ease-in-out 1s;
+
+/* Apply to 2 properties */
+transition: margin-right 4s, color 1s;
+```
+```css
+/**** 需配合 transition-property 使用*/
+/* transition 未定义 property 时需配合 transition-property 使用，否则仅设置duration、timingFunciton等参数实际动画不生效 */
+transition: 200ms linear 50ms;
+transition: 2s, 1s;
+```
+```css
+/**** 不支持：property 不支持设置为 all  */
+transition: all 0.5s ease-out
+```
+#### [transition-property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)
+不支持设置为 all，不支持自定义
+> 支持的 property 合集有：
+> rotateX rotateY rotateZ scaleX scaleY skewX skewY translateX translateY opacity backgroundColor width height top right bottom left color borderColor borderBottomColor borderLeftColor borderRightColor borderTopColor borderTopLeftRadius borderTopRightRadius borderBottomLeftRadius borderBottomRightRadius borderRadius borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderWidth margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth padding paddingBottom paddingLeft paddingRight paddingTop
+```css
+/**** 支持 */
+transition-property: height;
+transition-property: height, color;
+```
+```css
+/**** 不支持 */
+transition-property: all;
+/* <custom-ident> values */
+transition-property: test_05;
+transition-property: -specific;
+transition-property: sliding-vertically;
+transition-property: test1, animation4;
+transition-property: all, -moz-specific, sliding;
+transition-property: inherit;
+transition-property: initial;
+transition-property: revert;
+transition-property: revert-layer;
+transition-property: unset;
+```
+#### [transition-duration](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-duration)
+```css
+/**** 支持 */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+```
+#### [transition-delay](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-delay)
+```css
+/**** 支持 */
+transition-delay: 3s;
+transition-delay: 2s, 4ms;
+```
+#### [transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior)
+不支持
+#### [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)
+仅支持 ease、ease-in、ease-out、ease-in-out、linear、cubic-bezier()，不支持 step-start、step-end、steps()
+
+### CSS animation
+暂不支持
+
+### 动画监听事件
+#### transitionend
+- CSS transition 结束或 wx.createAnimation 结束一个阶段时触发
+- 不属于冒泡事件，需要绑定在真正发生了动画的节点上才会生效
+#### animationstart
+暂不支持
+#### animationiteration
+暂不支持
+#### animationend
+暂不支持

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -3,7 +3,7 @@ const { parseValues } = require('../../../utils/string')
 
 module.exports = function getSpec ({ warn, error }) {
   // React Native 双端都不支持的 CSS property
-  const unsupportedPropExp = /^(white-space|text-overflow|animation|transition|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures|background-position|caret-color)$/
+  const unsupportedPropExp = /^(white-space|text-overflow|animation|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures|background-position|caret-color)$/
   const unsupportedPropMode = {
     // React Native ios 不支持的 CSS property
     ios: /^(vertical-align)$/,
@@ -400,6 +400,8 @@ module.exports = function getSpec ({ warn, error }) {
     // css var & 数组直接返回
     if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value }
     const values = parseValues(value)
+    // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
+    values.sort()
     const transform = []
     values.forEach(item => {
       const match = item.match(/([/\w]+)\((.+)\)/)

packages/webpack-plugin/lib/runtime/components/react/animationHooks/index.ts

@@ -0,0 +1,75 @@
+import { error, collectDataset, hasOwn } from '@mpxjs/utils'
+import { useRef } from 'react'
+import useAnimationAPIHooks from './useAnimationAPIHooks'
+import useTransitionHooks from './useTransitionHooks'
+import type { AnimatableValue } from 'react-native-reanimated'
+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 }) {
+  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?: boolean, current?: AnimatableValue, duration?: number) {
+      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)
+  }
+}