选择合适的动画缓动函数

最近在写要兼容IE6的幻灯组件(感兴趣的点这里)。为了让幻灯的切换效果更舒服,就研究了下动画的缓动函数。

缓动函数定义

缓动函数指定动画效果在执行时的速度,使其看起来更加真实。

为什么要使用缓动函数

在平常的生活中,物体在运动的过程中,总是时而加速,时而减速。因此我们的大脑习惯了这种物体的这种自然的运动方式。所以在应用中加入这种自然的运动方式,会让用户觉得很舒服。

常见的缓动函数

Linear

匀速运动

linear.png

Ease

慢速开始,然后变快,然后慢速结束

ease.png

Ease-out

先快后慢

ease-out.png

Ease-in

先慢后快

ease-in.png

Ease-in-out

以慢速开始和结束

ease-in-out.png

选择合适的

大部分情况下,都可以用easeOut。

不要过多的使用bounces和elastic效果,因为这两个效果往往使网站变得不和谐。在比较活泼的网站可以使用bounces效果。但也要适量。

缓动函数的持续时间参考

  • Ease-outs 或 Ease-ins: 200到500毫秒
  • Bounce 或 elastic effects:800到1200毫秒

CSS3支持的缓动函数(transition-timing-function)类型

ease,ease-in-out,ease-in,ease-out,linear

参考

工具

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器之心

OpenCV 3.0之后三年半,OpenCV 4.0出炉

OpenCV 是英特尔开源的跨平台计算机视觉库。也就是说,它是一套包含从图像预处理到预训练模型调用等大量视觉 API 的库,并可以处理图像识别、目标检测、图像分...

951
来自专栏机器之心

KDD2018 | 电商搜索场景中的强化排序学习:形式化、理论分析以及应用

(1)对电商搜索场景中的多步排序问题进行形式化描述,定义搜索会话马尔科夫决策过程问题模型(Search Session Markov Decision Proc...

2092
来自专栏编程

基于micropython的数字滤波器

刚参加了昨天的硕士研究生考试,专业课考的信号与系统,报考学校今年出题出的有点偏,不是题型偏而是考察知识点有明显的偏重,简单说考纲里所罗列的考点最多只考了百分之三...

2676
来自专栏CSDN技术头条

AI 可能真的要代替插画师了……

事先声明,这篇文章的标题绝不是在耸人听闻。事情的起因是前段时间在朋友圈看到同学在转发一篇论文,名字叫《Create Anime Characters with ...

2068
来自专栏机器学习算法与Python学习

KNN算法实战-改进约会网站配对效果

kNN实战之改进约会网站配对效果 引言 简单的说,KNN算法采用测量不同特征值之间的距离方法进行分类。工作原理:存在一个样本数据集,即训练数据集,并且样本集中每...

55010
来自专栏AI科技评论

开发 | 不用写代码就能实现深度学习?手把手教你用英伟达 DIGITS 解决图像分类问题

引言 2006年,机器学习界泰斗Hinton,在Science上发表了一篇使用深度神经网络进行维数约简的论文 ,自此,神经网络再次走进人们的视野,进而引发了...

4429
来自专栏听雨堂

北京54坐标到西安80坐标转换小结

1、北京54和西安80是两种不同的大地基准面,不同的参考椭球体,因而两种地图下,同一个点的坐标是不同的,无论是三度带六度带坐标还是经纬度坐标都是不同的。 2...

2437
来自专栏机器之心

教程 | 强化学习训练Chrome小恐龙Dino Run:最高超过4000分

1.1K3
来自专栏ACM小冰成长之路

51Nod-1208-Stars in Your Window

ACM模版 描述 ? 题解 线段树 + 扫描线。 把星星转化为矩形,把矩形转化成线段,然后求哪一条线段权值最大。具体的思路可以看看 光速小子0511’s blo...

2046
来自专栏CDA数据分析师

AI可能真的要代替插画师了……

事先声明,这篇文章的标题绝不是在耸人听闻。事情的起因是今天早上在朋友圈看到同学在转发一篇论文,名字叫《Create Anime Characters with ...

24110

扫码关注云+社区