Material Motion Exploring solutions that will empower creators with the tools needed to describe and implement rich, interactive motion on any platform. Edit this page · History
$._map rewriteRange
Status Interface level Implementation level Library
Stable as of February 21, 2016 L2: Interaction creator L3: Stream creator material-motion
platformsrctests
Android View
iOS (Swift) View View
JavaScript View View
rewriteRange
upstream (number)
start (number)
end (number)
destinationStart (number)
destinationEnd (number)
(number) downstream

rewriteRange specification

This is the engineering specification for the MotionObservable operator: rewriteRange.

Overview

rewriteRange emits a linearly-interpolated mapping from one range to another.

Example usage

stream.rewriteRange(start: 0, end: 100, destinationStart: 10, destinationEnd: 20)

upstream start end destinationStart destinationEnd  |  downstream
 10      0     100 10               20              |  11
 50      0     100 10               20              |  15
150      0     100 10               20              |  25
-10      0     100 10               20              |  9

MVP

Expose a rewriteRange operator API

Use _map to implement the operator. Accept four arguments: start, end, destinationStart, and destinationEnd.

class MotionObservable<number> {
  public func rewriteRange
  ( start: number,
    end: number,
    destinationStart: number,
    destinationEnd: number
  ) -> MotionObservable<number>

Implement the interpolation

class MotionObservable<number> {
  func rewriteRange
  ( start: number,
    end: number,
    destinationStart: number,
    destinationEnd: number
  ) -> MotionObservable<number> {
    return _map { value in
      let position = value - start

      let vector = end - start
      if vector == 0 {
        return destinationStart
      }
      let progress = position / vector

      let destinationVector = destinationEnd - destinationStart
      let destinationPosition = destinationVector * progress

      return destinationStart + destinationPosition
    }
  }