move.js

一个轻量型 DOM 动画框架

特性

1. 无外部库依赖
2. 参数灵活且友好
3. 动画流畅，保证 60 帧每秒
4. 支持 http://easings.net/zh-cn 上所有的缓动特效
5. 支持多个元素同时运动
6. 支持动画完结回调，实现链式动画
7. 支持 CSS3 transform 动画

主函数：move(element, props[, duration][, fx][, complete])

对可选参数的先后顺序无要求，但对数据类型有要求。

element

• Type: HTMLElement

需要添加动画的 DOM 元素

props

• Type: Object

样式配置对象，支持大部分动画属性（自动补全、纠正单位），例如：

move(document.body,{width: 500,// 单位 'px' 会自动补全，推荐直接使用数值borderTopWidth: '100px',opacity: 0.5,// backgroundSize 可以使用百分数字符串（'110%'）也可以使用数值（1.1）表示backgroundSize: 1.1,// CSS3 动画支持，详细说明见[扩展 - CSS3 动画](#扩展css3-动画)translateX: 300});

查看支持哪些属性，请去往 Demo 和 Demo - CSS3 动画演示。

duration

• Type: Number
• Default: 400

fx

• Type: String
• Default: linear

缓动函数名，默认为匀速线性变化，所有支持的缓动函数名称见：http://easings.net/zh-cn

注：缓动函数全部存储在 Math.TWEEN 属性对象上，打开控制台打印 Math.TWEEN 查看详情。

complete

• Type: Fucntion

动画完毕时的回调函数，可以借助回调函数实现链式动画。

多个元素同时运动

有两种方式帮助我们实现多个元素同时运动

// 方式1：#a, #b, #c 同时运动move('#a',{width: 300});move('#b',{width: 1000});move('#c',{opacity: .5});

// 方式2：类名为 .box 所有元素同时运动move.each(document.getElementsByClassName('.box'),{width: 1000,opacity: 0.5});// 支持回调move.each($('div'),{opacity: 0.5},1000,function(){move.each(document.getElementsByTagName('DIV'),{height: 100,opacity: 1,marginTop: 20},1000)});

扩展：CSS3 动画（仅支持到 IE10）

框架支持 CSS3 transform 动画（见 Demo），但是是有条件地支持：

1. 框架只获取与解析你在 DOM 元素的 style 属性内声明的 transform 属性，写在 CSS 文件内的 transform 属性不获取
2. 支持的变形函数：translateXtranslateYtranslateZrotaterotateXrotateYrotateZscalescaleXscaleYscaleZskewskewXskewYperspective

现代浏览器获取计算后的 transform 时返回的是一个 matrix() 函数，处理提取起来比较困难，运动框架默认支持提取与解析 DOM 元素 style 属性内的 transform 字符值。所以，如果你对 CSS3 动画及其性能有较高要求，请直接使用 CSS3 原生动画。

IE9 的 transform 样式无法正常获取，故不考虑支持。

页面滚动动画：move.scroll(target[, duration][, fx][, completeCallback])

例如：滚动至页面顶部

move.scroll(0,1000,'easeInQuad',function(){console.log('done!');})

例如：滚动至页面底部

move.scroll(document.body.scrollHeight,'easeInOutExpo');

TODO

• 兼容至 IE8 IE9（天猫和淘宝近期宣布放弃对 IE8 的支持，腾讯企业号和企业微信近期也决定放弃对 IE8 的支持）
• 支持 backgroundSize 百分字符串与数值两种值类型
• Demo 完善，功能展示补全
• 支持 CSS3 属性动画
• 添加页面滚动动画支持 move.scroll()
• 支持多个元素同时运动 move.each()

---

如果这个运动框架帮助了你的开发，希望你能回来这里点个 Star！