使用Move.js创建CSS动画

最新推荐文章于 2024-03-14 11:53:09 发布

dingshi7798

最新推荐文章于 2024-03-14 11:53:09 发布

阅读量188

点赞数

文章标签： javascript ViewUI

CSS3过渡和动画是当前在网站上创建轻量级动画的首选方法。不幸的是，许多开发人员发现他们的语法很复杂且令人困惑。如果听起来像您， Move.js可能是您的理想解决方案。 Move.js是一个简单的JavaScript库，可使用简单的函数创建CSS3动画。本教程探讨了Move.js的基础知识，并提供了“移动中的行动”实时演示。

基础

Move.js提供了简化的JavaScript API，用于创建CSS3动画。假设我们有一个class box的div元素。当鼠标悬停在上方时，我们希望将其从左侧移到100像素。在这种情况下，我们的CSS代码如下所示：

.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页面并下载最新的软件包。提取move.js文件并将其复制到您的工作目录中。接下来，将此文件包含在HTML页面中。包含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>

我们定义了class box的div元素，以及一个ID为playButton的链接，该链接将用于演示。让我们创建一个新的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处理函数，单击该按钮后会将框向右移动100px。该处理程序的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方法

在上一个演示中，我们看到了x()方法的实际效果。现在，让我们了解其他一些Move.js方法。

`set(prop, val)`

set()方法用于在相关元素上设置CSS属性。它带有两个参数，即CSS属性及其值。用法示例为：

.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')

`add(prop, val)`

add()用于增加已经设置的CSS属性。该属性必须接受数值，以便可以递增。此方法采用两个参数，即CSS属性和增量值。

.add('margin-left', 200)

调用前一个代码段时，它将使现有值增加200px。

`sub(prop, val)`

sub()是add()的逆函数。它接受相同的两个参数，但是将从属性值中减去该值。

.sub('margin-left', 200)

`rotate(deg)`

顾名思义，此方法将元素旋转作为参数提供的数量。调用时，此方法将CSS transform属性附加到元素。例如，以下代码将元素旋转90度。

.rotate(90)

这段代码会将以下CSS添加到HTML元素中。

transform: rotate(90deg);

`duration(n)`

使用此方法，可以指定动画需要多长时间。例如，以下代码告诉Move.js在2秒钟内将框从左侧移到200px。

.set('margin-left', 200)
.duration('2s')

让我们看另一个例子。在下面的代码中，Move.js将更改边距，设置背景颜色并在两秒钟内将元素旋转90度。

.set('margin-left', 200)
.set('background-color', '#CCC')
.rotate(90)
.duration('2s')

`translate(x[, y])`

translate()用于使用提供的坐标作为参数，将元素的位置从其默认位置更改。如果仅提供一个参数，它将用作x坐标。如果提供了第二个参数，它将用作y坐标。

.translate(200, 400)

`x()`和`y()`

使用x() ，可以移动调整元素的x坐标。同样， y()用于垂直移动元素。两种方法都接受正值和负值。

.x(300)
.y(-20)

`skew(x, y)`

skew()将元素相对于x和y轴旋转到提供的角度。该方法可以分为skewX(deg)和skewY(deg) 。

.skew(30, 40)

`scale(x, y)`

此方法根据提供给它的值来放大或压缩HTML元素的大小。它使用CSS3变换的scale方法。

.scale(3, 3)

上面的代码片段将HTML元素的高度和宽度增加了三倍。

`ease(fn)`

如果您使用过CSS3过渡，您将了解提供给transition属性的ease函数。它指定过渡的行为。 in ， out ， in-out ， snap ， cubic-bezeir等各种ease snap函数。可以使用Move的ease()方法提供这些函数。例如：

.ease('in').x(400)
.ease('cubic-bezier(0,1,1,0)').x(400)

`end()`

在Move.js代码段的末尾使用此方法。它标志着动画的结束。从技术上讲，此方法触发动画播放。 end()方法还接受可选的回调函数。一个例子如下所示。

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轻松创建更复杂的动画。该演示将阐明Move.js的大多数概念。我们将创建此演示页面上描述的动画。该动画的Move.js代码如下所示。

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动画。 Move.js还可以帮助您在一个地方正确地组织所有动画代码。每当您要修复动画时，您都知道它在哪里！

请查看本文的源代码，并阅读以下与使用CSS和JS制作动画有关的资源。

如果您对本文有任何建议或疑问，请在下面发表评论。我们很高兴收到您的来信。编码愉快！

From: https://www.sitepoint.com/creating-css-animations-using-move-js/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Move.js创建CSS动画

CSS3过渡和动画，目前对于在网站上创建轻量级动画的首选方法。不幸的是，许多开发人员发现它们的语法是复杂和混乱。如果这听起来像你， Move.js可能是您的最佳选择。 Move.js是一个简单的JavaScript库，使用简单的功能创建CSS3动画。本教程将探讨Move.js的基础知识，并提供了行动的移动现场演示。基础 Move.js为创建CSS3动画的简化的JavaScript A...
复制链接

扫一扫