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

• rxan-core
  • Requirement
  • How to install
  • How to use
  • APIs
    • msElapsed
    • during
    • periodOf
    • toggle
    • easing
      • easing.back
      • easing.bounce
      • easing.circle
      • easing.cubic
      • easing.elastic
      • easing.exponential
      • easing.linear
      • easing.quadratic
      • easing.sine
  • Author

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

• 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
  • scheduler Rx.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
  • scheduler Rx.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
  • scheduler Rx.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)

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