资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/使用Move.js创建CSS3动画

使用Move.js创建CSS3动画

MASAILA / 1575人阅读

摘要：是使用简单函数创建动画的一个简单的库。基础知识提供了创建动画的最简单的。他用于分割动画为两个集合，并按顺序执行。如下动画被分为两步，通过方法实现分割使用创建复杂动画在本教程中，我们已经写了很多基本的动画来了解各个方法。

原文链接，请移步creating-css-animations-using-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 页面中引入该文件。完成后的页面应该如下：



  
    Move.js Demo
     
  
  
    Play

我们 已经定义了一个类为 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



  
    Move.js Demo
     
  
  
    Play

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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。
请检查这篇文章的source code，并阅读下面使用css和js的有关动画的资源

CSS3 Animations 101: What are Animations?

The Animation Keyframe Gotcha

CSS3 Animation and the JavaScript API

私有云 云服务器 move.js动画 css3动画 高性能css3动画 创建域名之后如何使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87505.html

相关文章

  • move.js操作CSS3动画

    摘要：是一款简单的支持动画的库，对于对的操作不是很熟悉的人来说，使用提供的方法操作动画更简单方便。要想使用提供的方法，首先应在我们的页面中引入使用操作动画样式注意的位置应该在中，并且紧放在的标签的上一行，放在其他地方将会出错。 move.js是一款简单的支持CSS3动画的JavaScript库，对于对CSS3的操作不是很熟悉的人来说，使用move.js提供的方法操作CSS3动画更简单方便。 ...

    novo 评论0 收藏0

  • move.js操作CSS3动画

    摘要：是一款简单的支持动画的库，对于对的操作不是很熟悉的人来说，使用提供的方法操作动画更简单方便。要想使用提供的方法，首先应在我们的页面中引入使用操作动画样式注意的位置应该在中，并且紧放在的标签的上一行，放在其他地方将会出错。 move.js是一款简单的支持CSS3动画的JavaScript库，对于对CSS3的操作不是很熟悉的人来说，使用move.js提供的方法操作CSS3动画更简单方便。 ...

    ethernet 评论0 收藏0

  • 【译】常见的10个JavaScript动画函数库

    摘要：四是一个很小的函数库，能简单而优雅的支持五用动画徽章的方式激活你的网站图标。你可以自定义动画类型位置背景颜色和文本颜色六一个简单的文本动画插件，结合了一些极好的函数库，目的是为应用动画的任何文本提供一个简单易用的插件。 一、Snap.svg SVG是一种创建交互式动画非常棒的方式，独立的分辨率的矢量图形在任何大小的屏幕上看起来效果都很好。Snap.svg库使操作SVG变得更jQuer...

    Mr_zhang 评论0 收藏0

  • 可能是最全的前端动效库汇总

    摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。 收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...

    afishhhhh 评论0 收藏0

  • GitHub 值得收藏的前端项目[每月更新...]

    摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目 整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...

    maxmin 评论0 收藏0

发表评论

登陆后可评论

0条评论

MASAILA

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<