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 anchorPointAdjustment
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
anchorPointAdjustment
upstream (Point)
element (Element)
(AnchorPointAdjustment) downstream

anchorPointAdjustment specification

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

Overview

anchorPointAdjustment emits an anchor point adjustment calculated from the upstream anchor point and the provided element. The emitted adjustment can be used to change the element’s anchor point and position while maintaining the element’s frame in relation to its parent element.

Example usage

stream.anchorPointAdjustment(in: someElement)

upstream  element      |  downstream
{1, 0}    someElement  |  {anchorPoint: {1, 0}, position: <adjusted position>}

MVP

Expose an AnchorPointAdjustment type

This type should store an anchor point and a position.

public struct AnchorPointAdjustment {
  let anchorPoint: CGPoint
  let position: CGPoint
}

Expose an anchorPointAdjustment operator API

Use _map to implement the operator. The upstream type is Point. Accept an element. Emit an instance of AnchorPointAdjustment.

class MotionObservable<Point> {
  public func anchorPointAdjustment(in element: Element) -> MotionObservable<AnchorPointAdjustment>

Calculate and emit the new position

class MotionObservable<Point> {
  public func anchorPointAdjustment(in element: Element) -> MotionObservable<AnchorPointAdjustment> {
    return _map { anchorPoint in
      let newPosition = Point(x: anchorPoint.x * element.width,
                              y: anchorPoint.y * element.height)
      let positionInParent = element.convert(newPosition, to: element.parent)
      return AnchorPointAdjustment(anchorPoint: anchorPoint, position: positionInParent)
    }
  }