css3动画 animations

常见的动画实现手段

1、gif 实现

定义: GIF 文件的数据是一种基于 LZW 算法的连续色调的无损压缩格式,gif 格式的特点是一个 gif 文件可以存多幅彩色图像,当数据逐幅读出并展示都在屏幕上,就可以构成一个简单的动画。 最高支持 256 种颜色。由于这种特性,GIF 比较适用于色彩较少的图片,比如页面卡通 icon、标志等等。

优点: 1.制作的成本很低; 2.兼容性好; 3.方便开发使用。

缺点: 1.画质上:色彩支持少,图像毛边严重; 2.交互上:不能控制动画的播放暂停,没有灵活性; 3.大小上:由于是无损压缩,每帧被完整的保存下来,导致文件很大。

2、css3补帧动画

2.1 transition 过渡动画

场景:

常与 :hover, :active 等伪类使用,实现相应等动画效果。

2.2 animation 关键帧动画

css 复制代码
.bounce1 {
    left: -40px;
    animation: bouncy1 1.5s infinite;
}
.bounce2 {
    left: 0;
    animation: bouncy2 1.5s infinite;
}
.bounce3 {
    left: 40px;
    animation: bouncy3 1.5s infinite;
}
@keyframes bouncy1 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    50% {
        transform: translate(0px, 0px) rotate(180deg);
    }
    100% {
        transform: translate(40px, 0px) rotate(-180deg);
    }
}

场景: 比如:loading 展示,代码如上。

优点: 1、无需每一帧都被记录,通过关键帧设置,方便开发; 2.实现简单,通常 UI 可以直接给到 css 文件,前端只需要导入即可【移动端注意屏幕适配】。

缺点: 1.css 没法动画交互,无法得知当前动画执行阶段; 2.transition: 需要触发,无法自动播放; 3.animation 兼容性需要加前缀,导致代码量成倍增长; 4.对于复杂动画的实现,导入的 css 文件过大,影响页面的渲染树生成,从而阻塞渲染。比如实现一个摇钱树的效果,css 文件达到百 kb,就要采取一些必要的压缩手段,缩减文件大小。

2.3 js 逐帧动画

JS 动画的原理是通过 setTimeout 或 requestAnimationFrame 方法绘制动画帧,从而动态地改变 网页中图形的显示属性(如 DOM 样式,canvas 位图数据,SVG 对象属性等),进而达到动画的目的。

js 实现一个正方形从左到右的移动动画 -----

setTimeout 实现

ini 复制代码
const element2 = document.getElementById('raf2');
const btn2 = document.getElementById('btn2');
let i = 0;
let timerId;
function move () {   
 element2.style.marginLeft = i + 'px'
 timerId = setTimeout(move, 0)
 i++;
 if (i > 200) {
     clearTimeout(timerId)
 }
}
btn2.addEventListener('click',function () {
 move()
})

requestAnimationFrame 实现

ini 复制代码
const element = document.getElementById('raf');
const btn1 = document.getElementById('btn1');
let r = 0;
let rafId;
function step () {
 element1.style.marginLeft = r+ 'px';
 rafId = window.requestAnimationFrame(step);
 r++;
 if (r > 200) { // 在两秒后停止动画
     cancelAnimationFrame(rafId);
 }
}
btn1.addEventListener('click', function () {
 step();
})

什么是动画

在需要变化的时间节点上指定一些关键帧,关键帧就是此刻所定义的样式。例如我在1s左移5m,3s左一15m,这时就有两个关键帧,因为这两个关键帧,画面就发生了位移,那么动画也就产生了。

下面这句话总结到位:动画使元素逐渐从一种样式变为另一种样式。

CSS3的动画主要依赖 @keyframesanimation来实现。

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

相较于传统的脚本实现动画技术,使用 CSS 动画有三个主要优点:

  1. 能够非常容易地创建简单动画,你甚至不需要了解 JavaScript 就能创建动画。
  2. 动画运行效果良好,甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳(除非经过很好的设计)。
  3. 让浏览器控制动画序列,允许浏览器优化性能和效果,如降低位于隐藏选项卡中的动画更新频率。

@keyframes 规则

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

css 复制代码
@keyframes myfirst
{
  from {background: red;}
  to {background: yellow;}
}

以上的就是一个简单的动画,关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。也就是从红色变成黄色。

