h5特效

更新时间:2020-08-11 11:03:00点击次数:314次

在H5的作品中,动态往往比静态更引人注目;动态互动反馈也可以增强用户体验,帮助传播品牌推广。以下小编为每个人总结了几个主要的Html5动态效果,这对一个合格的Html5设计师来说是必要的。即使是对这些Html5动态效果一无所知的普通用户也能更好地欣赏朋友圈的HTML5作品。
1.Html5动态特效3:CSS3
CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。
CSS3的动画三大属性:Transform 变形,Transition 过渡,和Animation 动画。
Transform 变形:拥有 rotate 旋转 skew 扭曲 scale 缩放 translate 移动 matrix 矩阵变形五大特效,罗斯的例子中,便是对充分结合了这几个变化特效的产物。
Transition 过渡:拥有修改执行变换的属性,时长,速率和延迟时间的能力,大家都很熟悉的贝塞尔曲线,也是归属于transition的设定之下的。
Animation 动画:若将Transform解释为动作,Transition解释为过渡,那么Animation则是连续的几个动作,即动画。Animation可以我们设定keyframes的值,让元素在一段时间内完成多个动作。
2.Html5动态特效1:GIF动图
GIF大家都不陌生,最常在H5动效里当担loading导航条,热门小标签等元素,一般用于制作小细节的动画。
GIF图片擅长于制作细节的小动画,位图,优势在于 “体型”很小,可压缩,制作成本低,以图片的形态适用于各种操作系统,无兼容性的后顾之忧。制作GIF动画的方式有很多,例如我们所熟悉的Photoshop时间轴,或是利用Flash,AE将动画导出存成GIF格式等等。
3.Html5动态特效4:SVG
SVG主要制作线条动画,弊端是:IE8,Android4.2及以下支持不好。SVG,可缩放矢量图形(Scalable Vector Graphics), 是被存成了 XML 格式的图像,它有一些特别的地方:
可被多种工具读取和修改(比如记事本)、尺寸更小,可压缩性更强、矢量、纯粹的 XML。
4.Html5动态特效2:逐帧动画
逐帧动画是GIF图片的堂兄弟,和GIF图片一样也是适合做小细节的动画,逐帧动画即是利用一张等间距的动画分解逐帧图片,由js脚本模拟编写或是使用css3新属性step()制作而成。
逐帧动画和GIF动画的差别在于,脚本可以控制逐帧动画的快慢和动作的暂停,而GIF动画无法在后期通过代码进行动画速率及透明度的修改。
5.Html5动态特效5:Canvas
HTML5 的新元素 <canvas>,类似画板,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身是没有绘图能力的。所有的绘制工作必须依赖 Java 完成。我们定义它为擅长于绘画的动画。
6.Html5动态特效6:Flash->Canvas
Flash转Canvas的方法也是特别火爆的一种形式。既然提到曾经辉煌的Flash,那产出物必须离不开炫酷这个形容词:通过Flash cc制作复杂又精细的动画,导成Canvas文件,动画中的交互操作,依赖Create.js的脚步库完成。
7.Html5动态特效8:Java
只要是涉及到交互反馈的动画,小至滚屏翻页,大到重力感应等都需要js进行处理脚步的编写。也就是说,所有的动画特效都离不开Java同学的支持。市面上有很多特别的Java脚本库,例如three.js,细细运用,就可以做出非同凡响的动画效果。
最后我们再以一个简单的表格来汇总这H5动效常见的制作手法,希望读完本文的小伙伴们都可以在下次遇见新动画效果时,第一时间挖掘出它背后的制作原理,好好运用这8大手法,人人都是优秀的动效设计师。(表格中所阐述的性能损耗和实现成本仅作参考,具体动画效果还需要具体分析,才可得知到底使用哪种方式是最适合的。)


  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息