AniX

ไลบรารีแอนิเมชั่น JavaScript ที่ง่ายและมีน้ำหนักเบาสุด ๆ

---

ภาพรวม

ANIX เป็นห้องสมุดแอนิเมชั่นที่มีน้ำหนักเบาและใช้งานง่ายพร้อมประสิทธิภาพที่ยอดเยี่ยมและเข้ากันได้ดีสำหรับเบราว์เซอร์ที่ทันสมัย

มันใช้แอตทริบิวต์ การเปลี่ยน CSS ดั้งเดิมดีกว่าประสิทธิภาพการเคลื่อนไหวของ JS Simulation และคุณยังสามารถเปิดใช้งานการเร่งฮาร์ดแวร์ด้วย

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 plugin 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 plug-in usage 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

อื่น

แน่นอนว่ามีเวอร์ชั่นอื่น ๆ ที่นี่ไม่จำเป็น เวอร์ชันตอบสนองและเวอร์ชัน Vue ...

ใบอนุญาต

ใบอนุญาต MIT