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 相关文章推荐
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
javascript常用的方法整理
Aug 20 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
手机端转换rem适应
Apr 01 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
JS实现的A*寻路算法详解
Dec 14 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实现一维数组转二维数组的方法
2015/02/25 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
tab栏切换原理
2017/03/22 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
python中wx模块的具体使用方法
2020/05/15 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
物业经理自我鉴定
2014/03/03 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript