AniX

Perpustakaan Animasi JavaScript yang sangat mudah dan ringan.

---

Ringkasan

Anix adalah perpustakaan animasi yang ringan dan mudah digunakan dengan kinerja yang sangat baik dan kompatibilitas yang baik untuk browser modern.

Ini menggunakan atribut transisi CSS asli, lebih baik dari kinerja animasi simulasi JS. Dan Anda juga dapat mengaktifkan percepatan perangkat keras dengannya.

Anix hanya kurang dari 3k (GZIP) dalam ukuran. Ini mencapai efek yang hampir sama dengan perpustakaan animasi besar lainnya.

Lihat demo, silakan klik di sini.

Instal dan termasuk

Instal dan impor anix.

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

import { AniX } from ' anix ' ; 

Gunakan versi UMD anix.umd.js. Lihat Repositori UMD untuk lebih jelasnya.

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

Gunakan plugin jQuery anix.jq.js, yang mendukung sintaks rantai.

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

Penggunaan

Penggunaan dasar.

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

Penggunaan plug-in jQuery anix.jq.js

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

Gunakan di 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 >
    ) ;
  }
} 

Mengapa?

Ada banyak perpustakaan animasi mengapa menggunakan anix?

• Pertama -tama, sangat kecil dan 3KB (GZIP) sangat cocok untuk digunakan pada halaman seluler (karena ada persyaratan untuk ukuran).

• Kedua, Anix secara langsung menggunakan properti animasi CSS asli, yang berkinerja sangat tinggi.

• Kompatibilitas yang baik, setelah banyak tes mesin nyata, kinerja yang baik. Termasuk berbagai perangkat Android

Dokumentasi

Dokumen Umum Silakan kunjungi https://adajuly.github.io/anix/

Dokumen plug-in jQuery adalah sebagai berikut

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

Uji dan Bangun

Instal dan Bangun Semua Tugas

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

Bangun versi jQuery atau UMD

npm run jq
npm run umd

Contoh demo (halaman dokumen) digunakan create-react-app

 cd ./example
npm install
npm start
npm run build

Lalu buka http: // localhost: 3000/

Gunakan kasus uji

Lihat ./test/test.html

Lainnya

Ada versi lain di sini, tentu saja, mereka tidak perlu. Versi bereaksi dan versi vue ...

Lisensi

Lisensi MIT.