用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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 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实现微信扫码支付
2017/03/26 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
python基础教程之序列详解
2014/08/29 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
跟老齐学Python之print详解
2014/09/28 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Python类中self参数用法详解
2020/02/13 Python
Python爬取某平台短视频的方法
2021/02/08 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
几个Shell Script面试题
2014/04/18 面试题
师范学院毕业生求职信范文
2013/12/26 职场文书
文艺晚会主持词
2014/03/24 职场文书
灰雀教学反思
2014/04/28 职场文书
2015年元旦活动总结
2014/05/09 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
个人委托函范文
2015/01/29 职场文书
实践论读书笔记
2015/06/29 职场文书
医德医风学习心得体会
2016/01/25 职场文书
python 离散点图画法的实现
2022/04/01 Python