介绍
ANIX是一个轻量级且易于使用的动画库,在现代浏览器发挥优良的性能和良好的兼容性。它采用了原生的CSS属性的过渡,不是JS模拟动画,因此性能更好。并且可以使用硬件加速。ANIX不到3K的大小
有多种版本的ANIX实现,UMD版本,jQuery的版本和React版本等…
![超级简单,轻量级的CSS动画引擎——AniX](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
Github
https://github.com/drawcall/AniX
简单使用
PS:可以先看demo标题进行预览,动态展示
使用npm进行包管理安装
$ npm install anix
umd版本
<script src="./js/anix.umd.ts" type="text/javascript">script>
jquery版本
<script src="./js/jquery.js" type="text/javascript">script>
<script src="./js/anix.jq.ts" type="text/javascript">script>
//1. 导入AniX
import { AniX } from \'anix\';
//2. AniX.to
AniX.to(dom, 1, {
width: "200px",
height: "100px"
});
一共有以下四种方式可用
//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中使用
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预览
![超级简单,轻量级的CSS动画引擎——AniX](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
![超级简单,轻量级的CSS动画引擎——AniX](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
![超级简单,轻量级的CSS动画引擎——AniX](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
![超级简单,轻量级的CSS动画引擎——AniX](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
![超级简单,轻量级的CSS动画引擎——AniX](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
![超级简单,轻量级的CSS动画引擎——AniX](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
总结
AniX具备良好的兼容性,经历过很多真机测试,性能好且包括各种Android设备等,是一个不错的动画库,enjoy it!
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/16793.html