本文摘自PHP中文网,作者小云云,侵删。
1.简介
一个网站有动态效果会让网站显得更加有档次,会更吸引网友的目光,随着时代的发展和进步,越来越多的开发者开始在前端界面中加入动态效果。
那么我们今天就一起来整理和分享一下前端动态效果的制作方法,并对其中的 Canvas 进行一下简单的讲解。
2.动态效果的分类
我们首先先来简单看一下,动态效果的制作有哪些分类?
3.GIF
首先第一个就是我们的 gif 图片,这是一种非常简单,但却高效的动态图制作方式。
GIF图片擅长于 制作细节的小动画 ,位图,优势在于 “体型”很小,可压缩,制作成本低,以图片的形态适用于各种操作系统,无兼容性的后顾之忧。制作GIF动画的方式有很多,例如我们所熟悉的Photoshop时间轴,或是利用Flash,AE将动画导出存成GIF格式等等。
GIF动画最常在H5动效里当担loading导航条,热门小标签等元素,要把控图片大小和精度之间的平衡,所以它一般用于制作小细节的动画。
H5页面承载GIF图片的方式相对以下要介绍的其他方法,是最省成本,最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。
4.逐帧动画
有很多朋友读到这里,可能会觉得,逐帧动画跟 GIF 不应该是一样的么?
逐帧动画即是利用一张等间距的动画分解逐帧图片,一般是由 js脚本模拟编写 。
逐帧动画和GIF动画的差别在于, 脚本可以控制逐帧动画的快慢和动作的暂停,而GIF动画无法在后期通过代码进行动画速率及透明度的修改 。
做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”,之后我们就可以通过修改 background-position 来完成一个“逐帧动画”。
当然我们也可以通过设置特殊的图片,来完成一些特殊的效果。
5.CSS3 动画
相关阅读 >>
HTML5 video 上传预览图片视频,设置、预览视频某秒的海报帧
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者