一个简单易用的CSS3动画轻量库。
使用motionCubeJs可以快速的对元素进行简单的动画效果设置，还可以进行多个关键帧的连续动画设置和动画关键帧的管理。
直接在页面引用即可
<script src = "motionCube.js"></script>var 'newVariable' = new Motion('element');
//使用new关键字传入一个目标元素新建一个Motion对象,即可使用motionCubeJs的api设置元素的动画效果- newFrame (新建关键帧)
/*
* @param1 {number} 动画过渡时间
* @param2 {string or array} 动画运动曲线
*/
<br/>
'motionVariable'.newFrame(200,'ease') //在前一关键帧到新帧的过渡时间为200毫秒,运动曲线为'ease'.....
- matrix (transform 矩阵类)
/*
* translateAll
* @param1 {number} 元素X轴位移值
* @param2 {number} 元素Y轴位移值
* @param3 {number} 元素Z轴位移值
*/
'motionVariable'.newFrame(200,'ease')
.translateAll(20,30) //在新帧中添加X轴移动20pxY轴移动30px动作
/*
* rotateZ
* @param1 {number} 元素Z轴旋转角度
*/
'motionVariable'.newFrame(200,'ease')
.translateAll(20,30)
.rotateZ(45) //添加Z轴上旋转45度动作
//还有更多matrix类api查看...........
- newAttribute 设置自定义动画属性
'motionVariable'.newFrame(200,'ease')
.translateAll(20,30)
.rotateZ(45)
.newAttribute("opacity","0.5")//添加透明度变为0.5的动作.....
- prepare 触发动画前准备
'motionVariable'.newFrame(200,'ease')
.translateAll(20,30)
.rotateZ(45)
.prepare() //动画触发前准备.....
- move 播放动画
/*
* @param1 {number} 播放帧数
* @param2 {string} 关键帧运动方向
* @param3 {function} 回调函数
*/
'motionVariable'.move(2,'forward') //播放2帧动画.....
- loop 动画循环播放
/*
* @param1 {number} 动画循环次数
* @param2 {function} 回调函数
*/
'motionVariable'.loop(3,function(){console.log('done!')}) //运行所有关键帧的动画并循环3次,打印'done!'.....
- stop
/*
* @param1 {function} 回调函数
*/
'motionVariable'.stop() //.....
- reset
/*
* @param1 {number} 动画停止的关键帧下标值
*/
'motionVariable'.reset('2') //停止在第二帧并且重置所有参数关键帧的运动曲线采用的是transition-timing-function的值,默认值有以下几个:
'linear'
'ease'
'ease-in'
'ease-out'
'ease-in-out'
当然也可以使用贝塞尔曲线值来设置,预览其它贝塞尔曲线效果,可以浏览下面的连接:
http://cubic-bezier.com/
- 2d动画兼容:
IE 10.0+
chrome 4.0+
firefox 4.0+
safari 3.1+
opera 10.5+
..... - 3d动画兼容:
IE 10.0+
chrome 12.0+
firefox 10.0+
safari 4.0+
opera 15.0+