Skip to content

Latest commit

 

History

History
34 lines (21 loc) · 1.08 KB

howdoesitwork.md

File metadata and controls

34 lines (21 loc) · 1.08 KB
Raw

Let me explain how ElasticTransition work by breaking it down into three parts, you can skip to the section that interest you the most.

  1. Drawing the curved shape
  2. View Hierarchy & Layout
  3. Animation

#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:

  1. frame
  2. edge
  3. radiusFactor
  4. dragPoint

elasticShape

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:

path

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

####Coming Soon

Animation

I used UIKitDynamic to animate the curved shape to give it a more realistic bouncy feeling.