建议: 为了得到最佳的浏览器支持,使用 0% 和 100% 选择器是最好的选择。

animation既然动画的关键帧都有了,那么就需要把这个关键帧落实并绑定到某个DOM上。

语法:

可以一起写,也可以分开写属性。

arduino 复制代码
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

动画属性

  • animation-name:设置需要绑定到元素的动画名称;
  • animation-duration:设置完成动画所需要花费的时间,单位为秒或毫秒,默认为 0;
  • animation-timing-function:设置动画的速度曲线,默认为 ease;
  • animation-fill-mode:设置当动画不播放时(动画播放完或延迟播放时)的状态;
  • animation-delay:设置动画开始之前的延迟时间,默认为 0;
  • animation-iteration-count:设置动画被播放的次数,默认为 1;
  • animation-direction:设置是否在下一周期逆向播放动画,默认为 normal;
  • animation-play-state:设置动画是正在运行还是暂停,默认是 running;
  • animation:所有动画属性的简写属性。

其中,对于一个动画:

  • 必须项:animation-name、animation-duration 和 @keyframes规则
  • 非必须项:animation-delay、animation-direction、animation-iteration-count、animation-play-state、animation-timing-function、animation-fill-mode,当然不是说它们不重要,只是不设置时,它们都有默认值

animation-timing-function属性

  • linear 动画从头到尾的速度是相同的(匀速)。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  • ease 默认。动画以低速开始,然后加快,在结束前变慢(由快到慢,逐渐变慢)。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  • ease-in 动画以低速开始(由慢到快,速度越来越快)。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  • ease-out 动画以低速结束(由快到慢速度越来越慢)。
  • ease-in-out 动画以低速开始和结束(由慢到快再到慢)。
  • steps(int,start|end)指定了时间函数中的间隔数量(步长)可实现逐帧动画

有两个参数,第一个参数指定函数的间隔数,该参数是一个正整数(大于 0)。

第二个参数是可选的,表示动画是从时间段的开头连续还是末尾连续。

什么是 cubic-bezier(n,n,n,n) 贝塞尔曲线

网址:cubic-bezier.com/#.17,.67,.8...

cubic-bezier 又称三次贝塞尔,主要是为 animation 生成速度曲线的函数,规定是

cubic-bezier(, , , )。

从上图我们需要知道的是 cubic-bezier 的取值范围:

  • P0:默认值 (0, 0)
  • P1:动态取值 (x1, y1)
  • P2:动态取值 (x2, y2)
  • P3:默认值 (1, 1)

我们需要关注的是 P1 和 P2 两点的取值,而其中 X 轴 的取值范围是 01,当取值超出范围时 cubic-bezier 将失效;Y 轴的取值没有规定,当然也毋须过大。

最直接的理解是,将以一条直线放在范围只有 1 的坐标轴中,并从中间拿出两个点来拉扯(X 轴的取值区间是 [0, 1],Y 轴任意),最后形成的曲线就是动画的速度曲线

steps属性

参考:www.zhangxinxu.com/wordpress/2...

steps()功能符和CSS3 animation中的cubic-bezier()功能符的地位和作用是一样的,都可以作为animation-timing-function的属性值。

只不过steps()更像是楼梯坡道,cubic-bezier()更像是无障碍坡道。如下图示意:

然后steps()简化出了step-start和step-end这两个关键字;cubic-bezier()则有linear,ease,ease-in,ease-out以及ease-in-out。

cubic-bezier指三次贝塞尔曲线

steps()指逐步运动,下面进一步深入介绍。

搞清楚steps()中的start和end

steps()有一定的学习难度,总是搞不清楚,最主要就是start和end傻傻分不清楚。我这里自我挑战下,看看能不能说清楚。

常见steps()用法举例:

steps(5, end); steps(2, start);

用steps()语法表示就是:

steps(number, position)

其中:

number

数值。这个很好理解,表示把我们的动画分成了多少段。

假设有如下CSS3动画keyframes,定义了一段从0~100px的位移:

@keyframes move { 0% { left: 0; } 100% { left: 100px; } }

假设我们的number值是5,则相当于把这段移动距离分成了5段,如下示意图:

position

关键字。表示动画是从时间段的开头连续还是末尾连续。支持start和end两个关键字,含义分别如下:

  • start:表示直接开始。
  • end:表示戛然而止。是默认值。

