多学一点知识,少写一行代码h5前端动画干货分享

时间:2019-04-25   来源:易漫传媒   浏览:316

多学一点知识,少写一行代码,今天要研究的前端内容是动画全解。在flash,安卓,和炫酷的H5页面中,所有的动画组成元素无非就是位移、旋转、缩放、颜色(透明度、亮度、色彩),在时间轴上的变化。

图片1.png

jquery本身对元素的动画控制有限。有时需要有效结合cssjs来实现动画效果。所以今天我们就来全面了解一下h5前端动画。

csstransition

1)、定义和用法

2)、兼容性

Firefox使用-moz-transition定义、Safari Chrome使用-webkit-transition定义,Opera 使用-o-transition定义。

3)、代码示例

图片2.png

css3animation

1)、定义和用法

图片3.png

先使用@keyframes定义一个动画,再使用animation属性将该动画绑定到元素上。

2)、兼容性

IE使用@keyframes定义,Firefox使用@-moz-keyframes定义,Safari Chrome使用@-webkit-keyframes定义,Opera使用@-o-keyframes定义。

IE使用animation绑定,Firefox使用-moz-animation绑定,Safari Chrome使用 -webkit-animation绑定Opera使用-o-animation绑定

3)、代码示例

图片4.png

jQueryanimate

1)、显示隐藏

hide/show(speed,callback)函数

图片5.png

2)、透明度

fadeIn/fadeOut(speed,easing,callback)函数

图片6.png

3)、滑动

slideUp/slideDown(speed,callback)会改变元素的display属性

图片7.png

4)、自定义动画

animate({params},speed,callback);

图片8.png

JSsetInterval

原生js利用设置周期性事件改变元素属性实现动画,复杂动画的代码量很大

图片9.png

使用canvas制作动画

使用canvas在浏览器上画图,并且利用其api,制作动画。canvas使用的地方非常多,尤其是在制作h5小游戏上。

插件

使用通过以上方法封装好的插件,直接调用如:wavestextillate.js等等。

引用gif图片

虽然在工程师的角度上使用gif图很low,但是,用户的体验是没有影响的。


合作客户/ LATEST DEAL

MORE
  • 中化集团宣传片视频!易漫传媒:专注于线上营销的高品质MG动画解决方案,集创意策划...

  • 滴滴代驾MG动画!易漫传媒:专注于线上营销的高品质MG动画解决方案,集创意策划,设计...

  • 集创意策划,设计制作,推广发行,衍生品,售后为一体,专注于高品质MG动画: 吉祥物设计, ...

  • 集创意策划,设计制作,推广发行,衍生品,售后为一体,专注于高品质MG动画: 吉祥物设计, ...