Move.js入门


Posted in Javascript onFebruary 08, 2017

在网站上,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" 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;
}

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

 Move.js入门

现在,让我们写下第一个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" 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>

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();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
JS中判断null的方法分析
Nov 21 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 #Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 #Javascript
简单实现bootstrap导航效果
Feb 07 #Javascript
vue.js实现请求数据的方法示例
Feb 07 #Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 #Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 #Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 #Javascript
You might like
php中的MVC模式运用技巧
2007/05/03 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
Python random模块常用方法
2014/11/03 Python
Python Socket使用实例
2017/12/18 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Python实现手势识别
2020/10/21 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
早会主持词
2014/03/17 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
信息技术课教学反思
2016/02/23 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Python的这些库,你知道多少?
2021/06/09 Python