Let me explain how ElasticTransition work by breaking it down into three parts, you can skip to the section that interest you the most.
- Drawing the curved shape
- View Hierarchy & Layout
#Drawing the curved shape
This is done by ElasticShapeLayer. It is basically a CAShapeLayer with a custom path. The path is defined by four attributes:
frame and edge are easy to understand. the radiusFactor defines the curvature of the edge when dragged. the dragPoint is the center of the curved edge.
Here is how the path is drawn:
Note that is the simpler drawing method which is used when radiusFactor >= 0.5. For the drawing method when radiusFactor is below 0.5, please see ElasticShapeLayer.swift.
View Hierarchy & Layout
I used UIKitDynamic to animate the curved shape to give it a more realistic bouncy feeling.