在网站和应用中，动画是让用户享受最佳体验的重要组成部分之一，而所选动画曲线对用户感知的影响是不可忽略的。然而，开发者通常没有对此问题足够的认识和理解，从而通常会选择默认的简单动画，浪费了一个机会，以获取更好的用户体验。
一、 何为cubic-bezier曲线？
在CSS中，提供了一种曲线函数cubic-bezier（），该曲线由四个值组成，这四个值控制曲线的弯曲程度。实际上，cubic-bezier（）函数描述了一个三次贝塞尔曲线，通过两个锚点和两个控制点定义。锚点是曲线的起点和终点，而控制点会将曲线弯曲并确定它的形状，因此，定义了四个值（P0，P1，P2，P3）以及两个锚点之后即可确定cubic-bezier曲线。
.box {
animation: move 2s cubic-bezier(0.42,-0.25,0.99,0.67)
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(500px);
}
}
二、 如何使用cubic-bezier曲线提高用户体验？
1、弹性动画：要制作一种具有类似于弹簧的效果的动画，可以调整曲线的P1和P2的值，并控制它们之间的曲线峰度。
.box {
animation: move 1.8s cubic-bezier(0.2, 0.84, 0.75, 1.1);
}
@keyframes move {
from {
transform: translateY(0);
}
to {
transform: translateY(200px);
}
}
2、自然过渡：当我们要制作视觉效果更自然的动画时，可以使用Safari和Chrome浏览器的默认值，即cubic-bezier（0.25,0.1,0.25,1.0）。
.box1 {
animation: move1 2s cubic-bezier(0.25,0.1,0.25,1.0);
}
@keyframes move1 {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
3、趣味性动画：我们可以通过修改曲线的控制点，制作出具有趣味性的动画效果， 如下例所示。
.box2 {
animation: move2 3s cubic-bezier(.31,1.32,.72,.27)
}
@keyframes move2 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
三、cubic-bezier曲线的可视化工具
使用一些开源的在线工具，可轻松制作满足特定动画需要的cubic-bezier函数。
1、 Cubic-Bezier
2、 Ceaser
四、结论
cubic-bezier曲线是一个毫无疑问的有价值的工具，可以差异化选择动画曲线，从而增强用户体验。除了基础的应用，还可以考虑通过使用开源工具获得更高级别的优化。尽管如此，我们需要根据场景自行评估各种变体，以确保用户的体验和目标对话。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/196961.html
微信扫一扫 
支付宝扫一扫 