编程 Javascript

用Move.js配合创建CSS3动画的入门指引

Posted in Javascript onJuly 22, 2015

在网站上，CSS3 的过渡和动画是当前创建轻量级动画的首选方法。不幸的是，很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己，对你来说，或许Move.js是完美的方案。Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库。本教程将探讨Move.js的基础知识，并提供一个在线demo。

基础知识

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 page并下载最新的包，提取并拷贝 Move.js 文件到你的工作目录。接下来，在你的html 页面中引入该文件。完成后的页面应该如下：

<!DOCTYPE html>
<html>
 <head>
 <title>Move.js Demo</title>
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 </head>
 <body>
 <a href="#" 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;
}

我们的html页面看起来应该如下图：

用Move.js配合创建CSS3动画的入门指引

现在，让我们写下第一个Move.js片段。我们需要附加一个onclick事件处理程序到palyButton上，并在单击的时候使其向右移动。事件处理程序的JavaScript代码如下，这段代码添加 transform:translateX(300px) 到 box 元数上：

document.getElementById('playButton').onclick = function(e) {
 move('.box')
 .x(300)
 .end();
};

添加Move.js代码后的完整代码如下：

HTML

<!DOCTYPE html>
<html>
 <head>
 <title>Move.js Demo</title>
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 </head>
 <body>
 <a href="#" 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>

CSS

.box {
 margin-left: 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的方法

在前面的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() and 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创建复杂动画 ##

在本教程中，我们已经写了很多基本的动画来了解各个方法。接下来，我们使用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();

结论

希望本篇教程能带给你关于Move.js是什么的清晰的认识和如何创建CSS3动画。使用Movejs能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。

用Move.js配合创建CSS3动画的入门指引

- Author -

王焕亮

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

showModalDialog 和 showModelessDialog

Jan 22 Javascript

js文件缓存之版本管理详解

Jul 05 Javascript

js模拟hashtable的简单实例

Mar 06 Javascript

js的Prototype属性解释及常用方法

May 08 Javascript

javascript日期格式化方法小结

Dec 17 Javascript

bootstrap模态框实现拖拽效果

Dec 14 Javascript

Angularjs自定义指令实现三级联动选择地理位置

Feb 13 Javascript

vue2手机APP项目添加开屏广告或者闪屏广告

Nov 28 Javascript

vuex state中的数组变化监听实例

Nov 06 Javascript

微信小程序表单验证WxValidate的使用

Nov 27 Javascript

vue实现多个echarts根据屏幕大小变化而变化实例

Jul 19 Javascript

基于JS实现计算24点算法代码实例解析

Jul 23 Javascript

js判断手机端(Android手机还是iPhone手机)

Jul 22 #Javascript

javascript实现网页屏蔽Backspace事件，输入框不屏蔽

Jul 21 #Javascript

Javascript实现获取及设置光标位置的方法

Jul 21 #Javascript

详解参数传递四种形式

Jul 21 #Javascript

jquery实现Ctrl+Enter提交表单的方法

Jul 21 #Javascript

jQuery实现html元素拖拽

Jul 21 #Javascript

异步安全加载javascript文件的方法

Jul 21 #Javascript