AniX

一个超级轻巧的JavaScript动画库。

---

概述

Anix是一个轻巧且易于使用的动画库，具有出色的性能和良好的现代浏览器兼容性。

它使用本机CSS过渡属性，比JS模拟动画性能更好。您还可以启用硬件加速度。

ANIX的大小小于3K（GZIP） 。它的效果几乎与其他巨大的动画库相同。

查看演示，请单击此处。

安装并包括

安装和导入过度。

$ npm install anix --save-dev
...

import { AniX } from ' anix ' ; 

使用UMD版本Anix.umd.js。查看UMD存储库以获取更多详细信息。

 < script src =" ./js/anix.umd.ts " type =" text/javascript " > </ script > 

使用支持链语法的jQuery插件Anix.jq.js。

 < script src =" ./js/jquery.min.js " type =" text/javascript " > </ script >
< script src =" ./js/anix.jq.js " type =" text/javascript " > </ script > 

用法

基本用法。

 AniX . to ( dom , 1 , {
  x : 300 ,
  y : 10 ,
  scale : 2 ,
  delay : 0.5 ,
  onComplete : function ( ) {
    alert ( 'over' ) ;
  } ,
} ) ;

// or
AniX . to ( dom , 1 , {
  width : '200px' ,
  'background-color' : '#ffcc00' ,
  ease : AniX . ease . easeOutBack ,
  onComplete : ( ) => {
    //STATE : COMPLETED!
    console . log ( 'STATE : COMPLETED!' ) ;
  } ,
} ) ; 

jQuery插件用法anix.jq.js

 $ ( '.demo' )
  . css ( { left : '0px' } )
  . to ( 0.5 , {
    left : '500px' ,
    'background-color' : '#ffcc00' ,
  } ) ; 

用于React（V16+）

 class MyComponent extends React . Component {
  constructor ( props ) {
    super ( props ) ;
    this . myRef = React . createRef ( ) ;
    this . clickHandler = this . clickHandler . bind ( this ) ;
  }

  clickHandler ( e ) {
    const node = this . myRef . current ;
    // animation
    AniX . to ( node , 1 , {
      x : 300 ,
      y : 10 ,
      scale : 2 ,
    } ) ;
  }

  render ( ) {
    return (
      < div >
        < div ref = { this . myRef } / >
        < button onClick = { this . clickHandler } > < / button >
      < / div >
    ) ;
  }
} 

为什么？

有很多动画库为什么要使用Anix？

• 首先，它非常小，3KB（GZIP）非常适合在移动页面上使用（因为大小需要）。

• 其次，Anix直接使用本机CSS动画属性，这是非常高性能的。

• 兼容良好，经过大量的真实机器测试，性能良好。包括各种Android设备

文档

一般文件请访问https://adajuly.github.io/anix/

jQuery插件文档如下

 //like AniX.to
$ ( . . ) . to ( time : number , args : { ease ?: string ; delay ?: number ; [ propName : string ] : any ; } )

//like AniX.fromTo
$ ( . . ) . fromTo ( time : number , fromArgs : Object , toArgs : Object )

//like AniX.kill
$ ( . . ) . kill ( complete ?: boolean )

//like AniX.get
$ ( . . ) . getTransform ( param : any )

//like AniX.ease
$ . ease . easeOut 

测试和构建

安装并构建所有任务

git clone [email protected]:adajuly/AniX.git
npm install
npm run all

构建jQuery或UMD版本

npm run jq
npm run umd

演示示例（文档页面）用于Create-React-App

 cd ./example
npm install
npm start
npm run build

然后打开http：// localhost：3000/

使用测试用例

查看./test/test.html

其他

当然，这里还有其他版本。 React版本和VUE版本...

执照

麻省理工学院许可证。