CSS过渡动画中的回弹(OverScroll)效果，一个函数就能让你的动效瞬间变得高大上 - 知乎

在产品的UI优化过程中， 前端工程师难免会碰到甲方这样的意见：

“你这页面太生硬了呀！”
“这软件我用起来像幻灯片。”
“这个页面我奶奶都能写出来。”（不是）
……

所以很多时候，主要负责页面逻辑功能处理的前端工程师都会因为页面不好看受批评（内心OS：我又不是UI开发！）。

由于CSS动画学习成本比较高，并且对于前端功能并上没有什么实质性的作用，导致大多数的前端工程师不会把重心放在动效的学习上，一般就用个过渡动画（transition）敷衍一下，最多写一些简单的关键帧（keyframes），其它的需求爱莫能助。

我今天教大家用一个函数就能实现的回弹动效，让整个页面“活”起来。

动图封面

UI动效中的抖动（bounce）

回弹动效的专业术语叫做OverScroll，我们在大多数优秀的软件和主流的操作系统都能看到这样的效果，在过渡动画的末尾加上抖动或者回弹处理，让画面看起来有一种由惯性带来的真实物体般的运动质感。

动图封面

手机操作系统中的回弹效果

那么如何在前端中实现这样的动效呢？我用一个移动的箱子作为例子。在正常的过渡动效中，使用最简单的transition动画就能让盒子移动起来。CSS代码：

transition: transform 1s linear;
transform: translateX(60vw);

但是动画效果十分的生硬，可以看下图:

动图封面

我们可以稍微加一点修饰，将transition的第三个参数转速曲线（timing-function）改成ease-in-out（平滑进平滑出），可以让它稍微有一点物体的质感。CSS代码：

transition: transform 1s ease-in-out;

动图封面

可以看到ease-in-out的曲线表现效果是先加速，后减速，比较符合物理场景。但是并没有体现出想要的惯性效果。

那为了那么一点的回弹效果，我们尝试换一种思路，通过关键帧去实现。把动效的动画逻辑拆分，然后在关键帧中调试出比较符合观感的动效。

CSS代码：

.over-scroll-animation{
    animation: overScroll 1s forwards ease-in-out;
}

@keyframes overScroll{
    0%{
        transform: translateX(0);
    }
    90%{
        transform: translateX(62vw);
    }
    100%{
        transform: translateX(60vw);
    }
}

动图

在关键帧中适当的过度移动，然后再回到预期的位置，搭配上ease-in-out的转速效果，是可以实现这样的回弹效果的。但是这样做会碰到一些问题：

1. 开发成本大。关键帧使用比较复杂，而且由于需要自己拆分动效逻辑，需要不断调试动效，使得调试过程比较艰难且费时。

2.只能适应单独的动画效果。比如还想加一个箱子的变大效果，就需要在每一个关键帧中重新调试参数大小。

那有没有一种方法，能够又轻松，又高质量地实现回弹动效呢？

有，在transition动画中使用自定义贝塞尔曲线。

先回顾一下上文中提到的transition-timing-function这个参数，在官方文档对它的解释是：

指定transition效果的转速曲线，可使用的值有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(_n_,_n_,_n_,_n_)。

我们在使用transition的过程中，几乎都是直接使用了官方封装好的转速曲线：linear、ease……却忽略了最底下这个cubic-bezier(n,n,n,n)参数，它就是著名的贝塞尔曲线函数。

必须要理解掌握的贝塞尔曲线（原创）​www.jianshu.com/p/0c9b4b681724

而文档中对与贝塞尔函数的描述是：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。对于贝塞尔函数稍微理解的小伙伴就会问：值是 0 至 1 之间的数值，那怎么回弹呢？这就是官方文档最误导广大开发者的地方。实际上，cubic-bezier 函数是可以用小于0的数值的。

我们用一个带负值的贝塞尔函数替代上文中的transition-timing-function看一下效果。CSS代码：

transition: transform 1s cubic-bezier(.62,-0.14,.62,1.25);

动图封面

同样出现了回弹效果

可以看到用贝塞尔曲线实现的动画效果更丝滑，更又真实物体的质感，这是由于贝塞尔函数本身的性质决定的。这里我十分建议大家通过贝塞尔曲线可视化

cubic-bezier.com​cubic-bezier.com/#0,0,1,1

去直观的体验贝塞尔曲线与动效之间的关系，有助于大家更好的理解和学习CSS的过渡动画原理。

上面动画效果中的贝塞尔曲线长这样：

cubic-bezier(.62,-0.14,.62,1.25)

当然我们可以手动调整曲线，实现更夸张的动画效果：

cubic-bezier(.56,-0.37,.78,1.66)

动图封面

盒子变得Q弹起来了

而且transition动画没有上文所述的缺点，我们在进行页面布局时适当的加一些回弹动画有时也能够取得意想不到的效果。

动图封面

丝滑的响应式过渡动画

好了本文对回弹效果动画的实现介绍就到这啦，是不是很简单，赶快自己动手去尝试一下吧。

文章转自摸鱼族APP

摸鱼族文章​www.chuangdao123.com/article/article.html?id=1001

原网址: 访问
创建于: 2023-07-28 17:47:56
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论