这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了用 Move.js 配合创建 CSS3 动画的入门指引, 文中介绍了这个 JavaScript 库中的一些基本方法的使用, 需要的朋友可以参考下
在网站上,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 片段。我们需要附加一个 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 能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画,你就知道他在那里。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0625/270346.html