Move.js入门
在网站上，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片段。我们需要附加一个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();
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
原生js实现百叶窗效果及原理介绍
百叶窗大家都见过吧!如图: 原理: 如图所示,空心格子就好比是每个li,给它设定相对定位属性,设置overflow:hidden:黑块为li子元素,高度为li的2倍,设置absolute属性,我们正是要改变它的top值从而获得变化!(右上角多余块与本图无关) 布局分析: 注意top值得变化!默认top=0时候,显示的"一楼上铺",当top=-40px时候,li的子元素 上移40px,这时候显示的内容就为"一楼下铺"注意p元素的包裹层div JS分析: 1.要开多个定
-
用move.js库实现百叶窗特效
今天操作的是一个,百叶窗效果的一个页面特效,好,现在直接上最终效果吧.demo做的有点low,不过效果都在了 这是html和css代码:思路就是,每一个li里面div,放几个p,通过调节translatY,来控制. <style> *{ padding: 0; margin: 0; list-style: none; } #bai{ width: 400px; height: auto; float: left; margin-left:20px auto; } li{ text-align:
-
用Move.js配合创建CSS3动画的入门指引
在网站上,CSS3 的过渡和动画是当前创建轻量级动画的首选方法.不幸的是,很多开发者发现他们自己的语法和复杂和混乱的.如果这听起来像你自己,对你来说,或许Move.js是完美的方案.Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库.本教程将探讨Move.js的基础知识,并提供一个在线demo. 基础知识 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API.让我们假设有一个带类 box 的 div 元数,当鼠标 移动到 div 上面
-
js实现横向百叶窗效果网页切换动画效果的方法
本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全.代码如下: 复制代码 代码如下: <html> <head> <title>js网页百叶窗动态切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0
-
JS实现类似百叶窗下拉菜单效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: function leftmove(){ var oLeft_ul=document.getElementById('left_ul'); var aLeft_li=oLeft_ul.children;//获得左侧ul下的第一个子集li var aleft_ul_hidden=oLeft_ul.getElementsByTagName('ul'); var aleft_span_hidden=oLeft_ul.getElementsByTag
-
JS实现网页百叶窗效果
网页百叶窗特效代码 window.innerHeight) clearInterval(stopit) } else if (document.all){ clipbottom-=speed for (i=1;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js实现绿白相间竖向网页百叶窗动画切换效果
本文实例讲述了js实现绿白相间竖向网页百叶窗动画切换效果.分享给大家供大家参考.具体分析如下: 前面我们讲解了一个网页百叶窗切换动画效果,不过是横向百叶窗,这个是竖向百叶窗,代码基本一样: 复制代码 代码如下: <html> <head> <title>百叶窗页面切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color
-
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
看到这种什么百叶窗的动画,以为都是flash实现的,最近突然灵光一闪,想到了用js实现(虽然我不是做前端的,本人做.net).代码虽然实现了,但是比较乱,先上个图: 一个js的动画,以前以为只有flash可以实现 代码主要就是一些数学的计算,然后结合html,css打造出类似flash的效果. 下面贴出主要的部分代码: function all(books){ for(var i=;i<self.rows;i++) { for (var j = ; j < self.columns; j++)
-
Move.js入门
在网站上,CSS3 的过渡和动画是当前创建轻量级动画的首选方法.不幸的是,很多开发者发现他们自己的语法和复杂和混乱的.如果这听起来像你自己,对你来说,或许Move.js是完美的方案.Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库.本教程将探讨Move.js的基础知识,并提供一个在线demo. 基础知识 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API.让我们假设有一个带类 box 的 div 元数,当鼠标 移动到 div 上面
-
js对象之JS入门之Array对象操作小结
不过在学脚本prototype.js的过程中发现有些方法我们很少用到,但是有些方法好像很经典,脚本库在不断的加大,眼前一片...继续我们JS入门,今天学习一下Array数组. 首先我们来看看它的定义: 复制代码 代码如下: var arrayObj = new Array() var arrayObj = new Array([size]) var arrayObj = new Array([element0[, element1[, [, elementN]]]]) 其中:arrayObj是赋
-
node.js入门实例helloworld详解
本文实例讲述了node.js入门实例helloworld.分享给大家供大家参考,具体如下: 将下面的代码保存为:server.js存到E盘下面的node目录中. var http = require('http'); function myNode(request, response){ response.writeHead(200, {'Content-type':'text/plain'}); response.write('hello world'); //hello world resp
-
three.js 入门案例详解
最近公司需要用tree.js实现一个3D图的显示,就看了官方文档,正好有时间,就记录下来. 由于我们公司的前端框架用的是angular,所以我就把我的treejs封装在一个directives里面.后面放源码 首先我们要知道three.js的下载地址它的地址是: https://github.com/mrdoob/three.js. 其次,什么是three.js? three.js的几个步骤: 1:引入three.js文件(打开调试窗口,并在Console下输入 THREE.REVISION命令
-
p5.js入门教程之小球动画示例代码
一.运动的小球 本节将用p5.js做一个在屏幕上运动的小球. 思路是用变量记录小球的位置,然后在draw()函数里对其做出改变,由于draw()函数会不断地运行(频率为FPS,默认60帧/秒),所以小球便产生了运动. 代码如下: var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是关键词,分别是Canvas的宽和高 x+=2; ellipse
-
p5.js入门教程和基本形状绘制
一.什么是p5.js 最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js. 主讲老师就是开发者之一--还是挺激动的. p5.js是一个为艺术家.设计师而开发的Javascript库,可以看作是Processing的Web版本.如果有Processing学习经验的话,p5.js上手会非常快. 至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者. 我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫. 二
-
p5.js入门教程之键盘交互
一.键盘交互相关关键词与函数 keyIsPressed: 关键词,按下按键时为true,反之为false keyCode: 关键词,用于判断按下哪个按键 keyPressed():函数,按键按下时触发一次 keyReleased():函数,按键松开时触发一次 keyIsDown():函数,按下指定按键时返回true,反之为false 以下是一个较综合的案例,用wsad与zxcv控制小球移动: var x=200; var y=200; var speed=2; function setup()
-
p5.js入门教程之平滑过渡(Easing)
一.跟随鼠标移动的小球 使用mouseX,mouseY可以创建一个跟随鼠标移动的小球. function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20); } 二.让小球更加平滑的移动--使用Easing 一般制作精良的UI界面都会用到平滑移动这一效果,也就是利用了名为"Easing"的方法. 实现思路是另外设置变量以进行位置的过渡,代
-
p5.js入门教程之图片加载
一.preload()函数与图片上传 preload()函数是一个特殊的函数,它同setup()类似,只在程序开始时运行一次,但顺序在setup()之前. 一般我们会将媒体文件(图片.声音)加载的语句放在preload()中,因为preload()有一个特性就是不加载完毕,程序就不会开始,保证了程序运行时不会出错. 在加载图片之前,我们需要先将图片文件上传. 方法是: ①点击编辑器左上角的小三角展开文件目录. ②点击文件目录右上角小三角,展开菜单后Add File. ③可以直接将图片文件拖到框里