为什么position非常难理解?

我认为两个原因:

  1. steps()属于timing function,也就是时间函数,时间这个东西是虚的,看不见,摸不着,联想乏力,所以认知成本高。这也是为什么那么多人都不珍惜时间的原因------无法感知。
  2. CSS规范中对于start和end的定义是基于数学函数来的,函数这东西,多少人的噩梦,因为过于抽象,与现实难以关联,所以,如果我们盯着定义去理解start和end,那就是死胡同,不归路,就算现在弄懂了,过段时间再遇到,得了,全忘光光了,函数图哪个是哪个,鬼才记得。下面这张图就出自规范文档按照规范图再细化解释就是:
    • start:表示直接开始。也就是时间才开始,就已经执行了一个距离段。于是,动画执行的5个分段点是下面这5个,起始点被忽略,因为时间一开始直接就到了第二个点:
    • end:表示戛然而止。也就是时间一结束,当前距离位移就停止。于是,动画执行的5个分段点是下面这5个,结束点被忽略,因为等要执行结束点的时候已经没时间了:

基于现实感知重新理解position!

万物具有相对性。例如,苍蝇眼中的人类动作都是慢动作,但是人类眼中的苍蝇却非常敏捷。

同样的,start和end这里的开始和结束是相对于时间而言的,但是,如果站在人类可感知的具体事物而言,start和end却是相反的含义。

所以,我们可以这么理解:

  • start:表示结束。分段结束的时候,时间才开始走。于是,动画执行的5个分段点是后5个点:
  • end:表示开始。分段开始的时候,时间跟着一起走。于是,动画执行的5个分段点是前5个点:

记住position参数的含义

牢记这么一句话:一切都是反的!start不是开始,而是结束;end不是结束,而是开始。

step-start和step-end

step-start和step-end是steps()功能符简化关键字,注意,是step-*,step,后面没有s。

其中,step-start等同于steps(1, start),step-end等同于steps(1, end)或者steps(1)。

step-start和step-end用中文短句解读就是:一步到位和延迟到位,在实际项目中有什么作用呢?

对于只有0%,100%或from, to两个关键时间帧的动画,step-start和step-end是没有任何需要使用的理由的。

如果是非等分,无法过渡的阶梯动画,则有使用价值,例如下面这个基于box-shadow实现的打点动画效果:

animation-fill-mode属性

动画分为 初始状态等待期动画执行完成期四个阶段,当清楚这四个阶段便能较好的理解了

animation-fill-mode有四个可选值

  • none 默认值。这是默认值。在动画播放前和播放结束后,不会应用任何样式。这意味着动画效果将不会影响元素的最终样式,元素将立即回到其初始状态。
  • forwards 在动画播放结束后,元素将保持在最后一个关键帧的状态。换句话说,元素将保持在动画结束时的状态,而不会返回到初始状态
  • backwards 在动画播放前 ,元素将应用第一个关键帧的状态。这意味着动画效果将在动画开始之前应用,元素将从第一个关键帧状态开始,然后播放动画。
  • both 元素将同时应用 forwardsbackwards 的效果。在动画播放前 ,元素将应用第一个关键帧 的状态,在动画播放结束后,它将保持在最后一个关键帧的状态。
  • initial 将属性设置为其默认值
  • inherit 从父元素继承该属性

animation-delay属性

用法:animation-delay: time;

其中参数 time 就是动画播放前的延迟时间,参数 time 既可以为正值也可以为负值。参数值为正时,表示延迟指定时间开始播放;参数为负时,表示跳过指定时间,并立即播放动画。

animation-iteration-count属性

animation-iteration-count 属性用来定义动画播放的次数,属性的可选值如下

animation-play-state属性

animation-play-state 属性用来设置动画是播放还是暂停,属性的可选值如下:

nimation-direction属性

animation-direction 属性用来设置是否轮流反向播放动画,属性的可选值如下:

animation简写

animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 几个属性的简写形式,通过 animation 属性可以同时定义上述的多个属性,语法格式如下:

动画库

1、Animate.css

animate.style/

2、Hover.css

ianlunn.github.io/Hover/

3、Magic CSS3

www.minimamente.com/project/mag...

兼容性

文章参考:zhuanlan.zhihu.com/p/456713454

相关推荐
李鸿耀6 分钟前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈26 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室4 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站