funny-anime
- 通过指定动画配置即时编译执行的js动画引擎,即使每个动画元素有上百个不同时间段(可能有重叠)不同值的缓动,也可以在极少逻辑判断中得出最终值;不过即时编译需要消耗大量资源不太适用于频繁初始化并销毁的情况
使用
npm install funny-anime
- 免安装可直接保存
https://feff01.github.io/funny-anime/dist/js/funny_anime.js
文件,本地 script 引入后通过 window.FunnyAnime
使用
import FunnyAnime from 'funny-anime';
let anime = new FunnyAnime(
element as HTMLElement,
[
{rz:180,tx:100},
{tt:1000, tx:-100, rz:180},
{ft:500, tt:1200, tx:140}
],
{
duration:2000,
directoin:"normal",
loop:1,
begin:0,
es:Easing.easeLinear,
order:"normal",
speed:1,
tx:{
duration,directoin,loop,begin,es
}
translate:{
duration,directoin,loop,begin,es
ty:{
duration,directoin,loop,begin,es
}
}
[custom_key]:{
duration,directoin,loop,begin,es
},
custom:{
duration,directoin,loop,begin,es
[custom_key]:{
...
}
}
},
function(...custom_values){
}
);
anime.play(0);
anime.play(1000,2000);
anime.play(2000,1000);
anime.play(undefined,1000);
anime.play();
anime.pause();
anime.step(1000);
[
{
name: "translate",
keys: ["tx", "ty", "tz"],
parent: "matrix"
},
{
name: "rotateX",
keys: ["rx"],
parent: "matrix"
},
{
name: "rotateY",
keys: ["ry"],
parent: "matrix"
},
{
name: "rotateZ",
keys: ["rz"],
parent: "matrix"
},
{
name: "rotate3d",
keys: ["rx3d", "ry3d", "rz3d", "ra3d"],
parent: "matrix"
},
{
name: "scale",
keys: ["sx", "sy", "sz"],
values: { sx: 1, sy: 1, sz: 1 },
parent: "matrix"
},
{
name: "opacity",
keys: ["o"],
values: { o: 1 }
},
]