过渡与动画 - 缓动效果之弹跳动画

过渡与动画 – 缓动效果之弹跳动画

2017-12-10 21:35 by OkayChen, … 阅读, … 评论, 收藏, 编辑

难题

给过渡和动画加上缓动效果是一种常见的手法（比如具有回弹效果的过渡过程）是一种流行的表现手法，可以让界面显得更加生动和真实：在现实世界中，物体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-out是ease-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);
}