https://github.com/atomic-package/tween

atomic package tween
https://github.com/atomic-package/tween

css css-framework css3 javascript js tween typescript

Last synced: 16 days ago
JSON representation

atomic package tween

• Host: GitHub
• URL: https://github.com/atomic-package/tween
• Owner: atomic-package
• Created: 2017-06-19T16:11:01.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-03-28T14:36:44.000Z (over 4 years ago)
• Last Synced: 2024-10-10T14:42:06.576Z (about 1 month ago)
• Topics: css, css-framework, css3, javascript, js, tween, typescript
• Language: TypeScript
• Size: 11.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Atomic Package - tween

## 使用方法

### 読み込み方法

HTMLで読み込む場合（非推奨）

```html

```

npm install して利用する場合（推奨）

```

npm install @atomic-package/tween

```

### JavaScriptで利用する

JavaScriptで利用する方法となります。

こちらのJavaScriptを読み込むと、global objectに 自動で紐付きます。

AP.common.tweenが対象となります。

```

AP: {

  common: {

    tween: Tween

  }

}

```

npmで管理している場合は、

```

const Tween = require('@atomic-package/tween');

....

let tween = Tween.fromData({

        start: {

            opacity: 0,

            scale: 0.4

        },

        end: {

            opacity: 1,

            scale: 1

        },

        option: {

            duration: 200,

            easing: 'easeInOutCubic',

            step: (val: any) => {

                elem.style.opacity = val.opacity;

                elem.style[this.transform] = 'scale(' + val.scale + ')';

            },

            complete: () => {

                tween = null;

                ....

            }

        }

    });

```

などで利用すると良いでしょう。

### Tweenオブジェクト

Tweenオブジェクトの利用方法です。

ファクトリー関数 fromData関数を用いて利用します。

```

Tween.fromData({

  ...

});

```

**startオブジェクト**

```

Tween.fromData({

  start: {

    opacity: 0

  }

});

```

startオブジェクトには、Tweenアニメーションを開始時の、プロパティと数値を任意で設定できます。

**endオブジェクト**

```

Tween.fromData({

  end: {

    opacity: 1

  }

});

```

endオブジェクトには、Tweenアニメーションを終了時の、プロパティと数値を任意で設定できます。

**optionオブジェクト**

optionオブジェクトは、以下の通りとなります。

```

Tween.fromData({

  option: {

    duration: アニメーションさせる時間,

    easing: Tweenアニメーションの種類,

    step: (val) => {

      Tweenアニメーション中に都度呼び出される関数となります。

      valは、startオブジェクトに設定した keyと値が返却されます。

    },

    complete: () => {

      Tweenアニメーション終了時に呼び出される関数となります。

    }

  }

});

```

## Easing

デフォルト値は `linear` となります。

| TweenName | Detail                | 

| --------------- | -------------------- |

| linear | デフォルト値 （Tween無し） |

| easeInQuad |  |

| easeOutQuad |  |

| easeInOutQuad |  |

| easeInCubic |  |

| easeInOutCubic |   |

| easeInQuart |   |

| easeOutQuart |   |

| easeInOutQuart |   |

| easeInQuint |   |

| easeOutQuint |   |

| easeInOutQuint |   |

| easeInSine |   |

| easeOutSine |   |

| easeInOutSine |   |

| easeInExpo |   |

| easeOutExpo |   |

| easeInOutExpo |   |

| easeInCirc |   |

| easeOutCirc |   |

| easeInOutCirc |   |

| easeInElastic |   |

| easeOutElastic |   |

| easeInOutElastic |   |

| easeInBack |   |

| easeOutBack |   |

| easeInOutBack |   |

| easeInBounce |   |

| easeOutBounce |   |

| easeInOutBounce |   |

Tween Easingを視覚的に確認したい場合は、こちらを参照

[イージング一覧](http://easings.net/ja#)

## 開発手順

gitでcloneしましょう。

```

git clone [email protected]:atomic-package/tween.git

```

npmパッケージをインストールします。

```

npm install

```

npm runコマンドで表示。

```

npm run start

```

`http://localhost:8080/` で、ブラウザが自動で開きます。 

ビルド

```

npm run build

```