AniX

매우 쉽고 가벼운 JavaScript 애니메이션 라이브러리.

---

개요

Anix는 가볍고 사용하기 쉬운 애니메이션 라이브러리로 최신 브라우저에 대한 성능이 뛰어나고 호환성이 뛰어납니다.

JS 시뮬레이션 애니메이션 성능보다 더 나은 기본 CSS 전환 속성을 사용합니다. 또한 하드웨어 가속도를 활성화 할 수도 있습니다.

ANIX 크기는 3K (GZIP) 미만입니다. 다른 거대한 애니메이션 라이브러리와 거의 같은 효과를 얻습니다.

데모보기, 여기를 클릭하십시오.

설치 및 포함

Anix를 설치하고 가져옵니다.

$ 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 애니메이션 속성을 직접 사용하여 매우 고성능입니다.

• 많은 실제 기계 테스트 후에는 좋은 호환성, 우수한 성능. 다양한 안드로이드 장치가 포함되어 있습니다

선적 서류 비치

일반 문서는 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

데모 예제 (문서 페이지)는 만들기-react-app을 사용합니다

 cd ./example
npm install
npm start
npm run build

그런 다음 http : // localhost : 3000/

사용 테스트 사례를 사용합니다

./test/test.html 을 봅니다

다른

물론 다른 버전이 있습니다. 물론 필요하지 않습니다. 반응 버전 및 vue 버전 ...

특허

MIT 라이센스.