rxan-core
Core package for rxan
FOR RXJS@^5 SUPPORTS
This version is for supporting rxjs@^6
.
To see stable version that supports rxjs@^5
, please check stable branch.
Table of Contents
Requirement
This package requires rxjs@^6
as peer dependency.
You should install RxJS in your project to use this package.
How to install
npm install rxan-core
# To install RxJS too,
npm install rxjs
How to use
with jQuery
const $ = require('jQuery')
const rxanC = require('rxan-core')
const map = require('rxjs/operators').map
const target = $('#target')
// Make animation for 500 ms. It generates value from 0 to 1.
rxanC.during()(500).pipe(
map(function (percent) {
return percent * 100 // mapping 0~1 to 0~100
})
)
.subscribe(function (marginTop) {
target.css('marginTop', marginTop) // assign 0~100 to marginTop of target
})
with React (you can also use rxan-react)
import React, { Component } from 'react'
import { during, easing } from 'rxan-core'
class Example extends Component {
constructor(props) {
super(props)
this.state = {
// Initial value for marginTop
marginTop: 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 (
<div style={{ 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
-
scheduler
Rx.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
periodOf
toggle
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
)
easing.back
In version |
Out version |
InOut version |
|
|
|
easing.bounce
In version |
Out version |
InOut version |
|
|
|
easing.circle
In version |
Out version |
InOut version |
|
|
|
easing.cubic
In version |
Out version |
InOut version |
|
|
|
easing.elastic
In version |
Out version |
InOut version |
|
|
|
easing.exponential
In version |
Out version |
InOut version |
|
|
|
easing.linear
In version |
Out version |
InOut version |
|
|
|
easing.quadratic
In version |
Out version |
InOut version |
|
|
|
easing.sine
In version |
Out version |
InOut version |
|
|
|
Author
- Junyoung Clare Jang: @ailrun