轻量级的CSS动画引擎——AniX

介绍

ANIX是一个轻量级且易于使用的动画库,在现代浏览器发挥优良的性能和良好的兼容性。它采用了原生的CSS属性的过渡,不是JS模拟动画,因此性能更好。并且可以使用硬件加速。ANIX不到3K的大小
有多种版本的ANIX实现,UMD版本,jQuery的版本和React版本等…

轻量级的CSS动画引擎——AniX

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
轻量级的CSS动画引擎——AniX
轻量级的CSS动画引擎——AniX
轻量级的CSS动画引擎——AniX
轻量级的CSS动画引擎——AniX
轻量级的CSS动画引擎——AniX

总结

AniX具备良好的兼容性,经历过很多真机测试,性能好且包括各种Android设备等,是一个不错的动画库,enjoy it!

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » 轻量级的CSS动画引擎——AniX

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活