# CSS 动画

# CSS transition

# transition 属性

描述
transition-property (opens new window) 指定CSS属性的name,transition效果
transition-duration (opens new window) transition效果需要指定多少秒或毫秒才能完成
transition-timing-function (opens new window) 指定transition效果的转速曲线
transition-delay (opens new window) 定义transition效果开始的时候

transition-timing-function:

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

# CSS animation

# animation 属性

说明
animation-name (opens new window) 指定要绑定到选择器的关键帧的名称
animation-duration (opens new window) 动画指定需要多少秒或毫秒完成
animation-timing-function (opens new window) 设置动画将如何完成一个周期
animation-delay (opens new window) 设置动画在启动前的延迟间隔。
animation-iteration-count (opens new window) 定义动画的播放次数。
animation-direction (opens new window) 指定是否应该轮流反向播放动画。
animation-fill-mode (opens new window) 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state (opens new window) 指定动画是否正在运行或已暂停。
initial 设置属性为其默认值。 阅读关于 initial的介绍。 (opens new window)
inherit 从父元素继承属性。 阅读关于 initinherital的介绍。 (opens new window)

# @keyframes 关键帧

使用@keyframes规则,在动画过程中,可以更改CSS样式的设定多次。指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。

0%是开头动画,100%是当动画完成。

语法:

@keyframes animationname {keyframes-selector {css-styles;}}
说明
animationname 必需的。定义animation的名称。
keyframes-selector 必需的。动画持续时间的百分比。合法值:0-100% from (和0%相同) to (和100%相同)注意: 您可以用一个动画keyframes-selectors。
css-styles 必需的。一个或多个合法的CSS样式属性

代码示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	0%   {top:0px;}
	25%  {top:200px;}
	75%  {top:50px}
	100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%   {top:0px;}
	25%  {top:200px;}
	75%  {top:50px}
	100% {top:100px;}
}
</style>
</head>
<body>

# @keyframes 和 transition 区别

过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧的话来说,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。

# 略谈 Js 动画

# requestAnimationFrame 方法

在 requestAnimationFrame 之前,主要借助 setTimeout/ setInterval 来编写 JS 动画,而动画的关键在于动画帧之间的时间间隔设置,这个时间间隔的设置有讲究,一方面要足够小,这样动画帧之间才有连贯性,动画效果才显得平滑流畅;另一方面要足够大,确保浏览器有足够的时间及时完成渲染。

大部分显示器的刷新频率是60Hz,即每秒钟重绘 60 次。大多数浏览器都会对重绘操作的频率加以限制,使其不超过显示器的刷新频率。一般最平滑流畅的动画的时间间隔是 1000ms/60,约为 16.7 ms.时间间隔对于动画非常重要,但是 setTimeout/ setInterval 的显著缺陷就是设定的时间并不精确,它们只是在设定的时间后将相应任务添加到任务队列中,而任务队列中如果还有前面的任务尚未执行完毕,那么后添加的任务就必须等待,这个等待的时间造成了原本设定的动画时间间隔不准。

requestAnimationFrame 应运而生,它采用的是系统时间间隔(约16.7ms),保持最佳绘制效果与效率,使各种网页动画有一个统一的刷新机制,从而节省系统资源,提高系统性能。

MDN 上关于 window.requestAnimationFrame() (opens new window) 的介绍

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次,但在大多数遵循W3C建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame() 运行在后台标签页或者隐藏的`` (opens new window) 里时,requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

回调函数会被传入DOMHighResTimeStamp (opens new window)参数,DOMHighResTimeStamp (opens new window)指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数,它们每一个都会接受到一个相同的时间戳,即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数,单位毫秒,最小精度为1ms(1000μs)。

请确保总是使用第一个参数(或其它获得当前时间的方法)计算每次调用之间的时间间隔,否则动画在高刷新率的屏幕中会运行得更快。

示例:

const element = document.getElementById('some-element-you-want-to-animate'); 
let start;

function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;

  //这里使用`Math.min()`确保元素刚好停在200px的位置。
  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';

  if (elapsed < 2000) { // 在两秒后停止动画
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

Vue 动画待接下来完善。。。

Last Updated: 12/15/2020, 4:37:33 PM