ray-tween
react tween State with HOC
animated tweens: this.setTweenState
.
npm install --save ray-tween
author
ilex.h
usage
;; { superprops; thisstate = left: 0 ; } { this; } { var style = position: 'absolute' width: 50 height: 50 backgroundColor: 'green' left: this ; return <div style=style onClick=thishandleClick />; } 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 undertweens
). 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 isstackBehavior.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
API
tweens.tweenType(now, start, end, duration)
;// import { tweens } from 'ray-tween/lib/tweens';tweens; // => 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: 170158;
now
var now = ;var start = ;var end = ;console; // the number of milliseconds the current node process is runningconsole;console; // ~ 0.002 on my system
raf
raf useage
requestAnimationFrame polyfill for node and the browser.
var now = ; ;
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