介绍
anix是一个轻量级且易于使用的动画库，在现代浏览器发挥优良的性能和良好的兼容性。它采用了原生的CSS属性的过渡，不是JS模拟动画，因此性能更好。并且可以使用硬件加速。ANIX不到3K的大小
有多种版本的ANIX实现，UMD版本，jQuery的版本和React版本等…
Github
|
1 |
https://github.com/drawcall/AniX |
简单使用
PS：可以先看demo标题进行预览，动态展示
使用npm进行包管理安装
|
1 |
$ npm install anix |
umd版本
|
1 |
<script src="./js/anix.umd.ts" type="text/javascript"></script> |
jquery版本
|
1 2 |
<script src="./js/jquery.js" type="text/javascript"></script> <script src="./js/anix.jq.ts" type="text/javascript"></script> |
|
1 2 3 4 5 6 7 8 |
//1. 导入AniX import { AniX } from 'anix'; //2. AniX.to AniX.to(dom, 1, { width: "200px", height: "100px" }); |
一共有以下四种方式可用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//AniX.to $(..).to(time: number, args: {ease?:string; delay?:number; [propName:string]:any;}) //AniX.fromTo $(..).to(time: number, fromArgs: Object, toArgs: Object) //AniX.kill $(..).kill(complete?: boolean) //AniX.get $(..).getTransform(param: any) //AniX.ease $.ease.easeOut |
React中使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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> ); } } |
Demo预览
总结
AniX具备良好的兼容性，经历过很多真机测试，性能好且包括各种Android设备等，是一个不错的动画库，enjoy it！
未经允许不得转载：一点博客-青梅煮码-共享博客 » 轻量级的CSS动画引擎——AniX
评论抢沙发