Lynx 提供了丰富的动效功能,使得开发者能够在 Lynx 中构建出更加现代、流畅且易于理解的用户界面。利用这些动效功能,可以打造出绚丽的过渡效果、自然的动效反馈,从而提升用户体验。
如果你需要对布局或样式在发生变化时平滑地应用新的属性值,可以使用过渡动画。
过渡动画提供了一种在更改 CSS 属性时控制动画速度的方法。与属性更改立即生效不同,你可以让属性的更改在一段时间内逐渐发生。例如,当你将一个元件的颜色从白色变为黑色时,通常该更改是瞬间完成的。而启用过渡动画后,变化将在一个符合加速曲线的时间间隔内发生,这一切都可以进行自定义。
过渡动画具有自动触发、非重复播放、简单易用的特点,可以通过复合 transition
来定义动画属性和时长,也可以使用单条形式的 transition-property
和 transition-duration
等来指定。
你可以使用过渡效果为列表中一个列表项添加从收起到展开的动画:
如果你需要多组样式配置按序列过渡的效果,可以使用关键帧动画。
关键帧动画通过 CSS 中的 @keyframes
规则定义,指定动画各个阶段的样式变化;并使用 animation
属性可以将定义好的动画应用到元件上,并设置动画名称、持续时间、延迟、播放次数等参数。
关键帧动画相较过渡动画更为灵活和可控,允许你指定过程以及更细粒度的时间曲线,可以在 CSS 中定义 @keyframes
,然后通过复合 animation
属性来指定,也可以使用单条形式的 animation-name
、animation-duration
等属性进行定义。
通过关键帧动画,我们可以实现一个边框旋转的效果。
通过关键帧动画,我们可以为元件的运动添加符合弹簧物理效果的动画。
此外,我们提供的 animate api 扩展了 CSS 关键帧动画的应用范围,使你能够在 JavaScript 代码中更加灵活和动态地创建和控制动画。通过 animate 开发者能够在运行时根据交互或逻辑条件动态生成和修改动画,为用户提供更加生动和互动的体验。
通过使用 animate api,为原件增加一个可以实时变化速率的动效。