我的编程空间,编程开发者的网络收藏夹
学习永远不晚

HTML5中制作动态效果的示例分析

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

HTML5中制作动态效果的示例分析

这篇文章给大家分享的是有关HTML5中制作动态效果的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

1.简介

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

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

2.动态效果的分类

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

HTML5中制作动态效果的示例分析

3.GIF

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

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

HTML5中制作动态效果的示例分析

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

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

4.逐帧动画

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

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

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

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

HTML5中制作动态效果的示例分析

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

HTML5中制作动态效果的示例分析

5.CSS3 动画

CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为 擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。

关于动画的应用和基础属性介绍在之前也已经介绍过了,如果小伙伴们忘记了,可以点击下面的链接去从新温习一下。

这里说个题外话, 如何高质高效把动画设计传达给工程师呢?

Tips:建议使用 "案例Demo或者分镜头脚本+动画属性分解表+素材切图"的套装 !

以下图为例:这是一个点击反馈的小动画,在无法提供Demo的时候,我们可以使用"动画属性分解表"的方式。

HTML5中制作动态效果的示例分析

动画属性分解表可以让工程师根据表格内填写的数值进行动画的编写,会比凭空的和工程师进行交流传达,来的更精准一些。

HTML5中制作动态效果的示例分析

6.SVG

SVG,也是动效制作中不可忽略的一大热门方法,我们定义它为擅长于线条的动画,弊端是:IE8,Android4.2及以下支持不好。

看下图几个例子,涉及到这种沿着元素描边的动画,一般都是出自SVG之手啦,当然,它也可以实现一些复杂的动画,类似这个表情图片,不过实现成本是不太划算的。

知识普及:SVG,可缩放矢量图形(Scalable Vector Graphics)**, 是被存成了 XML 格式的图像,它有一些特别的地方:

可被多种工具读取和修改(比如记事本)

尺寸更小,可压缩性更强

矢量

纯粹的 XML

一张SVG图,其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用,也是简单的将此文本引入即可。

这里必须要注意的点是:如果你想制作一个SVG动画,请一定要使用AI工具绘制输出矢量图给到工程师同学哦。

HTML5中制作动态效果的示例分析

如果大家有兴趣继续深入了解,可以点击下面的链接,这是我之前写的小教程,教大家如何通过 SVG 画出一只小狐狸。

7.Canvas

HTML5 的新元素 <canvas>,类似画板,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。

我们定义它为**擅长于绘画的动画。

绘制一个大量元素下落的动画效果,就是Canvas所擅长的。

Canvas可以算是SVG的堂兄弟,大部分的图表动画,都是由Canvas或是SVG制作而成的,二者的动画能力相似但也有以下这些区别:

canvas是画框,有自己固定的高宽,svg是不依赖分辨率的矢量,可以任意放大缩小。

canvas能以.jpg的格式保存图像,svg是文本的格式保存图像

canvas绘制的图像不占DOM,而svg的每个图像都是1个DOM元素

canvas适合图像密集型的动画,而svg不适合大量使用,例如制作飘雪等

canvas完全依赖脚本绘制作,而svg可直接使用矢量转存生成。

8.Flash To Canvas

除去上面几种常见的手法,Flash转Canvas的方法也是今年特别火爆的一种形式。

既然提到曾经辉煌的Flash,那产出物必须离不开炫酷这个形容词:通过Flash cc制作复杂又精细的动画,导成Canvas文件,动画中的交互操作,依赖Create.js的脚步库完成。

因为 flash 转 Canvas 的实现成本实际上非常高,在这里也就不做更多的介绍了。

9.Video

video 作为 HTML 5 的新标签,有着许多非常强大的功能。

但是与之相对应的,它也因为兼容性的问题,存在了各种制约,但是无可否认,Video 在实现动态效果的方式和成本上,是其他方式无可比拟的。

HTML5中制作动态效果的示例分析

10.JavaScript

其实,只要是涉及到交互反馈的动画,小至滚屏翻页,大到重力感应等都需要js进行处理脚步的编写。

也就是说,所有的动画特效都离不开Javascript同学的支持。

市面上有很多特别的Javascript脚本库,例如 three.js ,细细运用,就可以做出非同凡响的动画效果。

总结:

不同的 方式能做出不同的动态效果,希望以上HTML 5 的动态效果制作方法能让你制作出更好的页面。

感谢各位的阅读!关于“HTML5中制作动态效果的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

HTML5中制作动态效果的示例分析

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

HTML5中canvas基本绘图之绘制阴影效果的示例分析

小编给大家分享一下HTML5中canvas基本绘图之绘制阴影效果的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!是HTM
2023-06-09

基于CSS3+jQuery动态时钟制作的示例分析

这篇文章主要介绍基于CSS3+jQuery动态时钟制作的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Hi,大家好,我叫Toby Pitman,Chris曾邀请我写一篇关于最近我在论坛上发的一些实验成果,于是
2023-06-12

Java反射机制中动态代理的示例分析

这篇文章主要介绍了Java反射机制中动态代理的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. 代理模式代理模式就是为其他对象提供一种代理来控制对这个对象的访问。其
2023-06-17

HTML5中Landmark的示例分析

这篇文章主要介绍HTML5中Landmark的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是 LandmarkLandmark 是一种用来表示网页组织结构的方法。通常一个网页可以被切分成几个大块以一个视
2023-06-09

Html5中localStorage的示例分析

这篇文章将为大家详细讲解有关Html5中localStorage的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。定义只读的 localStorage 允许你访问一个 Document 的远端(or
2023-06-09

JDK中动态代理的示例分析

这篇文章将为大家详细讲解有关JDK中动态代理的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。动态代理步骤1.创建一个实现接口InvocationHandler的类,它必须实现invoke方法2.创
2023-06-15

Java中反射机制和动态代理的示例分析

这篇文章主要介绍了Java中反射机制和动态代理的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、反射概述反射机制指的是Java在运行时候有一种自观的能力,能够了解自
2023-06-15

Html5中原生拖拽操作的示例分析

这篇文章给大家分享的是有关Html5中原生拖拽操作的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。最近的一次项目开发中用到了H5的拖拽功能,由于现有项目使用的是VUE全家桶,使用了vuedragable这
2023-06-09

Hive中静态分区与动态分区的示例分析

这篇文章给大家分享的是有关Hive中静态分区与动态分区的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。  分区是hive存放数据的一种方式。将列值作为目录来存放数据,就是一个分区。这样查询时使用分区列进行
2023-06-02

编程热搜

目录