###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
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;
Add flip view as subview and customize properties (refer below for configurable list)
Call [flipView printText: usingImage: backgroundColor: textColor:] to draw each frame (minimum of 2)
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
More flexible and readable way of rearranging layers
Dynamically drawing layers only when they come into view
More realistic and less expensive lighting (specular reflection would be cool)
请发表评论