Motion Path

twox zhong

Motion Path

Overview

A Motion Path animator component. Connect the component to any Graphic element with an SVG Path, and connect the component to the Frame you want to move, then it will automatically animate along the SVG path.

Quick Start

  • Draw path on Graphic (make sure only one path)
  • Connect Graphic to component’s path property (make sure direct connect to Graphic, not the Graphic’s parent Frame)
  • Connect Frame (which you want to move) to component’s content property
  • If you face some problems, contact me on Twitter @zhongerxin

Properties

Property Type Description
playState Boolean Play or stop
path ComponentInstance Graphic to connect
content ComponentInstance Frame to connect
duration Number Animation duration
playCounts Number Animation counts
curve Enum Animation curve
rotation Boolean Keep rotation tangent line

Versions

  • 1.3.0 Add a instruction in details
  • 1.2.0 Fix playState bug
  • 1.1.0 Add play counts
  • 1.0.0 init