标签

动效ui效果

By 小鸟游·飒

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路径动画让人印象深刻。


2019-01-28 10:31
暂时关闭评论
暂无相关评论