AniX is a lightweight and easy-to-use animation library with excellent performance and good compatibility for modern browsers.
It uses the native css transition attribute, better than js simulation animation performance. And you can also enable hardware acceleration with it.
AniX only less than 3k(gzip) in size. It achieves almost the same effect as any other huge library of animations.
View demo, please click here.
Install and Import anix.
| $ npm install anix --save-dev
|
| ...
|
|
|
| import { AniX } from 'anix';
|
Use the umd version anix.umd.js. Check out the UMD repository for more details.
| <script src="./js/anix.umd.ts" type="text/javascript"></script>
|
Use jQuery plugin anix.jq.js, that supports chain syntax.
| <script src="./js/jquery.min.js" type="text/javascript"></script>
|
| <script src="./js/anix.jq.js" type="text/javascript"></script>
|
Basic usage.
| 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(.5, {
|
| 'left': '500px',
|
| 'background-color': '#ffcc00'
|
| });
|
Use in 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>
|
| );
|
| }
|
| }
|
General documents please visit https://a-jie.github.io/AniX/
jQuery plug-in documents are as follows
| //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
|
Test and Build – install and build all task
build jquery or umd version
demo example (the document page) is used create-react-app
| cd ./example
|
| npm install
|
| npm start
|
| npm run build
|
Then open http://localhost:3000/
Use test cases
view the ./test/test.html
Other
There are other versions here, of course, they are not necessary. Angular version, React version and Vue version…
License
The MIT License.
The post AniX – JavaScript animation library appeared first on FrontNet Blog.
