Skip to content

fortune-fu/jsAnim

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jsAnim

一个简单而实用的js动画框架,支持动画缓动算法函数,如Linear、Cubic、Back、Bounce等,支持改变高度,宽度,透明度,边框,外边距的基本动画,支持动画的回调函数,如开始、暂停、完成callback等。

Usage

参数

参数名称 参数说明 是否必须
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

动画demo展示

License

MIT

About

一个简单而实用的js动画框架

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 64.1%
  • HTML 24.8%
  • CSS 11.1%