AniX

Une bibliothèque d'animation JavaScript super facile et légère.

---

Aperçu

ANIX est une bibliothèque d'animation légère et facile à utiliser avec d'excellentes performances et une bonne compatibilité pour les navigateurs modernes.

Il utilise l'attribut de transition CSS natif, mieux que les performances d'animation de simulation JS. Et vous pouvez également activer l'accélération matérielle avec elle.

Anix seulement moins de 3k (gzip) de taille. Il réalise presque le même effet que toute autre énorme bibliothèque d'animations.

Afficher la démo, veuillez cliquer ici.

Installer et inclure

Installer et importer ANIX.

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

import { AniX } from ' anix ' ; 

Utilisez la version UMD anix.umd.js. Consultez le référentiel UMD pour plus de détails.

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

Utilisez le plugin jQuery ANIX.jq.js, qui prend en charge la syntaxe de la chaîne.

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

Usage

Utilisation de base.

 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!' ) ;
  } ,
} ) ; 

Utilisation du plug-in jQuery anix.jq.js

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

Utilisation dans 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 >
    ) ;
  }
} 

Pourquoi?

Il y a beaucoup de bibliothèques d'animation pourquoi utiliser ANIX?

• Tout d'abord, il est très petit et 3KB (gzip) est très adapté à une utilisation sur la page mobile (car il y a une exigence pour la taille).

• Deuxièmement, ANIX utilise directement les propriétés d'animation CSS natives, ce qui est très haute performance.

• Bonne compatibilité, après de nombreux tests de réels machines, bonnes performances. Comprend une variété d'appareils Android

Documentation

Documents généraux Veuillez visiter https://adajuly.github.io/anix/

Les documents du plug-in jQuery sont les suivants

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

Tester et construire

Installer et construire toute la tâche

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

Créer une version jQuery ou UMD

npm run jq
npm run umd

Exemple de démonstration (la page du document) est utilisé

 cd ./example
npm install
npm start
npm run build

Puis ouvrez http: // localhost: 3000 /

Utiliser des cas de test

Voir le ./test/test.html

Autre

Il existe d'autres versions ici, bien sûr, elles ne sont pas nécessaires. React Version et Vue Version ...

Licence

La licence MIT.