Skip to content

Core Animation framework for navigating data by flipping

Notifications You must be signed in to change notification settings

lahi/iOS-Flip-Transform

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 

Repository files navigation

##iOS-Flip-Transform

Animation component for the effect of flipping as in a news/clock ticker, or a page turn.

Structured around the idea of a data object (i.e. headline in news, number in a clock, page in a book) as an animation frame, comprised of multiple CALayers.

Supports 3 interaction modes:

  • Triggered: as in a tap to flip
  • Auto: as in a revolving flip that loops through data
  • Controlled: as in a pan gesture that moves the flip layer according to touch

Supports different types of content:

  • Blank, with background color
  • With image, whether from file or screenshot
  • With dynamic text, either composited on background or on image

###Basic Usage

  1. Create delegate object -
    AnimationDelegate *animationDelegate = [[AnimationDelegate alloc] initWithSequenceType: directionType:];

  2. Create flip view (either vertical or horizontal flip animation type) and assign it to animation delegate -
    FlipView *flipView = [[FlipView alloc] initWithAnimationType: animationDelegate: frame:];
    animationDelegate.transformView = flipView;

  3. Add flip view as subview and customize properties (refer below for configurable list)

  4. Call [flipView printText: usingImage: backgroundColor: textColor:] to draw each frame (minimum of 2)

  5. Call [animationDelegate startAnimation:] to start the animation. For using buttons or pan gesture, look at the animation controller example

Note: To remove jagged edges during flipping, set Renders with edge antialiasing in the project plist to YES. This may decrease performance.

###Configurable Properties

####Animation Delegate

  • repeatDelay: Length of time to the next flip after the current flip completes (only for auto interaction mode)
  • shadow: Whether or not to display shadow
  • repeat: Whether or not to loop through animation frames (only for auto interaction mode)
  • sensitivity: Positive modifier for input to animation response. Higher the sensitivity, greater the response. (only for controlled interaction mode)
  • gravity: Positive modifier for speed of movement to nearest resting state after input is removed. Higher the gravity, faster the speed. (only for controlled interaction mode)
  • perspectiveDepth: Positive value for adjusting the perspective. Lower the value, greater the illusion of depth.
  • nextDuration: duration of the next flip animation

####FlipView

  • textInset: inset of text relative to the flip view, like border margin
  • textOffset: positioning of text relative to top left of the flip view
  • fontSize: font size
  • font: font string, can be custom or inbuilt, defaults to Helvetica
  • fontAlignment: left, center or right alignment
  • textTruncationMode: none, start, middle or end truncation
  • sublayerCornerRadius: corner radius to apply to each sub panel of the flip view

About

Core Animation framework for navigating data by flipping

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published