- Published on
本文深度剖析了 requestAnimationFrame (rAF) 作为创建高性能 JavaScript 动画的权威 API。内容从浏览器渲染帧的生命周期入手，系统性地阐述了传统 setInterval 动画在时序上的缺陷，并详细解析了 rAF 如何通过与渲染管线同步来保证动画的流畅性与高效性，最后提供了一个构建平滑、自适应动画循环的最佳实践。
Animation
All Posts
- Frontend (50)
- JavaScript (29)
- Performance (25)
- React (21)
- CSS (17)
- Network (12)
- Security (12)
- Browser (11)
- StateManagement (7)
- ReactNative (7)
- TailwindCSS (6)
- Fiber (6)
- ReactInternals (6)
- MobileDevelopment (6)
- ReactHooks (5)
- Reconciliation (5)
- Accessibility (4)
- Layout (4)
- FrontendBuildTools (4)
- FrontendArchitecture (4)
- Vite (4)
- HTTP (3)
- Flexbox (3)
- PseudoClass (3)
- Forms (3)
- EventLoop (3)
- TCP (3)
- ConcurrentRendering (3)
- UtilityFirst (2)
- Asynchronous (2)
- Promise (2)
- ECMAScript (2)
- Object (2)
- useActionState (2)
Animation (2)
- IP (2)
- TransportLayer (2)
- useEffect (2)
- ReactLazy (2)
- Suspense (2)
- JavaScriptModules (2)
- GarbageCollection (1)
- MemoryManagement (1)
- NodeJS (1)
- V8 (1)
- CSSSprites (1)
- FrontendOptimization (1)
- display (1)
- opacity (1)
- visibility (1)
- flex-basis (1)
- flex-grow (1)
- flex-shrink (1)
- focus (1)
- focus-visible (1)
- focus-within (1)
- CSSArchitecture (1)
- StackingContext (1)
- z-index (1)
- group (1)
- has (1)
- peer (1)
- DarkMode (1)
- border (1)
- box-shadow (1)
- outline (1)
- ring (1)
- AbortController (1)
- fetch (1)
- WebAPI (1)
- Function (1)
- LexicalEnvironment (1)
- Debounce (1)
- EventHandling (1)
- Throttle (1)
- defineProperty (1)
- Metaprogramming (1)
- ObjectFreeze (1)
- PropertyDescriptor (1)
- Array (1)
- BigO (1)
- DataStructures (1)
- toStringTag (1)
- TypeChecking (1)
- Polyfill (1)
- Rendering (1)
- requestAnimationFrame (1)
- requestIdleCallback (1)
- Scheduler (1)
- HTML (1)
- QUIC (1)
- API (1)
- DELETE (1)
- GET (1)
- PATCH (1)
- POST (1)
- PUT (1)
- REST (1)
- Cryptography (1)
- HTTPS (1)
- SSL (1)
- TLS (1)
- ThreeWayHandshake (1)
- UDP (1)
- createPortal (1)
- DOM (1)
- Modal (1)
- ReactRouter (1)
- DataNormalization (1)
- Redux (1)
- Caching (1)
- DataFetching (1)
- ServerState (1)
- TanstackQuery (1)
- EventDriven (1)
- StateMachines (1)
- useReducer (1)
- Hydration (1)
- SSR (1)
- CodeSplitting (1)
- nuqs (1)
- URLState (1)
- FormData (1)
- ProgressiveEnhancement (1)
- ServerActions (1)
- Zod (1)
- Composition (1)
- Memoization (1)
- useEffectEvent (1)
- InitialMount (1)
- Keys (1)
- ListRendering (1)
- Context (1)
- use (1)
- useContext (1)
- Lanes (1)
- useDeferredValue (1)
- useTransition (1)
- useSyncExternalStore (1)
- useState (1)
- ExpoRouter (1)
- ReactNavigation (1)
- Routing (1)
- Components (1)
- Styling (1)
- AsyncStorage (1)
- DataPersistence (1)
- LayoutAnimation (1)
- ReactNativeReanimated (1)
- UI (1)
- FlatList (1)
- ScrollView (1)
- Virtualization (1)
- Expo (1)
- Haptics (1)
- PushNotifications (1)
- Keyboard (1)
- TextInput (1)
- CSSModules (1)
- PostCSS (1)
- Sass (1)
- Bundler (1)
- esbuild (1)
- Rollup (1)
- GlobImport (1)
- HMR (1)
- TreeShaking (1)
- ImageOptimization (1)
- StaticAssets (1)
- Published on
本文深度剖析了 React Native 的 LayoutAnimation API，阐述了其作为一种便捷的布局动画声明机制的工作原理。笔记详细介绍了 configureNext 的用法和动画预设，并重点分析了其功能局限性，以及在 Android 平台上因实现差异而导致的兼容性与稳定性问题，最终将其与 react-native-reanimated 等现代动画库进行了对比。