AniX

Una biblioteca de animación JavaScript súper fácil y liviana.

---

Descripción general

Anix es una biblioteca de animación liviana y fácil de usar con excelente rendimiento y buena compatibilidad para los navegadores modernos.

Utiliza el atributo de transición CSS nativo, mejor que el rendimiento de animación de simulación JS. Y también puede habilitar la aceleración de hardware con él.

Anix solo menos de 3K (GZIP) de tamaño. Logra casi el mismo efecto que cualquier otra gran biblioteca de animaciones.

Ver demostración, haga clic aquí.

Instalar e incluir

Instalar e importar anix.

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

import { AniX } from ' anix ' ; 

Use la versión UMD anix.umd.js. Consulte el repositorio de UMD para obtener más detalles.

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

Use el complemento jQuery anix.jq.js, que admite la sintaxis de la cadena.

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

Uso

Uso básico.

 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 Plug-In Uso Anix.jq.js

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

Usar en 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 >
    ) ;
  }
} 

¿Por qué?

Hay muchas bibliotecas de animación, ¿por qué usar Anix?

• En primer lugar, es muy pequeño y 3KB (GZIP) es muy adecuado para su uso en la página móvil (porque hay un requisito de tamaño).

• En segundo lugar, Anix utiliza directamente las propiedades de animación CSS nativa, que es de muy alto rendimiento.

• Buena compatibilidad, después de muchas pruebas de máquina reales, buen rendimiento. Incluye una variedad de dispositivos Android

Documentación

Documentos generales Visite https://adajuly.github.io/anix/

Los documentos de complemento de jQuery son los siguientes

 //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 

Probar y construir

instalar y construir toda la tarea

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

construir la versión jQuery o UMD

npm run jq
npm run umd

Ejemplo de demostración (la página del documento) se utiliza CREATE-REACT-APP

 cd ./example
npm install
npm start
npm run build

Luego abra http: // localhost: 3000/

Utilice casos de prueba

Ver el ./test/test.html

Otro

Hay otras versiones aquí, por supuesto, no son necesarias. Versión react y versión vue ...

Licencia

La licencia del MIT.