React-Native:LayoutAnimation 和 useNativeDriver:对于 Flex 为 true

标签 react-native react-animated layout-animation

过去,我使用 LayoutAnimation.scaleXY 以非常高的帧速率对 Viewflex 进行动画处理。现在,我想使用 Animated 来制作 flex 动画并实现类似的高帧速率。

我知道我无法使用 useNativeDriver: true 来制作 flex 动画。

LayoutAnimation 是否始终以 native 方式运行动画?如果是这样,它如何运行 flex 动画,而使用 useNativeDriver: trueAnimated 却不能运行?

有办法解决这个问题吗?我想与许多其他动画并行运行我的 flex 动画(例如 opacitytranslatescale)如果没有 useNativeDriver: true,动画就会出现 Not Acceptable 断断续续的情况。

附注我的问题涉及 flex,但是 height 和/或 width 是否有任何显着差异?

最佳答案

根据this article ,“LayoutAnimation 的工作原理是通过唯一的键来识别 View ,计算它们的预期位置,并依赖底层 native 框架(iOS 上的 CoreAnimation)来动画更改。”,因此显然 LayoutAnimation 始终在 native 运行动画.

Apple docs ,有两个动画框架,UIKit 和 Core Animation(Android 可能类似),Core Animation 比 UIKit 更强大。

因此,如果我不得不猜测,LayoutAnimation 可以对 flex 进行动画处理,而 Animated 则不能,因为 LayoutAnimation 使用核心动画而 Animated 使用 UIKit。

flex 与高度/宽度不同,因为 flex 始终是父容器的一小部分(例如两个 View 具有 flex: 1 包裹在父 View 内,将分别占用 flexDirection 方向长度的 1/2)。

关于React-Native:LayoutAnimation 和 useNativeDriver:对于 Flex 为 true,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52044503/

相关文章:

javascript - 将 native 动画化为一个圆圈的多个 View

reactjs - 错误: Attempted to assign to read only property on using Animated react native

javascript - React Native Animated - 以按下为中心展开圆圈

android - 如何以适当的方式缩放 View/ViewGroup - 动 Canvas 局?

javascript - React-Native Flatlist 会在状态发生变化时重新渲染图像

javascript - 获取数据后设置状态的 react 问题

android - 如何在 RecyclerView 中使用 GridLayoutAnimation?

javascript - 是否有 LayoutAnimation.Types 和 LayoutAnimation.Properties 的可用选项列表?

javascript - React Native 0.62.0 构建在 Xcode 13.1 上失败

javascript - 在带有颜色的容器内创建一个不透明度为 "hole"- css on react native(QR 扫描仪的布局)