一个简单而实用的js动画框架,支持动画缓动算法函数,如Linear、Cubic、Back、Bounce等,支持改变高度,宽度,透明度,边框,外边距的基本动画,支持动画的回调函数,如开始、暂停、完成callback等。
参数名称 | 参数说明 | 是否必须 |
---|---|---|
duration | 动画持续时间 | 是 |
frequence | 帧频,推荐30 | 是 |
tweenFunc | 动画缓动函数,如:Tween.Bounce.easeIn | 是 |
targetPos | 动画元素目标位置,如:{left: 300, top: 400} | 是 |
opacity | 透明度,如60 | 否 |
width | 宽度,不带单位,如200 | 否 |
height | 高度,不带单位,如200 | 否 |
marginX | 外边距,其中X表示Top、Left、Right、Bottom | 否 |
border | 边框,如:'2px solid red' | 否 |
onStart | 动画开始callback,其中this执行当前动画元素 | 否 |
onStop | 动画停止callback,其中this执行当前动画元素 | 否 |
onComplete | 动画完成callback,其中this执行当前动画元素 | 否 |
方法名称 | 方法说明 | 是否共用 |
---|---|---|
init | 动画实例初始化 | 是 |
stop | 停止动画 | 是 |
back | 动画原路返回 | 是 |
var options = {
duration: 2000,
frequence: 30,
tweenFunc: Tween.Linear,
targetPos: {left: 400, top: 300},
opacity: 40,
width: 80,
height: 80,
onComplete: function() {
console.log('done');
}
};
var anim = new Anim(animElem, options);
anim.init();
动画demo展示