React spring 如何原生渲染?
How does react spring render natively?
react spring 带有一个 animated
功能,允许在本地修改组件而无需重新渲染组件。我发现动画组件有几个类似于 react native's animated components 的方法。两者之间有什么联系吗?或者像 .interpolate()
这样的概念对于动画库来说很常见吗?
该库最初是 Animated 的一个分支,在内部仍然有很多相似之处。 Christopher Chedeau 的 Animated 有一个专用于网络的存储库:https://github.com/animatedjs/animated 遗憾的是它不再维护了。
它的工作方式是通过 createAnimatedComponent(公开为 "animated")包装组件:https://github.com/react-spring/react-spring/blob/master/src/animated/createAnimatedComponent.tsx
这个高阶组件拦截样式和属性(它们不是原始值,而是自我更新 类)。它调用 "applyAnimatedValues" 写入 React 之外的目标。每个目标(dom、native、konva、three 等)都必须填写。例如,dom 如何应用这些道具:https://github.com/react-spring/react-spring/blob/master/src/targets/web/globals.ts#L82-L127
希望对您有所帮助!
react spring 带有一个 animated
功能,允许在本地修改组件而无需重新渲染组件。我发现动画组件有几个类似于 react native's animated components 的方法。两者之间有什么联系吗?或者像 .interpolate()
这样的概念对于动画库来说很常见吗?
该库最初是 Animated 的一个分支,在内部仍然有很多相似之处。 Christopher Chedeau 的 Animated 有一个专用于网络的存储库:https://github.com/animatedjs/animated 遗憾的是它不再维护了。
它的工作方式是通过 createAnimatedComponent(公开为 "animated")包装组件:https://github.com/react-spring/react-spring/blob/master/src/animated/createAnimatedComponent.tsx
这个高阶组件拦截样式和属性(它们不是原始值,而是自我更新 类)。它调用 "applyAnimatedValues" 写入 React 之外的目标。每个目标(dom、native、konva、three 等)都必须填写。例如,dom 如何应用这些道具:https://github.com/react-spring/react-spring/blob/master/src/targets/web/globals.ts#L82-L127
希望对您有所帮助!