Github轻量级开源动画引擎——Animejs

JavaScript018

Github轻量级开源动画引擎——Animejs,第1张

Anime.js是一个轻量级的JavaScript动画库,具有简单但功能强大的API。它与CSS属性,SVG,DOM属性和JavaScript对象一起使用。

Github

在Github上已收获近35k的star数,可见其非常受广大使用者的热爱!

特性

复杂的交错动画变得简单

css分层转换

在单个HTML元素上同时以不同的时间对多个CSS变换属性进行动画处理。

控件和回调

时间就是一切

使用完整的内置回调和控件功能同步播放,暂停,控制,倒退和触发事件。

动画任何东西

HTML,JS,CSS,SVG

安装使用

ES6:

CommonJS:

Demo

文字动画

块状动画

徽标动画

球状动画

总结

anime是一个非常值得使用的动画引擎,它足够简单,足够满足需求,足够的轻量,足够的惊艳!

方法调用该粒子插件:

particlesJS('particles-js', {

particles: {

color: '#fff',

shape: 'circle',

opacity: 1,

size: 4,

size_random: true,

nb: 150,

line_linked: {

enable_auto: true,

distance: 100,

color: '#fff',

opacity: 1,

width: 1,

condensed_mode: {

enable: false,

rotateX: 600,

TweenMax.js是动画插件库GSAP(GreenSock Animation Platform)的核心文件,加载后即可使用四个主要运动类TweenLite、TweenMax、TimelineLite、TimelineMax和一些其他插件。可对一个或多个物件进行动画,或添加至时间轴中设计复杂的影片。

GSAP最初在flash时代(2004-2006)是作为flash软件的插件用来增添动画效果,当时的名字是「GreenSock Tweening Platform」(GreenSock补间平台)。后来Flash逐渐没落,在网页上的应用,除了游戏和视频播放之外不断减少。出于自身发展考虑,GreenSock在v12(第十二版)中,加入了JavaScript的Class,也就是说我们可以在HTML网页中使用TweenLite或TweenMax…等来制作动画,也藉此版本把发展计划的名称更名为「GreenSock Animation Platform」(GreenSock动画平台),主要是把「Tweening」换成「Animation 」,因为前者主要为Flash在使用的名词,而后者就属于比较广义的「动画」,后来逐步发展为全平台均可应用的动画库。

最新的v2.x版本则全面支持html5和css3动画,并适应于主流的浏览器。

在网页上GreenSock目前提供使用的有「TweenLite」、「TweenMax」、「TimelineLite」、「TimelineMax」这四个项目,虽比Flash来的少,不过也是最常用的几项,相信可以帮助设计师们在不使用Flash的情形之下,制作许多不同凡响的动画效果,另外关于这四项的差别也跟Flash版本一样

TweenMax.js的优势在于性能强劲和使用简便。

TweenMax中文网