const$=require('jQuery')constrxanC=require('rxan-core')constmap=require('rxjs/operators').mapconsttarget=$('#target')// Make animation for 500 ms. It generates value from 0 to 1.rxanC.during()(500).pipe(map(function(percent){returnpercent*100// mapping 0~1 to 0~100})).subscribe(function(marginTop){target.css('marginTop',marginTop)// assign 0~100 to marginTop of target})
importReact,{Component}from'react'import{during,easing}from'rxan-core'classExampleextendsComponent{constructor(props){super(props)this.state={// Initial value for marginTopmarginTop: 0}this.subscription=during()(500).pipe(map((percent)=>percent*100)// mapping 0~1 to 0~100).subscribe((marginTop)=>{this.setState({marginTop: marginTop// assign 0~100 to state.marginTop})})}componentWillUnmount(){this.subscription.unsubscribe()}render(){return(<divstyle={{marginTop: this.state.marginTop}}>
Example!
</div>)}}
APIs
msElapsed
Usage
msElapsed(scheduler)
Description
Function that makes an observable of elapsed times.
This emits values everytime its scheduler schedules.
For example, without any scheduler (i.e., with default animationFrame scheduler), this emits a value per animation frame.
Parameters
schedulerRx.js Scheduler or undefined.
For undefined case, default scheduler is animationFrame scheduler.
Warnings
Do not use queue scheduler as scheduler. Such uses make an inifinite loop.
You should unsubscribe this, since this function makes an infinite length observable. If you do not unsubscribe this, it will not garbage collected.
during
Usage
during(scheduler)(duration)
Description
Function that makes an observable of values from 0 to 1. Emitted values are percent of time per duration, i.e., this initially emits 0, and finally emits 1 after specified duration.
This emit values only when its scheduler schedules.
Parameters
schedulerRx.js Scheduler or undefined.
For undefined case, default scheduler is animationFrame scheduler.
duration
Positive Number.
Duration for animation.
Warning
Do not use queue scheduler as scheduler. Such uses make an inifinite loop.
periodOf
Usage
periodOf(scheduler)(period,cycles)
Description
Function that makes an observable emits value once per period.
This emits the current cycle of this period, start from 1.
This does not emit 1 immediately. This emit it after first period passed.
This emit values only when its scheduler schedules.
Parameters
schedulerRx.js Scheduler or undefined.
For undefined case, default scheduler is animationFrame scheduler.
period
Positive Number.
Period of animation.
cycles
Positive Number or undefined.
Cycles of animation. This function emit values cycles times and final value is cycles.
For undefined case, default value is Number.POSITIVE_INFINITY.
Warning
You should unsubscribe this when third argument is undefined or Number.POSITIVE_INFINITY, since such calls for this function make an infinite length observable. If you do not unsubscribe this, it will not garbage collected.
toggle
Usage
toggle(scheduler)(period,cycles)
Description
Function that makes an observable emits boolean once per period.
First boolean is true, and next is false, and next is true, ... and so on.
This does not emit true immediately. This emit it after first period passed.
This emit values only when its scheduler schedules.
Parameters
schedulerRx.js Scheduler or undefined.
For undefined case, default scheduler is animationFrame scheduler.
period
Positive Number.
Period of animation.
cycles
Positive Number or undefined.
Cycles of animation. This function emit values cycles times and final value is cycles % 2 === 1.
For undefined case, default value is Number.POSITIVE_INFINITY.
Warning
You should unsubscribe this when third argument is undefined or Number.POSITIVE_INFINITY, since such calls for this function make an infinite length observable. If you do not unsubscribe this, it will not garbage collected.
easing
Easing functions are for mapping values between 0~1 to curve-shaped values starts from 0 and ends at 0.
Every easing functions have its in, out, inout variants. You can use those like easing.back.out. Default function itself is in version. (i.e., easing.back === easing.back.in)