MIT license


The MIT license is an
open-source license.
Free Read License

14 Day money-back guarantee

Full refund within 14 days of purchase date.

You need to log-in or create an account
  • Create an account
  • Log-in

Please use your real name.

Activation link will be sent to this address.

Minimum 8 characters

Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

(25 ratings)

iOS Flip Transform

iOS Flip Transform
Developed by Dillion Tan, Released Jan 17, 2012

Core animation framework for navigating data by flipping. Supports 3 interaction modes - triggered, auto and controlled, and 3 content types - blank, image or text.

Objective-C

Tags: catransform3d , core animation , horizontal flip , page turn

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
Back to top

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.

Back to top

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
View all 15 reviews »

User Reviews

  • superkam 5 months ago
    Nice work! Easy to use.
    Flag
    Was this helpful? Yes No
  • Eyal Shpits 1 year ago
    nice
    Flag
    Was this helpful? Yes No
  • Roberto Montesinos 1 year ago
    I like this library - I put something like this together which was not as expansive as this library. I wish I had found it earlier - would have saved some time. Oh well. Great work - I'll figure out some way to implement it in a future app but it's great to know that this functionality is handy and available.
    Flag
    Was this helpful? Yes No
Read all 4 comments »

Questions & Comments


Or enter your name and Email
  • ctrudo 5 months ago
    Can someone post an example of how to make this work with just an image? I am having a hard time getting this to work. This is what I have:
    AnimationDelegate *animateDelegate = [[AnimationDelegate alloc]initWithSequenceType:kSequenceControlled directionType:kDirectionForward];

    CGRect rect = CGRectMake(20, 56, 280, 280);


    FlipView *flipView = [[FlipView alloc]initWithAnimationType:kAnimationFlipVertical frame:rect];
    animateDelegate.transformView = flipView;

    flipView.frame = rect;

    [self.view addSubview:flipView];
    animateDelegate.shadow = YES;



    UIImage *image = [UIImage imageWithData:imageData];

    [flipView printText:nil usingImage:image backgroundColor:nil textColor:nil];
    [animateDelegate startAnimation:kDirectionForward];
  • Steve Seo 1 year ago
    Thank you very much!!!!
  • Avatarchik 1 year ago
    thank you!
You must be logged-in to vote. Log-in to your account or register now.