https://takao.blog/zh/tags/animation/Recent content in Animation on Commentary of TakaoHugo -- gohugo.iozhCommentary of TakaoWed, 15 Jul 2026 22:01:08 +0900https://takao.blog/zh/web/css-view-transitions-single-page-api/Sat, 05 Apr 2025 00:00:00 +0900https://takao.blog/zh/web/css-view-transitions-single-page-api/<img src="https://takao.blog/img/thumbnail/css-view-transitions-single-page-api-zh.png" alt="Featured image of post 使用视图转换 API 实现平滑页面转换" /><h2 id="介绍">介绍 </h2><p>提供动态页面转换是提升现代 Web 应用程序整体用户体验 (UX) 的关键因素。</p> <p>从历史上看，为了在页面导航之间平滑地变形或淡出元素，开发人员必须导入大量 JavaScript 库，例如 Framer Motion 或 GS​​AP。这些库需要深度挂钩渲染生命周期，以在对旧 DOM 节点进行动画处理时延迟卸载。</p>https://takao.blog/zh/web/css-scroll-driven-animations/Tue, 25 Jun 2024 00:00:00 +0900https://takao.blog/zh/web/css-scroll-driven-animations/<img src="https://takao.blog/img/thumbnail/css-scroll-driven-animations-zh.png" alt="Featured image of post CSS 滚动驱动的动画：基于滚动的效果的未来" /><h2 id="javascript-滚动事件的问题">JavaScript 滚动事件的问题 </h2><p>传统上，基于滚动的效果依赖于在主线程上运行的 JavaScript 滚动事件侦听器，这通常会导致卡顿、丢帧和糟糕的用户体验。即使有被动侦听器和 <code>requestAnimationFrame</code> 限制，布局抖动仍然是一个持续存在的问题。 CSS 滚动驱动动画通过将滚动跟踪移动到合成器线程来解决这个问题，从而实现流畅的 60fps 效果，而无需任何 JavaScript 开销。</p>