ray-tween

react tween State with HOC

animated tweens: this.setTweenState.

npm install --save ray-tween

author

ilex.h

usage

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:

{
  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 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
• now
• raf

tweens

API

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

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) | - |

缓动函数对照表

defaultConfig

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

now

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.

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

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

raf 参考

Documentation at Mozilla Developer Network, W3 Specification

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).Alternatively you can require raf/polyfill which will act the same as require('raf').polyfill().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