滑动图像是一种常见的网页设计元素,许多开发人员尽可能使用插件来处理。例如,对于 WordPress 项目,有相当多的滑块插件可以轻松实现;其中一些甚至具有搜索引擎优化属性。然而,有时客户可能需要一种非常特定类型的幻灯片动画,此时设计师应该熟悉三次贝塞尔时序和 CSS 网格。
由三次贝塞尔控制的计时函数本质上应用了一个确定动画速度的数学函数。这是可以用来使滑动动作更平滑的功能,它们可以应用在动画的开始和结束处。该数字介于 0.0 和 1.0 之间,较高的值是动画的最终状态。
滑动过渡的速率可以表示为:
三次贝塞尔曲线(0.155, 0.80, 0.40, 1)
在上面的示例中,您可以看到幻灯片在加速到接近初始速度的八倍之前是如何缓慢开始的。第三个值会降低最终状态 1 之前的速度。这称为缓入缓出。幻灯片动画最重要的方面是让它们轻轻地安定下来;这给出了在水平面上平滑滚动的效果,但是如果一开始太慢,缓出可能看起来很尴尬或强制,因为静止状态可能看起来很突然。
在 CodePen 上,最好的平滑滑动动画之一可以在 Animate CSS Grid 下找到。在 GitHub 上,查找 React.JS 翻转工具包。这些图书馆完成的是根据访问者采取的行动进行布局的转换。例如,您可能有一个带有三个选项卡的顶部菜单栏,可以在悬停时滑动下拉菜单,而不是简单地通过鼠标单击或触摸手势来显示它们。