几种关于HTML 5 的动态效果制作方法


本文摘自PHP中文网,作者小云云,侵删。

1.简介

一个网站有动态效果会让网站显得更加有档次,会更吸引网友的目光,随着时代的发展和进步,越来越多的开发者开始在前端界面中加入动态效果。

那么我们今天就一起来整理和分享一下前端动态效果的制作方法,并对其中的 Canvas 进行一下简单的讲解。

2.动态效果的分类

我们首先先来简单看一下,动态效果的制作有哪些分类?

1510973044734953.png

3.GIF

首先第一个就是我们的 gif 图片,这是一种非常简单,但却高效的动态图制作方式。

GIF图片擅长于 制作细节的小动画 ,位图,优势在于 “体型”很小,可压缩,制作成本低,以图片的形态适用于各种操作系统,无兼容性的后顾之忧。制作GIF动画的方式有很多,例如我们所熟悉的Photoshop时间轴,或是利用Flash,AE将动画导出存成GIF格式等等。

1510973068388139.png

GIF动画最常在H5动效里当担loading导航条,热门小标签等元素,要把控图片大小和精度之间的平衡,所以它一般用于制作小细节的动画。

H5页面承载GIF图片的方式相对以下要介绍的其他方法,是最省成本,最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。

4.逐帧动画

有很多朋友读到这里,可能会觉得,逐帧动画跟 GIF 不应该是一样的么?

逐帧动画即是利用一张等间距的动画分解逐帧图片,一般是由 js脚本模拟编写 。

逐帧动画和GIF动画的差别在于, 脚本可以控制逐帧动画的快慢和动作的暂停,而GIF动画无法在后期通过代码进行动画速率及透明度的修改 。

做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”,之后我们就可以通过修改 background-position 来完成一个“逐帧动画”。

4.png

当然我们也可以通过设置特殊的图片,来完成一些特殊的效果。

5.png

5.CSS3 动画

阅读剩余部分

相关阅读 >>

HTML5利用canvas绘画二级树形结构图

HTML5中的progress元素的详细介绍及兼容性处理

如何使用h5的dataset

分享几款炫酷的HTML5实现的图片特效

h5的定时器怎样实现进度条功能

HTML5本地存储storage实例详解

HTML5中overflow是什么意思

HTML5拖拽功能实现的拼图游戏

HTML5 meter标签是什么意思?HTML5 meter标签的用法及属性介绍

HTML5如何在手机端调用相机?

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...