AniX - JavaScript animation library
source link: https://www.tuicool.com/articles/VryUJzN
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
git clone [email protected].com:a-jie/AniX.git
npm install
npm run all
build jquery or umd version
npm run jq
npm run umd
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK