Move.js
基础知识
Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API。让我们假设有一个带类 box 的 div 元数,当鼠标 移动到 div 上面的时候我们想从左侧移动元素100个像素。在这种情况下,我们的代码如果所示:
1 2 3 4 5 6 7 8 9 | .box { -webkit-transition: margin 1s; -moz-transition: margin 1s; -o-transition: margin 1s; transition: margin 1s; } .box:hover { margin-left: 100px; } |
使用 Move.js 我们可以简单调用 set()方法实现同样的结果,如下:
1 2 3 | move( '.box' ) .set( 'margin-left' , 100) .end(); |
入门
首先,访问 Move.js GitHub page并下载最新的包,提取并拷贝 Move.js 文件到你的工作目录。接下来,在你的html 页面中引入该文件。完成后的页面应该如下:
1 2 3 4 5 6 7 8 9 10 11 12 | <! 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来说不是必须的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .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 元数上:
1 2 3 4 5 | document.getElementById( 'playButton' ).onclick = function (e) { move( '.box' ) .x(300) .end(); }; |
添加Move.js代码后的完整代码如下:
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <! 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .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属性和属性值。示例用法:
1 2 3 | .set( 'background-color' , '#CCC' ) .set( 'margin-left' , 500) .set( 'color' , '#222' ) |
add(prop, val)
add()方法用来增加其已经设置的属性值。该方法必须数值型值,以便用来增加。该方法必须有两个参数:属性值和其增量:
1 | .add( 'margin-left' , 200) |
在前面的代码片段调用后,会在其值的基础上增加200px。
sub(prop, val)
sub()是add()的逆过程,他接受两个相同的参数,但其值将从属性值中减去。
1 | .sub( 'margin-left' , 200) |
rotate(deg)
正如名称所暗示的,该方法通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的 transform 属性上。下面的代码旋转元素90deg:
1 | .rotate(90) |
这段代码将添加如下css到元素上:
1 | transform:rotate(90deg) |
duration(n)
通过该方法,你可以设置动画的播放时间。例如:如下代码,2秒钟将元素从左侧往右移动200px:
1 2 | .set( 'margin-left' , 200) .duration( '2s' ) |
另一例子,下面的代码。Move.js在2秒钟内将会修改元素的margin属性,设置背景色,同时将元素旋转90度。
1 2 3 4 | .set( 'margin-left' , 200) .set( 'background-color' , '#CCC' ) .rotate(90) .duration( '2s' ) |
translate(x[, y])
translate()方法用于修改元素的默认位置,使用提供的坐标作为参数,如果仅设置一个参数,将作为x坐标,如果提供了第二个参数,将作为y坐标:
1 | .translate(200, 400) |
x() and y()
x()方法用于调整元素的x坐标,y()方法用于调整元素的y坐标。两个方法的参数可以是正数也可以是负数,如下:
1 2 | .x(300) .y(-20) |
skew(x, y)
skew()用于调整一个相对于x和y轴的角度。该方法可以被分为skewX(deg)和skewY(deg)两个方法:
1 | .skew(30, 40) |
scale(x, y)
该方法用于放大或压缩元素的大小,按照提供的每一个值,将调用transform的scale方法:
1 | .scale(3, 3) |
ease(fn)
如果你使用过CSS3过渡,你就了解ease函数作用在transition属性上。他指定了过渡的行为。每个 ease 函数是 in、out、in-out、snap、cubic-bezeir等。这些函数可以通过Move.js提供的ease()方法得到调用。例如:
1 2 | .ease( 'in' ).x(400) .ease( 'cubic-bezier(0,1,1,0)' ).x(400) |
end()
该方法用于Move.js代码片段的结束,他标识动画的结束。技术上,该方法触发动画的播放。该方法接受一个可选的callback回掉函数。代码如下:
1 2 3 4 5 6 | move( '.box' ) .set( 'background-color' , 'red' ) .duration(1000) .end( function () { alert( "Animation Over!" ); }); |
delay(n)
正如方法所暗示的,该方法提供一个时间的数值作为动画的延时。如下:
1 2 3 4 | move( '.box' ) .set( 'background-color' , 'red' ) .delay(1000) .end(); |
then()
该方法是Move.js中一个最重要的函数。他用于分割动画为两个集合,并按顺序执行。如下动画被分为两步,通过then()方法实现分割:
1 2 3 4 5 6 7 | 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
上我们创建了动画的描述,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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(); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
· drools 规则引擎和 solon-flow 哪个好?solon-flow 简明教程