HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

运动曲线提升CSS动画效果(下)

2016-9-7 10:39| 发布者: Hyukoh| 查看: 782| 评论: 0|原作者: 鞠大宝|来自: 众成翻译

摘要: 先有UI动画,然后才会有好的UI动画。好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅、很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板。如果你经常逛Dribbble或者 UpLabs这类网站的话,你 ...

  如果我们将它的速度增加至3倍呢?Boxy只需要三分之一的时间就可以走完全程(也就是1/3秒)。

  三倍速度时的坐标图 (点开看大图)


  嗯,看出什么了吗?我们可以看到,随着速度的增长,坐标图发生变化,这条直线与时间横轴间的夹角也在不断增加。

  那好,我们继续将Boxy的速度减半。将它的速度减半意味着Boxy只能在1秒钟内走过500像素(也就是刚刚距离的一半)。然后让我们在坐标图中画出来。

  一半速度时的坐标图 (点开看大图)


  我们将Boxy的速度再放慢一些,让它以原本速度的三分之一运动。这样的话,1秒钟内Boxy就只能走过一开始走过路程的三分之一。

  三分之一速度时的坐标图 (点开看大图)

  看出规律了吗?我们增加Boxy的速度时,线条越来越陡峭;而减慢Boxy的速度时,线条又变得平滑。

  速度增加时直线变陡,减慢时直线变得平缓。 (点开看大图)

  这个结论很重要,因为对一条很陡的直线而言,也就是速度更快时,一小段时间内Boxy走过的路程会变化很多。

  对线段更陡的表而言,小段时间相应会在距离上有很大的改变。 (点开看大图)

  对线段更陡的表而言,小段时间相应会在距离上有很大的改变。(点开看大图)

  另一方面,对于坡度不那么大的直线,就算过去很长时间,距离上也只会变化一点点,这是运动速度比较慢的情况。

  坡度比较平缓时坐标图中时间和距离的变化关系 (点开看大图)

  坡度比较平缓时,坐标图中时间和距离的变化关系 (点开看大图)


  以上我们所做的只是改变了Boxy的运动速度,它仍然是在做直线运动。但是,我们以新的方式弄清楚了距离和时间是如何改变速度的,接下来就可以绘制一张表来让Boxy以一种自然、真实的方式运动。


  让我们一步一个脚印。首先,现实生活中的物体都是慢慢开始运动,并且逐渐增加运动速度的。所以,我们来模拟这一过程。


  仔细观察下图,你会发现起点和终点位置没有变。因为我们不想改变动画的持续时间,也不想改变Boxy的运动距离。

  私人定制的运动曲线 (点开看大图)


  Boxy如果照着上面的这张图运动,前0.25秒它的速度会比较慢,因为0秒到0.25秒之间这条线比较平缓,接着它会突然增速(因为0.25秒之后线段突然变陡)。 但是我们需要将这一转变变得平滑,因为我们不想要任何转角——毕竟,这是一条运动曲线。接下来就将这个急转弯换成一条曲线。

  私人定制的运动曲线 (点开看大图)

  留心Boxy从静止状态到逐渐增速过程中平滑的转变。

  按照上面那条运动曲线运动的Boxy (点开看大图)

  很好!实际生活中,运动的物体停下来之前速度也是逐渐减慢的。让我们修改坐标图来适应这一变化。类似的,我们会在想要Boxy慢下来的地方增加一个点。就加在0.6秒处怎么样?我已经将这个转折点换成曲线了。

  运动曲线终极版 (点开看大图)

  看Boxy动起来! 现在看上去自然了很多,不是吗?

  按照终极版运动曲线运动的Boxy (点开看大图)

  我们用来代替转角的曲线实际上是由很多短线段组成的;并且正如你已经知道的,表中的线段越陡峭,Boxy的运动速度就越快,线段越平缓,Boxy的速度就越慢。看坐标图的左边部分,会发现组成曲线的小线段坡度越来越大,导致速度逐渐增加;相应地,右边部分的线段越来越平缓,所以速度才会越来越慢。

  一条曲线只是很多的短线段的集合 (点开看大图)

  就以上我们所知道的,想要弄清楚运动曲线容易了很多。接下来我们来看一些例子。

  (点开看大图)

  例 1 (点开看大图)

  (点开看大图)

  例 2 (点开看大图)

  (点开看大图)

  例 3 (点开看大图)

  在UI动画中使用运动曲线

  接下来你需要让一个UI元素动起来,可以将运动曲线为你所用。无论是一个滑杆儿、一个窗口模型,还是一个下拉菜单,增加适量的动画效果让它们看上去平滑自然可以大幅度提高你的用户界面质量。它会让用户对你的界面感觉良好。拿下面的滑出式菜单举个例子:


  这是 Nash Vail (@nashvail)在CodePen上创建的Pen nJial。


  点击菜单栏会从左边跳出菜单,但是这个出现的动作显得很生硬。CSS表的第51行将这个动画的transition-timing-function 设置为linear。这个动画效果显然可以优化。让我们使用cubic-bezier 来创建一个私人定制的定时功能。


  如果你读到了这里,我猜你一定是个设计师或者开发人员,又或者两者兼是,因此,你对三次贝塞尔曲线一定不会感到陌生,很有可能至少遇到过1次。贝塞尔曲线的创造就是一个奇迹。 它们一开始是被用于计算机图形学来绘制形状,并且被用在Sketch和Adobe Illustrator这类工具中来绘制矢量图形。三次Bezier曲线使用如此广泛的原因是它们用起来非常方便:我们只需要改变4个不同点的位置,然后创造我们需要的曲线。


  我们一般都会知道动画中物体的起点和终点位置,所以可以轻易锁定这两个点。然后就只要找到我们需要改变速度的两点位置。前两个固定的点被称为锚点,剩下的两个又叫控制点。

  截取的贝塞尔曲线的一部分。 (点开看大图)

  正如你所知,cubic-bezier 需要四个参数(n1, n2, n3, n4)来定制 transition-timing-function。这四个参数代表的是两个控制点的位置: n1, n2表示第一个控制点的x、y坐标点,n3, n4则表示第二个控制点的x、y坐标点。改变控制点的位置会使曲线的形状发生变化,n1, n2, n3, n4 全部或部分改变时我们的动画效果也会不一样。 举个例子,下面是传入参数为cubic-bezier(.14, .78, .89, .35)时的结果:

  传入参数为(.14, .78, .89, .35) 的三次方贝塞尔曲线。(点开看大图)


  这些隐藏在看似简单的曲线背后的数学知识着实令人着迷。

  好了,好了,让我们回想一下初衷:我们想借助三次方贝塞尔曲线来定制过渡时间功能的函数。我们需要的是能够快速滑出,然后速度逐渐慢下来,最后停止的菜单:

  调整后的三次贝塞尔曲线。 (点开看大图)


  看上去很不错。这个动画会开始很快然后逐渐慢下来,而不是全程都以一个恒定的速度移动。我只是简单地从上文中复制cubic-bezier(.05, .69, .14, 1) 然后拿它替换了linear。

  这是Nash Vail (@nashvail)在CodePen发布的Pen nJial。


  看到差别了吧?第二个版本看上去自然了很多,显得更有吸引力。试想,如果你的页面中每个动画都有一个自然定时功能,那将是有多赞啊?


  由此可见,运动曲线一点都不复杂,它们理解、使用起来都非常简单。借助它们,你可以将你的UI页面提升一个档次。


  我希望你已经明白了运动曲线的工作原理。如果你在使用运动曲线的过程中遇到了一些问题,或者你还根本没有用过它们,目前对你而言,让它们照你的意愿创造漂亮的动画,应该都是很简单的。毕竟,动画效果至关重要。


更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-18 03:13

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部