java easing_[译] 动画中缓动（easing）的基础知识

自然界中没有东西是从一个点线性地移动到另一点。在现实中，事物在运动时可能加速或减速。我们的大脑习惯于期待这种运动，因此在做动画时，应利用此规律。自然的运动会让用户对你的应用感觉更舒服，从而产生更好的体验效果。

Tip:

缓动会让你的动画看起来更加自然

为UI元素选择缓出(ease-out)动画

避免缓入(ease-in)或者缓入缓出(ease-in-out)动画，除非你能让其保持简短；这种动画会让用户觉得反应迟钝

在经典的动画中，缓慢开始然后加速称为“慢入”(slow in)，开始很快然后减速称为“慢出”(slow out)，然而网上最常见的叫法是“缓入”(ease in)和“缓出”(ease out)。有时候两者结合叫做“缓入缓出”(ease in out)。缓动可以使动画不再那么生硬。

缓动的关键字

CSS transition和animation都能够让你去选择一种缓动类型来用于动画中。你可以使用影响动画缓动的关键字。你可以完全自定义你的缓动效果，这使得你能够更加自由的改善自己的应用。

下面是你能在CSS里用到的一些关键字：

linear

ease-in

ease-out

ease-in-out

你也可以使用steps关键字，它能让你创建具有步骤的变换，但上面列出的关键字都是最有用的，能够创造出自然的动画效果，这就是你所需要的。

线性动画

没有任何缓动效果的动画就是线性动画，线性变换的图如下：

随时间增长，值会等量增长。线性运动的物体看起来很像机器人不自然，这也是用户会觉得不自然的效果。总之你需要避免使用线性运动。

不管你用CSS还是JS来实现动画，你会发现总会有一个选项是linear的。如果用CSS来实现上述效果，代码如下：

transition: transform 500ms linear;

缓出(ease-out)动画

缓出导致动画开始时比线性运动要快，然后在快结束时减速

有很多种方法来实现缓出效果，最简单的就是CSS里的ease-out关键字了：

transition: transform 500ms ease-out;

缓出效果非常适合用户界面，因为在开始快速回让动画有反应快的感觉，结束时有自然的减速。

缓入(ease-in)动画

与缓出相反，缓入开始慢，结束快。

这种动画像很重的石头掉下来一样，开始很慢，然后快速撞击地面并迅速沉寂。

与缓出和线性动画类似，要想使用缓入动画，可以直接使用关键字：

transition: transform 500ms ease-in;

然而从交互的角度看，缓入会让人觉得有些不寻常，因为它在结尾很突然的沉寂。真实世界里的事物常常是减速，而不是突然停止。缓入还会让人感觉行动迟缓，让人对网站的响应速度产生不好的影响。

缓入缓出(ease-in-out)动画

缓入缓出与汽车的加速减速类似，使用恰当的时候，会比单独使用缓出有更好的效果。

需要注意的是，因为开始缓入会让动画有迟钝的感觉，所以缓入的时间不要太长，一般在300~500ms较为合适，其实很大程度上会根据项目来选择合适的数字。缓入缓出由于开始慢，中间加速，结束慢，所以会使得整个动画有非常强烈的对比，用户可能会感到比较满意。

设置缓入缓出动画可以使用ease-in-outCSS关键字：

transition: transform 500ms ease-in-out;

java easing_[译] 动画中缓动（easing）的基础知识相关推荐

4.QML动画——概念、动画应用方式和动画的缓动曲线
一.动画动画将应用于属性更改. 动画通过对属性值定义插值曲线,控制属性值从一个值到另一个值平滑过渡. Qt Quick中的所有动画均由同一计时器控制,因此动画是同步的. 这样可以提高动画的性能和视质 ...
11、《每周一点canvas动画》——缓动动画
本系列文章代码文件前面的章节我们介绍了许多基本的动画,在本节我们将使用这些基本的动画来创建一些高级动画.今天我们介绍的第一个高级动画叫做缓动动画(ease),也许在写css动画的时候已经接触过 ea ...
超详细的Java面试题总结（四）之JavaWeb基础知识总结
系列文章请查看: 超详细的Java面试题总结(一)之Java基础知识篇超详细的Java面试题总结(二)之Java基础知识篇超详细的Java面试题总结(三)之Java集合篇常见问题超详细的Java ...
《Java并发编程实践》学习笔记之一：基础知识
<Java并发编程实践>学习笔记之一:基础知识 1.程序与进程 1.1 程序与进程的概念 (1)程序:一组有序的静态指令,是一种静态概念: (2)进程:是一种活动,它是由一个动作序列组成 ...
Python 编程中常用的12种基础知识总结
Python 编程中常用的12 种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出 ...
（Java高级教程）第四章必备前端基础知识-第二节1：CSS概述和选择器
文章目录一:CSS概述 (1)概述 (2)语法规范 (3)CSS引入方式二:选择器 (1)基础选择器 ①:标签选择器 ②:类选择器 ③:id选择器 ④:通配符选择器总结 (2)复合选择器 ①:后 ...
python编程中常用的12种基础知识总结
python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...
python编程基础知识点总结_【转载】Python编程中常用的12种基础知识总结
Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...
计算机操作员国家题库,计算机操作员中最新国家题库基础知识部分.doc
计算机操作员中最新国家题库基础知识部分第1章信息技术原理概述PAGE PAGE 22国家职业资格培训教程配套辅导练习第一章信息技术原理概述计算机的概念.分类及应用1．信息革命的概念迄今为止,人 ...

java easing_[译] 动画中缓动（easing）的基础知识

java easing_[译] 动画中缓动（easing）的基础知识相关推荐

最新文章

热门文章