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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。