用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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画,你就知道他在那里。

Javascript 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
js实现返回顶部效果
Mar 10 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
You might like
php 禁止页面缓存输出
2009/01/07 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python迭代dict的key和value的方法
2018/07/06 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
数字漫画:comiXology
2020/06/13 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
组织委员竞选稿
2015/11/21 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers