隐藏侧边栏

过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数

难题

给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的

以纯技术的角度来看,回弹效果是指当一个过渡达到最终值时,往回到一点,然后再次回到最终值,如此往复一次或者多次,并逐渐收敛,最终稳定在最终值。有相当的多JavaScript类库可以创建动画,且内置回弹效果等其他缓动效果。但是眼下,我们其实已经不需要借助脚本来实现过渡和动画了。不过,在CSS中实现回弹效果的最佳方式是什么呢?

弹跳效果

弹跳动画

我们的第一感觉可能就是使用css动画,并且设置如下关键帧:

@keyframes bounce{
    60%,80%,to{transform:translateY(350px);}
    70%{transform:translateY(250px);}
    90%{transform:translateY(300px);}
}

相信我们都做过这样的事,但是我们跑一遍这个动画,会发现它显示的及其不真实,主要原因在于,每当这个小球方向改变时,她得移动过程都是持续加速的,这看起来很不自然。原因其实就是因为它的调速函数在关键帧的衔接都是一样的

所有的过渡和动画之间都是跟一条曲线有关的,这条曲线指定了动画过程在整段时间中是如何推进的

如果不指定调速函数,就是得到一个默认值。但是这个默认值并不是我们想象中的匀速效果,而是:

默认值

注意,当时间进行到一半时,这个过渡已经推进到80%.

说到调速函数,我们很自然联系到了css内置的缓动曲线和贝塞尔曲线。

不论是在animation/transition简写属性中,还是在animation-timing-function/transition-timing-function展开属性中,你都可以把这个默认的调速函数显示指定ease关键字。除了ease外,还有四种内置的缓动曲线,你可以借助他们来改变动画的推进方式

ease-out

ease-in

ease-in-out

linear

从上面四个图中,我们很直观的看出,ease-outease-in的反向版本。而这一对组合正是实现回弹效果所需要的:每当小球的运动方向相反时,我们希望调速函数也是相反的。我们希望小球下落是加速的(ease-out),而弹起向上是减速的(ease-in):

@keyframes bounce{
    60%,80%,to{
        transform:translateY(400px);
        animation-timing-function:ease-out;
    }
    70%{transform:translateY(300px);}
    90%{transform:translateY(360px);}
}
.ball{
    animation:bounce 3s ease-in;
}

虽然我们改动不大,但是已经发现回弹效果变得真实起来。不过显然这五种内置的缓动曲线是不够用的,假如我们这个回弹效果是用来模拟自由落体的,那么我们需要一个更高的加速度和ease的反向版本,又如何得到呢?

其实所有的这五种曲线都是通过(三次)贝塞尔曲线来指定的,而CSS的调速函数都是只有一个片段的贝塞尔曲线,每个函数也只有两个控制锚点,CSS就提供了一个cubic-bezier()函数,允许我们指定自定义调速函数。他接受四个参数,分别是两个控制锚点的坐标值,
cubic-bezier(x1,y1,x2,y2),曲线的两个端点固定在(0,0)和(1,1)之间,前者是整个过渡的起点(时间进度0%,动画进度0%)而后者是整个过渡的终点(时间进度100%,动画进度100%)。

举例来说,ease等同于cubic-bezier(.25,.1,.25,1),因此它的反向版本就是cubic-bezier(.1,.25,1,.25)

@keyframes bounce{
    60%,80%,to{
        transform:translateY(400px);
        animation-timing-function:ease;
    }
    70%{
        transform:translateY(300PX);
    }
    90%{
        transform:translateY(160px);
    }
}

.ball{
    animation:bounce 3s cubic-bezier(.1,.25,1,.25);
}

codepen中查看效果

See the Pen css-animation-easing by okaychen (@okaychen) on CodePen.

我们可以借助cubic-bezier.com的图形化工具,进行反复尝试和优化,从而进一步改写这个回弹动画.

最后

经过以上这些知识的学习储备和练习,相信我们已经可以做出很棒的弹跳动画了.
我们在文章开始放了一个小球弹跳的gif图效果,那么就让我们真真正正的动手来写一下吧!

codepen中查看效果

See the Pen css-animation-easing-practice by okaychen (@okaychen) on CodePen.

弹性过渡

假设我们有一个文本输入框,每当它被聚焦时,都需要展示一个提示框
我们有如下结构:

    <label>
        Your username:<input id="username" />
        <span class="callout">Only letters,numbers,usrescore(_) and hyphens (-) allowed!</span>
    </label>

每当用户聚焦这个文本输入框时,都会有一个半秒钟的过渡,可能我们会完成这样的代码

input:not(:focus) + .callout{
    transform:scale(0);
}
.callout{
    transition:.5s transform;
    transition-origin:1.4em -.4em;
}

这个过渡没有任何问题,但是我们希望它在结尾时能在夸张一点话,显得更加自然生动,我们可能会把这个过渡改为一个动画,然后用上面提到的缓动曲线

@keyframes elastic-grow{
    from{transform:scale(0);}
    70% {
        transform:scale(1.1);
        animation-timing-function:cubic-bezier(.1,.25,1,.25);   /*反向的ease*/
    }
}

input:not(:focus) + .callout{ transform:scale(0); }

input:focus + .callout{ animation:elastic-grow .5s; }

.callout{ transform-origin:1.4em -.4em; }

添加了这个动画之后,确实发挥了作用。不过这里我们其实只是需要一个过渡而已,而我们本质上却使用了一个动画,显得有些大材小用,有一种杀鸡用牛刀的感觉,我们如何只用过渡完成这个效果呢?

这里我们就用到了上面说起的调速函数cubic-bezier(),在这个例子中,我们希望调速函数先到达110%的程度(相当于scale(1.1)),然后在过渡回100%,我们把控制锚点向上移,

cubic-bezier(.25,.1,.3,1.5)

这个自定义调速函数在垂直坐标上已经超出0~1的区间,最终又回到1,在70%的时间点到达了110%的变形程度的高峰,然后继续用剩下30%的时间回到它的最终值

整个过渡的推进,非常接近前面的动画方案,但他仅需要一行代码就可以实现整个效果

input:not(:focus) + .callout{ transform:scale(0) }

.callout{
    transform-origin:1.4em -.4em;
    transition:.5s cubic-bezier(.25,.1,.3,1.5);
}

cubic-bezier(.25,.1,.3,1.5)

but,wait...当提示框收缩时,左下角出现的是什么?其实,当我们把焦点从输入框切出去的时候,所触发的过渡会以scale(1)作为起始值,并以scale(0)作为最终值,这个过渡仍然会在350ms后到达110%的变形程度。只不过在这里,110%的变形程度的解析结果并不是scale(1.1),而是scale(-0.1)

我们可以定义关闭状态的css规则(假如我们指定普通的ease调速函数)把当前的调速函数覆盖掉

input:not(:focus) + .callout{
    transform:scale(0);
    transition-timing-function:ease;   /*覆盖cubic-bezier*/
}

.callout{
    transform-origin:1.4em -.4em;
    transition:.5s cubic-bezier(.25,.1,.3,1.5);
}

再试一试,发现已经关闭提示框已经恢复到我们设置cubic-bezier()之前的样子了,

但是其实我们仔细观察发现另一个问题:提示框的关闭动作明显要迟钝一些。我们细细想来发现,在提示框展开过程中,当时间为50%(250ms)时,它就已经到达100%的尺寸效果了。但是在收缩过程中,从0%~100%的变化会花费我们为过渡所指定的素有时间(500ms),因此感觉会慢上一般

然后我们会想到同时覆盖过渡的持续时间:可以用transition-duration这一属性,也可以用transition这个简写属性来覆盖所有值,如果选择后者的话就不需要指定ease了,因为他本来就是transition的初始值:

input:not(:focus) + .callout{
    transform:scale(0);
    transition:.25s;
}

.callout{
    transform-origin:1.4em -.4em;
    transition:.5s cubic-bezier(.25,.1,.3,1.5);
}

codepen中查看效果

See the Pen css-animation-task by okaychen (@okaychen) on CodePen.

最后

虽然弹性过渡在很多过渡中都可以收到不错的效果,但是某些时候他产生的效果可能相当糟糕。典型的反面案例出现在对颜色属性的弹性过渡中。尽管颜色发生弹性过渡可能非常有趣,但这种效果在UI场景中通常是不合适的.

为了避免不小心对颜色设置了弹性过渡,可以尝试把过渡的作用范围限制在某几种特定的属性上,transition不指定时,transition-property就会得到它的初始值:all,这意味着只要是过渡的属性都会参与过渡。我们可以在transition中设置transform

input:not(:focus){
    transform:scale(0);
    transition:.25s transform;
}

.callout{
    transition-origin:1.4em -.4em;
    transform:.5s cubic-bezier(.25,.1,.3,1.5) transform;
}

参考资料

posted @ 2017-12-12 16:15  OkayChen  阅读(10334)  评论(1编辑  收藏  举报