move.js操纵CSS3动画

2024年5月7日 240次阅读 来源: readyGo

move.js是一款简朴的支撑CSS3动画的JavaScript库，关于对CSS3的操纵不是很熟悉的人来讲，运用move.js供应的要领操纵CSS3动画更简朴轻易。

要想运用move.js供应的要领，起首应在我们的HTML页面中引入move.js：

<!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的下载地点。

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要领。如：

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()要领的函数为：

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

这是我在运用pop要领的时刻的一个发明，有说的不对的处所愿望人人斧正一下~~感谢。

    原文作者：readyGo
    原文地址: https://segmentfault.com/a/1190000007580793
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