GithubHelp home page GithubHelp logo

ios-flip-transform's Introduction

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

###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)
  • 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

ios-flip-transform's People

Contributors

dillion avatar

Stargazers

bright avatar

Watchers

James Cloos avatar bright avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.