English
资源说明：Move.js 是一个轻量级的JavaScript库，专为简化CSS3动画的创建而设计。它提供了简洁的API，使得开发者可以方便地通过函数调用来实现复杂的动画效果，避免了CSS3过渡和动画语法的复杂性。
### 基础知识
Move.js 的核心功能在于其 `set()` 方法。例如，如果有一个带有`box`类的`div`元素，我们想要在鼠标悬停时将其从左侧移动100像素，通常使用CSS3会这样写：
```css
.box {
-webkit-transition: margin 1s;
-moz-transition: margin 1s;
-o-transition: margin 1s;
transition: margin 1s;
}
.box:hover {
margin-left: 100px;
}
```
而使用Move.js，这个过程变得非常简单：
```javascript
move('.box')
.set('margin-left', 100)
.end();
```
`set()` 方法接受两个参数：CSS属性名和值。`end()` 方法则用于结束动画并应用最终样式。
### 入门指南
开始使用Move.js的步骤如下：
1. 访问Move.js的GitHub页面，下载最新版本的库文件。
2. 将下载的Move.js文件复制到项目的工作目录中。
3. 在HTML文件中引入Move.js库，如下所示：
```html
Move.js Demo
Play
```
4. 创建一个CSS文件`styles.css`，并为`.box`和`#playButton`定义样式，以便为示例提供视觉效果。
```css
.box {
margin: 10px;
width: 100px;
height: 100px;
background: #7C9DD4;
box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
display: block;
font-size: 20px;
margin: 20px 10px;
font-weight: bold;
color: #222;
text-decoration: none;
}
```
5. 添加JavaScript代码来实现动画效果。例如，让`.box`在点击`playButton`后向右移动300像素：
```javascript
document.getElementById('playButton').onclick = function(e) {
move('.box')
.x(300)
.end();
};
```
这里的`.x(300)`方法是Move.js提供的，用于改变元素的`transform: translateX`属性，将元素向右移动指定的像素数。
### 动画方法
除了`set()`和`.end()`之外，Move.js还提供了其他方法，如：
- `.x(value)` 和 `.y(value)`：分别设置元素的水平和垂直位移（基于`translateX`和`translateY`）。
- `.rotate(value)`：旋转元素的角度。
- `.scale(x, y)`：缩放元素的宽度和高度。
- `.skew(x, y)`：倾斜元素。
- `.duration(value)`：设置动画持续时间。
- `.easing(value)`：设置缓动函数，控制动画的速度变化。
Move.js 还支持链式调用，这意味着可以在一个调用链中组合多个方法，创建复杂的动画序列。
通过这种方式，Move.js极大地简化了CSS3动画的实现，使得开发者可以更专注于动画逻辑，而不是底层的CSS语法。无论你是新手还是经验丰富的开发者，Move.js都是一个值得考虑的工具，可以帮助你在项目中快速创建流畅、高性能的动画效果。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
