文章目录
目的
前端页面中加入适当的动画效果可以极大地提升用户的体验。前端中加入动画的方式很多,这篇文章将稍微做个介绍,然后重点说下CSS动画。
动画介绍
CSS动画
CSS动画主要有两类,最简单的就是CSS Transition:
稍微复杂一点的动画可以用CSS Animation:
JavaScript动画
JavaScript动画简单来说就是用代码定时手动改变页面状态,最直接的就是用setInterval或setTimeout:
上面的方式性能上可能不太友好,有些时候还可能会出点小问题,H5中新加入了 requestAnimationFrame
,这个是专门用于帧动画的:
requestAnimationFrame
方法接收一个函数,该函数会在显示器下一次刷新时运行(1帧),所以如果需要动画持续运行的话需要每一帧反复设置requestAnimationFrame
;- 通常情况下显示器每秒刷新60帧,每一帧间隔时间约为16.667毫秒;
requestAnimationFrame
每次调用函数时会向函数传输一个时间戳;- 可以使用
cancelAnimationFrame
方法取消已设置的requestAnimationFrame
;
Canvas动画
Canvas是H5新加入的标签,提供了一些绘图相关的API,可以在它内部绘制2D或3D图像。Canvas本身内容比较多,可以自行百度了解,以后有时间也会另外专门介绍。
SVG动画
SVG动画主要是在页面中嵌入SVG标签元素,利用SVG本身的动画功能。SVG本身内容比较多可以自行百度了解,以后有时间也会另外专门介绍。
CSS动画
CSS Transition
Transition主要用于元素属性变化时提供时间上的过渡效果。Transition总共有四条属性:
属性 | 说明 |
---|---|
transition-property | 过渡效果应用的属性,比如元素的width或height,默认为all 即如果不指定则会将效果施加到所有支持的属性上 |
transition-duration | 过渡效果持续时间,必须设置此项,默认为0s |
transition-timing-function | 过渡效果变化速度,默认为ease,慢快慢 |
transition-delay | 过渡效果延迟多少时间后开始执行,默认为0s |
这四个属性可以复合使用:
transition: <property> || <duration> || <timing-function> || <delay>
下面是一些简单的演示:
Transition使用本身比较简单,更多演示可以参考下面链接:
https://projects.verou.me/animatable/
CSS Animation
Animation相比Transition可以实现更加复杂的动画效果,而且不需要触发即可播放。更强的功能带来了更多的属性:
属性 | 说明 |
---|---|
animation-name | 关键帧(@keyframes)名称 |
animation-duration | 动画持续时间,必须设置此项,默认为0s |
animation-timing-function | 动画播放速度,默认为ease,慢快慢 |
animation-delay | 动画延迟多少时间后开始执行,默认为0s |
animation-iteration-count | 动画循环播放次数,默认为1,取infinite可以无限循环播放 |
animation-direction | 动画播放方向,可选值如下: normal 默认值,每个动画循环结束重置到起点重新开始; alternate 动画正反向交替播放; reverse 反向播放动画,每周期结束动画由尾到头播放; alternate-reverse 第一次反向播放,然后正反向交替播放; |
animation-fill-mode | 动画不播放时(播放完成时 或 有延迟未开始播放时)的状态,可选值如下: none 动画未播放时不应用任何动画样式; forwards 动画播放完成后元素保持最后一帧状态; backwards 动画未播放时元素应用动画第一帧状态; both 同时应用forwards和backwards; |
animation-play-state | 控制动画播放和暂停,可选值如下: running 运行; 暂停 paused; |
和Transition一样Animation的这些属性也可以复合使用。
Animation需要用到@keyframes,这个用来描写关键帧信息,语法如下:
@keyframes animationname {keyframes-selector {css-styles;}}
keyframes-selector表示动画播放过程的时刻,可以用0%、50%、100%等表示,也可以用from表示0%、用to表示100%。
下面是一些简单的演示:
timing-function
Transition和Animation里都有 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 函数中定义自己的值 |
steps(n,start/end) | 将每一段关键帧分成n段,每次播放这一段中前面或后面一格画面 start 显示尾部画面、end 显示头部画面 |
step-start | 等于steps(1,start) |
step-end | 等于steps(1,end) |
上面的cubic-bezier(贝塞尔曲线)可以通过网站生成数据:https://cubic-bezier.com/
利用cubic-bezier可以制作出很有意思的的效果:
cubic-bezier相关的取值都是平滑的,而带step字段的取值的都是帧动画,这个也可以做比较有意思的事情:
帧动画根据我上面的文字描述和演示如果能理解的话很快就可以理解,不能理解的话可以参考下面链接:
https://www.cnblogs.com/aaronjs/p/4642015.html
利用帧动画可以做打字机效果:
CSS Transform
Transform可以实现对元素的位移、缩放、旋转、扭曲等功能(有点类似于PS中的自由变换,但比自由变换要强大很多)。利用Transform可以实现很多丰富的视觉效果,CSS动画很多时候都需要结合Transform使用才能得到优异的效果。Transform主要可设置效果如下:
属性 | 说明 |
---|---|
none | 不进行转换 |
matrix(n,n,n,n,n,n) | 2D变换 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 3D变换 |
translate(x,y) | 2D平移 |
translate3d(x,y,z) | 3D平移 |
translateX(x) | 沿X轴平移 |
translateY(y) | 沿Y轴平移 |
translateZ(z) | 沿Z轴平移 |
scale(x[,y]?) | 2D缩放 |
scale3d(x,y,z) | 3D缩放 |
scaleX(x) | 沿X轴缩放 |
scaleY(y) | 沿Y轴缩放 |
scaleZ(z) | 沿Z轴缩放 |
rotate(angle) | 2D旋转 |
rotate3d(x,y,z,angle) | 3D旋转 |
rotateX(angle) | 沿X轴旋转 |
rotateY(angle) | 沿Y轴旋转 |
rotateZ(angle) | 沿Z轴旋转 |
skew(x-angle,y-angle) | 沿X/Y轴倾斜转换 |
skewX(angle) | 沿X轴倾斜转换 |
skewY(angle) | 沿Y轴倾斜转换 |
perspective(n) | 为3D转换元素定义透视视图 |
下面是一个简单的演示:
上面的很多属性在生效的时候都是基于元素中心点的,可以通过 transform-origin
属性来改变变换时元素的中心点:
应用了Transform的元素不会脱离文档流,也不会改变它在文档流的大小和位置:
Transform本身的内有比较多,更多内容可以参考下面链接:
《CSS3 transform介绍》 https://www.jianshu.com/p/17e289fcf467
总结
在前端页面中加入适当的动画效果可以极大地提升用户的体验,在这其中CSS动画既简单又强大,使用场景非常广泛。这篇文章将的都是些基础的使用,只看上面内容没有点设计基础的话是比较难设计出好看的效果来的,进一步提升的话可以参考下面文章:
《我写CSS的常用套路》 https://juejin.cn/post/6844904033405108232
《我写CSS的常用套路·续》 https://juejin.cn/post/6881546676188741645
最后放上一个酷炫的七喜官网供大家欣赏:https://7up.nl/7up