# ray-tween

> ray tween

Latest version **1.0.2** (published 2017-11-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install ray-tween
pnpm add ray-tween
yarn add ray-tween
bun add ray-tween
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2017-11-30 |
| First published | 2017-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex.h |
| Maintainers | ilex.h |

## Links

- npm: https://www.npmjs.com/package/ray-tween
- npm.io page: https://npm.io/package/ray-tween

## Recent versions

- 1.0.2 (latest) — 2017-11-30
- 1.0.1 — 2017-11-26
- 1.0.0 — 2017-11-26

## README

# ray-tween

react tween State with HOC

animated tweens: `this.setTweenState`.

```bash
npm install --save ray-tween
```

## author

ilex.h

## usage

```js

import React, { Component } from 'react';
import rayTweenCreate, { tweens, stackBehavior } from 'ray-tween';

class Demo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      left: 0
    };

  }

  handleClick = () => {
    this.setTweenState('left', {
      easing: tweens.easeInOutQuad,
      duration: 500,
      endValue: this.state.left === 0 ? 400 : 0
    });
  }

  render() {
    var style = {
      position: 'absolute',
      width: 50,
      height: 50,
      backgroundColor: 'green',
      left: this.obtainTweeningValue('left')
    };

    return <div style={style} onClick={this.handleClick} />;
  }
}

export default rayTweenCreate(Demo);
```

### API

#### `this.setTweenState(path: String | Array<String>, options: Object)`

This first calls `setState` **会把自定义的相关字段放到state上**. 在动画引擎下，创建新值覆盖旧值. 你可以通过 `obtainTweeningValue` 获取tween value.

`path` 进行tween动画的字段名称. 如果是深层次嵌套, 如： `c` in {a: {b: {c: 1}}}, 提供的路径应是: `['a', 'b', 'c']`

`options` is of the following format:

```js
{
  easing: easingFunction,
  duration: timeInMilliseconds,
  delay: timeInMilliseconds,
  beginValue: a Number,
  endValue: a Number,
  onEnd: endCallback,
  stackBehavior: behaviorOption
}
```

  - `easing` (default: `tweens.easeInOutQuad`): the interpolation function used. (exposed under `tweens`). To plug in your own, the function signature is: `(currentTime: Number, beginValue: Number, endValue: Number, totalDuration: Number): Number`.
  - `duration` (default: `300`).
  - `delay` (default: `0`). *
  - `beginValue` (default: the current value of the state field).
  - `endValue`.
  - `onEnd`: the callback to trigger when the animation's done. **
  - `stackBehavior` (default: `stackBehavior.ADDITIVE`). Subsequent tween to the same state value will be stacked (added together). This gives a smooth tween effect that is iOS 8's new default. [This blog post](http://ronnqvi.st/multiple-animations/) describes it well. The other option is `stackBehavior.DESTRUCTIVE`, which replaces all current animations of that state value by this new one.

> 对于一个 destructive animation, 启动下一个延迟动画会终止当前动画， 如果这不是想要的结果, 采用 `setTimeout` 或者使用 additive animation. `DESTRUCTIVE` + `duration` 0 会有效的取消当前正在进行的动画, 从而会忽略 `easing function`.

> 对于一个 additive animation, 一旦动画运作起来将不会销毁,  在持续 `duration` 后调用 `onEnd`可以执行相关销毁动作.

#### `this.obtainTweeningValue(path: String | Array<String>)`

获取当前的 tweening value. 通常在 `render` 中使用

## Other

* [tweens](#tweens)
* [now](#now)
* [raf](#raf)

## tweens

### API

`tweens.tweenType(now, start, end, duration)`

```js
import { tweens } from 'ray-tween';
// import { tweens } from 'ray-tween/lib/tweens';
tweens.easeInQuad(1, 0, 50, 5); //  => 4

```

### Methods

|name|params|description|
|------|------|------|
| linear | (now, start, end, duration) | `线性动画` |
| easeInQuad | (now, start, end, duration) | - |
| easeOutQuad | (now, start, end, duration) | - |
| easeInOutQuad | (now, start, end, duration) | - |
| easeInCubic | (now, start, end, duration) | - |
| easeOutCubic | (now, start, end, duration) | - |
| easeInOutCubic | (now, start, end, duration) | - |
| easeInQuart | (now, start, end, duration) | - |
| easeOutQuart | (now, start, end, duration) | - |
| easeInOutQuart | (now, start, end, duration) | - |
| easeInQuint | (now, start, end, duration) | - |
| easeOutQuint | (now, start, end, duration) | - |
| easeInOutQuint | (now, start, end, duration) | - |
| easeInSine | (now, start, end, duration) | - |
| easeOutSine | (now, start, end, duration) | - |
| easeInOutSine | (now, start, end, duration) | - |
| easeInExpo | (now, start, end, duration) | - |
| easeOutExpo | (now, start, end, duration) | - |
| easeInOutExpo | (now, start, end, duration) | - |
| easeInCirc | (now, start, end, duration) | - |
| easeOutCirc | (now, start, end, duration) | - |
| easeInOutCirc | (now, start, end, duration) | - |
| easeInElastic | (now, start, end, duration) | - |
| easeOutElastic | (now, start, end, duration) | - |
| easeInOutElastic | (now, start, end, duration) | - |
| easeInBounce | (now, start, end, duration) | - |
| easeOutBounce | (now, start, end, duration) | - |
| easeInOutBounce |(now, start, end, duration) | - |
| easeInBack | (now, start, end, duration, overshoot = defaultConfig.overshoot) | - |
| easeOutBack | (now, start, end, duration, overshoot = defaultConfig.overshoot) | - |
| easeInOutBack | (now, start, end, duration, overshoot = defaultConfig.overshoot) | - |

[缓动函数对照表](http://www.xuanfengge.com/easeing/easeing/)

> defaultConfig

```js
const defaultConfig = {
  // 缓动值 @see http://www.cnblogs.com/cocos2d-x/archive/2012/03/17/2403007.html
  overshoot: 1.70158
};
```

## now

```js

var now = require('ray-tween/lib/now');
var start = now();
var end = now();
console.log(start.toFixed(3)); // the number of milliseconds the current node process is running
console.log(end.toFixed(3));
console.log((start - end).toFixed(3)); // ~ 0.002 on my system

```

## raf

### raf useage
requestAnimationFrame polyfill for node and the browser.

```js
var now = require('ray-tween/lib/raf');

raf(function tick() {
  // Animation logic
  raf(tick)
});
```

### raf 参考

[Documentation at Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame), [W3 Specification](http://www.w3.org/TR/animation-timing/#requestAnimationFrame)

### method

|name|params|description|
|------|------|------|
| default | (callback) | `callback` is the function to invoke in the next frame. `handle` is a long integer value that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. |
| cancel | (callback) | `handle` is the entry identifier returned by `raf()`. Removes the queued animation frame callback (other queued callbacks will still be invoked unless cancelled). |
| polyfill | ([object]) | Shorthand to polyfill `window.requestAnimationFrame` and `window.cancelAnimationFrame` if necessary (Polyfills `global` in node).<br />Alternatively you can require `raf/polyfill` which will act the same as `require('raf').polyfill()`.<br />If you provide `object` the polyfills are attached to that given object, instead of the inferred global. Useful if you have an instance of a fake `window` object, and want to add `raf` and `caf` to it. |


## License

MIT

---
_Source: https://npm.io/package/ray-tween · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._