transition 动画支持 #1990
Open
transition 动画支持 #1990
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…100px) rotateZ(45deg) 前后排序不一致导致的动画闪一下问题
hiyuki
reviewed
Aug 28, 2025
| if (enableAnimationRef.current !== enableStyleAnimation) { | ||
| error('[Mpx runtime error]: animation usage should be stable in the component lifecycle, or you can set [enable-animation] with true.') | ||
| } | ||
| if (!enableAnimationRef.current || animationTypeRef.current === AnimationType.None || animationTypeRef.current === AnimationType.CssAnimation) { |
There was a problem hiding this comment.
逻辑有问题，这个条件在整个生命周期内必须保持不变
There was a problem hiding this comment.
enableAnimationRef需要支持一个type，来声明当前的动画是走Animation API还是transition，确保钩子的执行是稳定的
hiyuki
reviewed
Aug 28, 2025
| None, | ||
| API, | ||
| CssTransition, | ||
| CssAnimation |
There was a problem hiding this comment.
可以先不用考虑None和Animation，减少复杂度
hiyuki
reviewed
Aug 28, 2025
| const enableStyleAnimation = enableAnimation || animationType !== AnimationType.None | ||
| const enableAnimationRef = useRef(enableStyleAnimation) | ||
| // console.log(`useAnimationHooks animationType=${animationTypeRef.current} animationType=${enableAnimationRef.current}`) | ||
| if (animationTypeRef.current !== AnimationType.None && animationTypeRef.current !== animationType) { |
hiyuki
reviewed
Aug 28, 2025
| } else { | ||
| // css 动画依赖为 style 变更 | ||
| // css transition 为 style 变更驱动，但首次不计入 | ||
| animationDeps.current += 1 |
There was a problem hiding this comment.
getStyle每次都会返回新对象，直接驱动动画有性能问题，需要判断transition的目标样式值是否发生变化来进行驱动
hiyuki
reviewed
Aug 28, 2025
| transition: all 0.5s ease-out | ||
| ``` | ||
| #### [transition-property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property) | ||
| 不支持设置为 all，不支持自定义 |
There was a problem hiding this comment.
all是不是也可以支持，去style当中扫一下在支持范围内的属性进行动画
There was a problem hiding this comment.
不过成本高的话先不支持也行，后续还是建议直接基于Reanimated新版提供的能力来实现，那里面直接支持all
hiyuki
reviewed
Aug 28, 2025
| ? useAnimationAPIHooks({ | ||
| animation, | ||
| style: originalStyle, | ||
| transitionend: withTimingCallback |
There was a problem hiding this comment.
用户没注册transitionend就别传呗，减少一次runOnJS
hiyuki
reviewed
Aug 28, 2025
| 'worklet' | ||
| // 动画结束后设置下一次transformOrigin | ||
| if (finished && transitionend) { | ||
| runOnJS(transitionend)(finished, current, duration) |
hiyuki
reviewed
Aug 28, 2025
| // 根据 animation action 创建&驱动动画 | ||
| function createAnimation (animatedKeys: string[] = []) { | ||
| // duration 不同需要再次执行回调，这里记录一下上次propName动画的duration | ||
| let lastDuration = -1 |
There was a problem hiding this comment.
逻辑漏洞，比如width:200ms, height:400ms, opacity:200ms，transitionend应该只需要执行两次，应该用map来存储出现过的duration
hiyuki
reviewed
Aug 28, 2025
| : SupportedProperty[key] | ||
| // 获取到的toVal为百分比且初始值为0时，需更新初始值为0% | ||
| if (PercentExp.test(toVal) && shareValMap[key].value === 0) { | ||
| shareValMap[key].value = '0%' |
hiyuki
reviewed
Aug 28, 2025
| left: 0, | ||
| transformOrigin: ['50%', '50%', 0] | ||
| }, TransformInitial) | ||
| export const SupportedProperty = Object.assign({ |
hiyuki
reviewed
Aug 28, 2025
| const { style: originalStyle = {}, transitionend } = props | ||
| // ** 从 style 中获取动画数据 | ||
| const transitionMap = useMemo(() => { | ||
| return parseTransitionStyle(originalStyle) |
hiyuki
reviewed
Aug 28, 2025
| // translateZ: 0, | ||
| } | ||
| // 动画默认初始值 | ||
| export const InitialValue: ExtendedViewStyle = Object.assign({ |
There was a problem hiding this comment.
这个和SupportedProperty为啥要分开定义？
There was a problem hiding this comment.
一个是AnimationAPI的初始值？一个是transition的初始值？变量名写明确一些吧
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.