Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
```