人机交互：页面过渡动画和内容呈现
Innei发表于 2024-04-25 14:24:17
该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：$https://innei.in/posts/design/page-transition-animation-and-lcp
现代 Web 中，在页面之间跳转对内容增加动画并不少见。
比如，我在「手记」中在页面中切换中加入了纸张划出的效果。
页面动画的时间控制在 500ms 之内，既不会感觉很慢也不会很快。
因为我需要使用 Spring 动画去拟合一个更加真实的动画，使用了 Framer Motion 去制作动画。
页面过度动画非常好用，有效避免了切换内容时的突兀感。
很快我注意到，如果过渡效果出现在页面第一次进入时，会变得非常奇怪。也许这个动画应该消失，因为用户第一次进入页面也许只想更快的看到内容，而不是动画，和动画之后才会呈现的完整内容。
下面的例子也许更加明显感觉到缓慢。尤其是如果 JS 加载缓慢，这个动画效果还会推迟的更久，而此期间你将看不到任何内容，这个体验是非常糟糕的。
现在我们对其优化，这样是不是好多了。
嗯，看上去快多了，也有效提升了 LCP。
动画整挺好，还是用在合适的地方最好。滥用的动画也许只会让它看起来更慢。
资源
关于动画，收集了以下的参考资源：