Move.js 使用简单函数创建 CSS3 动画
Move.js 是一个使用简单函数创建 CSS3 动画的一个简单的 JavaScript 库，本篇文章将为大家介绍 Move.js 的基础知识以及使用方法。
基础知识
Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API。让我们假设有一个带类 box 的 div 元数，当鼠标 移动到 div 上面的时候我们想从左侧移动元素 100 个像素。在这种情况下，我们的代码如果所示：
.box {
-webkit-transition: margin 1s;
-moz-transition: margin 1s;
-o-transition: margin 1s;
transition: margin 1s;
}
.box:hover {
margin-left: 100px;
}使用 Move.js 我们可以简单调用 set() 方法实现同样的结果，如下：
move('.box')
.set('margin-left', 100)
.end();开始入门
首先访问 Move.js 的 GitHub 地址并下载最新的包，提取并拷贝 Move.js 文件到你的工作目录。接下来在你的 html 页面中引入该文件。完成后的页面应该如下：
<!DOCTYPE html>
<html>
<head>
<title>Move.js Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<a href="#" rel="external nofollow" rel="external nofollow" id="playButton">Play</a>
<div class="box"></div>
<script type="text/javascript" src="js/move.js"></script>
</body>
</html>我们 已经定义了一个类为 box 的 div 元数和一个 ID 为 playButton 的 a 链接以用于我们的 demo。让我们创建一个 styles.css 文件并添加下面的样式。注意下面的样式对于 Move.js 来说不是必须的：
.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;
}现在让我们写下第一个 Move.js 片段。我们需要附加一个 onclick 事件处理程序到 palyButton 上，并在单击的时候使其向右移动。事件处理程序的 JavaScript 代码如下，这段代码添加 transform:translateX(300px) 到 box 元数上：
document.getElementById('playButton').onclick = function(e) {
move('.box')
.x(300)
.end();
};添加 Move.js 代码后的完整代码如下
<!DOCTYPE html>
<html>
<head>
<title>Move.js Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<a href="#" rel="external nofollow" rel="external nofollow" id="playButton">Play</a>
<div class="box"></div>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript">
document.getElementById('playButton').onclick = function(e){
move('.box')
.x(300)
.end();
};
</script>
</body>
</html>方法函数
在前面的 demo 中，我们看到了x() 方法。现在让我们了解 Move.js 的其他方法。
set(prop, val)
set()方法用于设置元素的 CSS 属性，他带有两个参数：CSS 属性和属性值。示例用法：
.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')add(prop, val)
add() 方法用来增加其已经设置的属性值。该方法必须数值型值，以便用来增加。该方法必须有两个参数：属性值和其增量：
.add('margin-left', 200)
在前面的代码片段调用后，会在其值的基础上增加 200px。
sub(prop, val)
sub() 是 add() 的逆过程，他接受两个相同的参数，但其值将从属性值中减去。
.sub('margin-left', 200)
rotate(deg)
正如名称所暗示的，该方法通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的 transform 属性上。下面的代码旋转元素 90deg：
.rotate(90)
这段代码将添加如下css到元素上：
transform:rotate(90deg)
duration(n)
通过该方法，你可以设置动画的播放时间。例如：如下代码，2 秒钟将元素从左侧往右移动 200px：
.set('margin-left', 200)
.duration('2s')另一例子，下面的代码。Move.js在2秒钟内将会修改元素的margin属性，设置背景色，同时将元素旋转90度。
.set('margin-left', 200)
.set('background-color', '#CCC')
.rotate(90)
.duration('2s')
translate(x[, y])
translate()方法用于修改元素的默认位置，使用提供的坐标作为参数，如果仅设置一个参数，将作为x坐标，如果提供了第二个参数，将作为y坐标：
.translate(200, 400)
x() 和 y()
x()方法用于调整元素的x坐标，y()方法用于调整元素的y坐标。两个方法的参数可以是正数也可以是负数，如下：
.x(300)
.y(-20)skew(x, y)
skew()用于调整一个相对于x和y轴的角度。该方法可以被分为skewX(deg)和skewY(deg)两个方法：
.skew(30, 40)
scale(x, y)
该方法用于放大或压缩元素的大小，按照提供的每一个值，将调用transform的scale方法：
.scale(3, 3)
ease(fn)
如果你使用过CSS3过渡，你就了解ease函数作用在transition属性上。他指定了过渡的行为。每个 ease 函数是 in、out、in-out、snap、cubic-bezeir等。这些函数可以通过Move.js提供的ease()方法得到调用。例如：
.ease('in').x(400)
.ease('cubic-bezier(0,1,1,0)').x(400)end()
该方法用于 Move.js 代码片段的结束，他标识动画的结束。技术上该方法触发动画的执行。该方法接受一个可选的 callback 回掉函数。代码如下：
move('.box')
.set('background-color', 'red')
.duration(1000)
.end(function() {
alert("Animation Over!");
});delay(n)
正如方法所暗示的，该方法提供一个时间的数值作为动画的延时。如下：
move('.box')
.set('background-color', 'red')
.delay(1000)
.end();then()
该方法是Move.js中一个最重要的函数。他用于分割动画为两个集合，并按顺序执行。如下动画被分为两步，通过then()方法实现分割：
move('.box')
.set('background-color', 'red')
.x(500)
.then()
.y(400)
.set('background-color', 'green')
.end();创建复杂动画
在本教程中，我们已经写了很多基本的 动画来了解各个方法。接下来，我们使用Move.js可以很容易的创建复杂的动画。该demo阐述了Move.js的大部分内容，在demo page
上我们创建了动画的描述，代码如下：
move('.square')
.to(500, 200)
.rotate(180)
.scale(.5)
.set('background-color', '#FF0551')
.set('border-color', 'black')
.duration('3s')
.skew(50, -10)
.then()
.set('opacity', 0)
.duration('0.3s')
.scale(0.1)
.pop()
.end();如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论