在网站上,CSS3过渡和动画是创建轻量级动画的首选方法。不幸的是,许多开发人员发现他们自己的语法复杂和混乱。如果听起来像你自己,也许Move.js是你的完美解决方案。Move.js是一个简单的JavaScript库,使用简单的函数来创建CSS3动画。本教程将讨论Move.js的基本知识,并提供一个在线演示。
基础知识
Move.js为创建CSS3动画提供了最简单的JavaScript API。让我们假设有一个带有类框的div元素号。当鼠标在div上移动时,我们希望将元素从左边移动100像素。在这种情况下,我们的代码如下所示:box {-web kit-transit :页边空白1s;-moz-transit :保证金1s;-o-transit :保证金1s;transition:边距1s;} . box : hover { margin-left : 100 px;}使用Move.js,我们可以简单地调用set()方法来达到同样的结果,如下所示:
移动('。方框')。set('左边距',100)。end();初级课程
首先,访问Move.js GitHub页面并下载最新的包,将Move.js文件提取并复制到您的工作目录中。接下来,将该文件引入您的html页面。完成的页面应该如下所示:
!DOCTYPE html html head title move . js Demo/title link rel='样式表' type=' text/CSS ' href=' styles . CSS '/head body A href=' # ' ID=' play button ' play/A div class=' box '/div script type=' text/JavaScript ' src=' http 3360 js/move . js '/script/body/html我们已经为我们的演示定义了一个带有一个box类的div元素和一个带有play button ID的链接让我们创建一个styles.css文件并添加以下样式。请注意,以下样式对于Move.js不是必需的:box { margin: 10px宽度: 100 px;高度: 100像素;背景# 7C9DD4box-shadow : 5px 5px 0px # D1D 1;} # playButton { display : block;font-size : 20px;margin: 20px 10pxfont-weight:粗体;color: # 222文本装饰:无;}我们的html页面应该如下图所示:
现在,让我们写下第一个Move.js片段。我们需要在播放按钮上附加一个onclick事件处理程序,并在单击时将其向右移动。事件处理程序的JavaScript代码如下。此代码将transform:translateX(300px)添加到box元素编号中:
document . getelementbyid(' playButton ')。onclick=function(e) { move('。方框')。x(300)。end();};添加Move.js代码后的完整代码如下:
超文本标记语言
!DOCTYPE html html head title move . js Demo/title link rel='样式表' type=' text/CSS ' href=' styles . CSS '/头体a href=' # ' id=' play button ' play/a div class=' box '/div脚本类型=' text/JavaScript ' src=' http : js/move . js '/脚本脚本类型=' text/JavaScript ' document . getelementbyid(' playButton ')。onclick=function(e){ move('。方框')。x(300)。end();};/script /body/htmlCSS。box { margin-left : 10px;宽度: 100 px;高度: 100像素;背景# 7C9DD4box-shadow : 5px 5px 0px # D1D 1;} # playButton { display : block;font-size : 20px;margin: 20px 10pxfont-weight:粗体;color: # 222文本装饰:无;}Move.js的方法
在前面的演示中,我们看到了x()方法。现在,让我们了解一下Move.js集合的其他方法(prop,val)
Set()方法用于设置元素的css属性,它有两个参数:css属性和属性值。示例用法:设置('背景色',' #CCC ')。set('左边距',500)。set('color ',' #222 ')
添加(道具、值)
add()方法用于增加设置的属性值。方法必须是数字才能增加。该方法必须有两个参数:属性值及其增量:调用前一个代码片段后,add('margin-left ',200)的值将增加200px。辅助(支柱、阀门)
Sub()是add()的逆过程。它接受两个相同的参数,但其值将从属性值中减去。sub('左边距',200)旋转(度)
顾名思义,此方法通过提供数值作为参数来旋转元素。当调用方法时,它被附加到元素的转换属性。以下代码将元素旋转90度:旋转(90)这段代码将向元素添加以下css:
变压器:旋转(90度)持续时间(n)
用这个方法,可以设置动画的播放时间。例如,以下代码在2秒内将元素从左向右移动200px:set('左边距',200)。持续时间(' 2s ')另一个例子,下面的代码。在2秒内,Move.js将修改元素的边距属性,设置背景颜色,并将元素旋转90度。set('左边距',200)。设置('背景色',' #CCC ')。旋转(90)。持续时间(' 2s ')转换(x[,y])
translate()方法用于修改元素的默认位置,使用提供的坐标作为参数。如果只设置了一个参数,它将是X坐标,如果提供了第二个参数,它将是Y坐标:平移(200,400)x()和y()
x()方法用于调整元素的x坐标,y()方法用于调整元素的y坐标。两种方法的参数可以是正的,也可以是负的,如下所示:x(300)。y(-20)偏斜(x,y)
Skew()用于调整相对于x轴和y轴的角度。该方法可分为偏斜度(deg)和偏斜度(deg)方法:倾斜(30,40)刻度(x,y)
此方法用于放大或压缩元素的大小。根据提供的每个值,将调用转换的比例方法:音阶(3,3)轻松度(fn)
如果您已经使用了CSS3转换,您将知道ease函数作用于转换属性。他详细说明了转变的行为。每一个轻松功能都是进、出、进、出、按扣、立方等。这些函数可以通过Move.js提供的ease()方法调用,例如:放松(' in ')。x(400)。放松('三次贝塞尔曲线(0,1,1,0)')。x(400)端()
此方法用于Move.js代码片段的结尾,这标志着动画的结束。技术上,这个方法触发动画的播放。方法接受可选的回调回退函数。代码如下:
移动('。方框')。设置('背景色','红色')。持续时间(1000)。end(function() { alert('动画结束!');});延迟(n)
正如该方法所暗示的,该方法提供时间值作为动画延迟。如下所示:
移动('。方框')。设置('背景色','红色')。延迟(1000)。end();然后()
这个方法是Move.js中最重要的功能之一,用于将动画分成两组,并按顺序执行。以下动画分为两个步骤,由then()进行分段:
移动('。方框')。设置('背景色','红色')。x(500)。然后()。y(400)。设置('背景色','绿色')。end();# #使用Move.js创建复杂的动画# #
在本教程中,我们已经编写了许多基本动画来理解每种方法。接下来,我们可以使用Move.js轻松创建复杂的动画。这个演示解释了Move.js的大部分内容,可以在演示页面中找到
我们创建了描述动画,代码如下:
移动('。正方形')。到(500,200)。旋转(180)。比例尺. 5。设置('背景色',' #FF0551 ')。set('边框颜色','黑色')。持续时间(' 3s ')。歪斜(50,-10)。然后()。设置(“不透明度”,0)。持续时间(' 0.3s ')。比例(0.1)。pop()。end();结论
希望这个教程能让你对什么是Move.js,如何创作CSS3动画有一个清晰的认识。使用Movejs可以帮助您在一个地方正确地组织所有动画代码。每当你想修复一个动画,你就会知道它就在那里。