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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
js实现简单抽奖功能
Nov 24 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
咖啡与水的关系
2021/03/03 冲泡冲煮
php 文件上传系统手记
2009/10/26 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
用js遍历 table的脚本
2008/07/23 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
JavaScript运算符小结
2015/06/03 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
vue实现记事本功能
2019/06/26 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python 二维数组90度旋转的方法
2019/01/28 Python
详解python 爬取12306验证码
2019/05/10 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
前台领班岗位职责
2013/12/04 职场文书
教师旷工检讨书
2014/01/18 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
年终总结会议主持词
2014/03/17 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
创先争优公开承诺书
2014/08/30 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
办公用品质量保证书
2015/05/11 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle