恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
让你的网页动起来!必须让前端知道的10个网页动效库
0.0°
2018-06-21 原创文章 经验/观点 举报 27499 132 162 1


Hello guys! 

Welcome to Superyeah's Study Room. 

Sit down, and have fun!


随着互联网的发展,网页设计也愈发丰富多彩,近年来动效设计的强势崛起,使静态网页已经不能满足用户的体验。虽然设计师们已经掌握了制作动效的基本技能,但在网页中只依靠设计师输出的GIF动画,仍然不能完善用户与界面的交互体验,那么这就要求前端小哥也得掌握动效应用能力了。

 

最近叶哥刚完成几个网页设计项目,所以整理了一波前端动效库资源,现在把我亲测好用的10个动效库分享给大家。


1、Anime.js

Image title


这是一款强大的使用JS开发的动效库,支持 CSS,DOM,SVG,和JS对象。

 

点击Documentation,查看animejs的动效组件说明文档;点击Codepen,进入anime的动效库,查看可编辑的动效演示和示例。


2、Animate.css

Image title


Animate.css是一个跨浏览器的动效基础库,是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效,一应俱全。

 

叶哥用到的很多基础动效都是来自这里,这个库还有一个很大的特点是:它的入场效果几乎都对应有出场效果,所以要让你的网页动起来,实现滚动操作动效可逆的话,这个库是非常酷的哦,哈哈哈。


3、Popmotion

Image title


这是一款用于UI界面的JavaScript动画库,包含了四个强大的开源工具:pose、popmotion、stylefire和framesync,他们的具体功能我已经使用浏览器翻译并帮大家截图下来了。


Image title

Image title

Image title

Image title


可以跟你的前端小哥一起研究研究。


4、AniJS

Image title


号称“无需编码即可提升网页设计的图书馆”,AnijS 让你能够通过 if、on、do、to 等简单的命令更加直观地处理动效。有趣的地方在于,它还能用来控制前面 Animate.css 来创造动效。


它的弹性动画十分可爱,可直接用于网页设计和UI设计中的动效案例也非常丰富。


Image title

(案例请滑到网站下方查看哦,如图)


5、Dynamics.js

Image title


Dynamics.js 是一个JS库,能为你提供9种标准的动效,你可以制定其中的持续时间、频率、预期尺寸和强度等数据,创造出符合物理效果的动效。


Image title


6、CSShake

Image title


这是一个疯狂摇动的动效库,来感受一下,哈哈哈。


CSShake 中包含了11类不同的可控动效属性,包括方向(水平、上下),类型(固定、疯狂),强度(强、弱)等等,让你可以全方位控制动效的特征。


7、Bounce.js

Image title


bounce.js是为数不多的可以直接在浏览器中进行设计和设置的动画库之一,它不仅仅是一个库,而是有这用户可以直接操作的实际功能,它带有一个完整的网页构建器,只需添加一个组件,选择预设,然后你就可以得到CSS 代码了。


8、It's Tuesday.

Image title

(这是翻译后的界面,原文为英文)


正如它自己所说:“一个古怪的CSS动画库。”,里面的动效都比较“冷淡”,不像前面给大家推荐的很多库拥有可爱的弹性动效。不过萝卜青菜各有所爱,万一哪天你就需要用到这种风格呢?



△ 接下来分享两个SVG动效库 △



9、Lazy Line Painter

Image title


一个用于SVG路径动画的JQUERY插件,你可以使用它轻松创建SVG路径动效。你只需要在AI中输出SVG文档,上传到转换器中,它就能帮你将它处理成为动效,生成jQuery 文档。你还可以编辑代码进行微调。


10、Vivus.js

Image title


Vivus是一个轻量级的JavaScript动效库,跟Lazy Line Painter一样,它也是创建SVG路径动画的,里面有各种不同的动画可供选择,以及创建自定义脚本的选项,可以以你喜欢的任何方式绘制SVG。


Image title


Vivus的动画类型有延迟、同步和依次绘制三种,还有定时功能,制作的SVG路径动画让人印象深刻。




以上就是叶哥亲测过的免费、强大、开箱即用的前端动效库了。很感谢这些伟大的工程师将自己的库开源,让我们能够更好更快地完成设计和开发,致敬。


觉得只有10个动效库还不够过瘾?想要了解更多,可以点击这里,里面有75个由国外设计师整理的不错的动效库。那如果你想看中文版呢,叶哥推荐大家在优设上面搜索:要做动效?这75款动效工具让你无所不能。


工具虽多,但也要选择最适合自己的,上面10个动效库叶哥已经先让我的前端小哥帮大家体验过了,如果你觉得这篇文章有用,别忘记给叶哥点赞哦!


(我知道很多人一定对叶哥录制GIF的软件很感兴趣,那么下次的文章我就给大家安利一下)


Image title


微信公众号:叶设计的自习室

更新:2018-06-21

收藏

132人已收藏

超级叶

微信公众号:叶设计的自习室

  • 48

    作品

  • 1842

    粉丝

  • 70

    关注

  • 教程 | Vol.7 用AI做文字效果设计 之 三步打造破碎
  • 教程 | Vol.6 用AI做文字效果设计 之 酷炫故障文字
  • 教程 | Vol.5 用AI做文字效果 之 解构堆叠扭曲文字
  • 教程 | Vol.4 用AI做文字效果 之 封套扭曲变形字

    猜你喜欢

      2018-06-21 原创文章 经验/观点 举报 27499 132 162 1

      让你的网页动起来!必须让前端知道的10个网页动效库

      0.0°

      你确定要举报让你的网页动起来!必须让前端知道的10个网页动效库

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年06月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      162
      132
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录