使用Move.js建立CSS3动画

时间 2019-12-11

标签使用 move.js 建立 css3 css 动画栏目 JavaScript 繁體版

原文原文链接

原文连接，请移步creating-css-animations-using-move-jsjavascript

第一次翻译，若有误解，请移步原文css

在网站上，CSS3 的过渡和动画是当前建立轻量级动画的首选方法。不幸的是，不少开发者发现他们本身的语法和复杂和混乱的。若是这听起来像你本身，对你来讲，或许Move.js是完美的方案。Move.js是使用简单函数建立 CSS3 动画的一个简单的JavaScript库。本教程将探讨Move.js的基础知识，并提供一个在线demo。html

基础知识java

Move.js 提供了建立 CSS3 动画的最简单的 JavaScript API。让咱们假设有一个带类 box 的 div 元数，当鼠标移动到 div 上面的时候咱们想从左侧移动元素100个像素。在这种状况下，咱们的代码若是所示：css3

.box {
  -webkit-transition: margin 1s;
  -moz-transition: margin 1s;
  -o-transition: margin 1s;
  transition: margin 1s;
}
.box:hover {
  margin-left: 100px;
}

使用 Move.js 咱们能够简单调用 set()方法实现一样的结果，以下：git

move('.box')
  .set('margin-left', 100)
  .end();

入门github

首先，访问 Move.js GitHub page并下载最新的包，提取并拷贝 Move.js 文件到你的工做目录。接下来，在你的html 页面中引入该文件。完成后的页面应该以下：web

<!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来讲不是必须的：api

.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"> 
  </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的方法

在前面的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的有关动画的资源