move.js操做CSS3动画

时间 2019-12-04

原文原文链接

move.js是一款简单的支持CSS3动画的JavaScript库，对于对CSS3的操做不是很熟悉的人来讲，使用move.js提供的方法操做CSS3动画更简单方便。javascript

要想使用move.js提供的方法，首先应在咱们的HTML页面中引入move.js：css

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>使用move.js操做CSS3动画</title>
    <script type="text/javascript" src="move.js"></script>
     <!--css样式-->
    <style type="text/css">
         
    </style>
</head>
<body>
    <script type="text/javascript" src="move.js"></script>
    <script type="text/javascript">
        //javascript
    </script>
</body>
</html>

注意move.js的位置应该在body中，而且紧放在JavaScript的script标签的上一行，放在其余地方将会出错。
move.js的下载地址。html

move.js的方法

.set(prop, val):用于设置元素的css属性,.set(属性, 属性值).
.add(prop, val):用来增长已经设置的属性值，必须是数值型值才能够增长。.set(属性, 属性值增量).
.sub(prop, val):add的逆过程，属性值减去将它提供的值.
.rotate(deg):按提供的角度旋转元素，.rotate(角度).
.duration(n):用于设置动画的播放时间.
.delay(n):提供一个时间的数值做为动画的延时.
.translate(x[, y]):用于修改元素的默认位置,提供一个参数时做为x坐标，提供第二个参数时第二个参数做为y坐标.
.x():用于调整元素的x坐标.
.y():用于调整元素的y坐标.
.skew(xDeg, yDeg):用于调整一个相对于x和y轴的角度.
.scale(x, y):用于放大或压缩元素的大小.
.ease(fn):ease函数指定CSS3过渡的行为。ease 函数有 in、out、in-out、snap、cubic-bezeir等.
.then():用于分割动画为两个集合，并按顺序执行.
.end():用于move.js代码片断的结束，标识动画的结束.

pop方法

pop方法用在move.js方法结束以前，及.end()方法以前，对于与then方法。如：java

move('#square')
        .x(500)
        .y(200)
        .ease('in-out')
        .then()
          .x(-500)
          .then()
            .y(-200)
            .duration('2s')
            .delay('.5s')
            .rotate(180)
            .pop()
          .pop()
        .end();

这个例子中，square元素会先移动到坐标为（500，200）的位置，而后左移500px,而后再以2s的时间以180°旋转的方式向上移动200px,即回到最初的位置。可是当咱们去掉其中一个.pop()方法的时候，会发现square元素不会移动到（500，200）的位置，而是移动到（0，200）的位置，即原位置正下方200px的地方，证实这段代码没有执行第二个then方法以上的代码，当咱们把代码中的两个pop()都去掉的时候，square元素只会在原地以2s的时间旋转180°，证实代码中没有执行坐标变化的操做，这是由于pop方法是对应then方法的操做，若是咱们想要看到then方法里面每个方法执行，就须要在使用end前用到和then对应的pop方法，否则动画会忽略then的具体过程，直接获得结果。
move.js中pop()方法的函数为：git

Move.prototype.pop = function(){
  return this.parent;
};

这是我在使用pop方法的时候的一个发现，有说的不对的地方但愿你们指正一下~~谢谢。github