iOS-Flip-Transform

Summary

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

--

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

--

Feature Backlog

1. More flexible and readable way of rearranging layers
2. Dynamically drawing layers only when they come into view
3. More realistic and less expensive lighting (specular reflection would be cool)

Contributors

xissburg

--

http://twitter.com/dilliontan