Skip to content
Flipboard like animation library
Swift Ruby Objective-C
Branch: master
Clone or download
Pull request Compare This branch is 15 commits ahead of djk12587:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
DJKFlipper.xcodeproj
DJKFlipper.xcworkspace
DJKFlipper
DJKFlipperExample
DJKFlipperTests
.gitignore
.swift-version
DJKFlipper.podspec
LICENSE
README.md
example.gif

README.md

DJKFlipper

Carthage compatible CocoaPods compatible

Flipboard like animation built with swift.

Flipboard playing multiple GIFs

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects.

To integrate DJKFlipper into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'DJKFlipper'

Then, run the following command:

$ pod install

Carthage

Carthage is a decentralized dependency manager that automates the process of adding frameworks to your Cocoa application.

To integrate DJKFlipper into your Xcode project using Carthage, specify it in your Cartfile:

github "DJK12587/DJKFlipper"

Then, run the following command:

$ carthage update

Then add the built framework anyway you want to your project.

Usage

import DJKFlipper
  • Conform to the DJKFlipperDatasource protocol in your viewController

DataSource Methods

func numberOfPages(flipper:DJKFlipperView) -> NSInteger
  • Give DJKFlipper the number of pages you want to flip through
func viewForPage(page:NSInteger, flipper:DJKFlipperView) -> UIView
  • Everytime a page will flip you will need to pass the view of the viewcontroller you want to display.
func viewForPage(page: NSInteger, flipper: DJKFlipperView) -> UIView {
    return yourViewControllerArray[page].view
}

How It Works

http://stackoverflow.com/a/26266025

I attempted to solve this problem by using CALayers and Core Animation. I have two main layers to accomplish this animation, a static layer and an animation layer.

The static layer is the size of the entire view. This layer does not animate it simply holds two images, the left and right side (left and right side images are screen shots of the pages you want to flip too). The animation layer is half the size of the entire view, and this layer animates to perform the flip animation. The animation layers front and back side are also screen shots of the current page and next page.

For example lets say we want to flip to the next page.

The static layer's left side will contain a screen shot of the left side of the current page. The Right side will contain a screen shot of the right side of the next page. The animation layer will sit on top of the static view and its front side will contain an screen shot of the right side of the current page. The back of the animation layer will contain a screen shot of the left side of the next page.

As you pan your finger you will perform a CATransform3DRotate on the y axis of the animation layer. So, as your finger moves from the right side of the screen to the left, the animation layer will flip over and reveal the right side of the static view and back side of itself.

Here is the basic code to perform a flip animation on a layer (animationLayer CALayer).

var t = CATransform3DIdentity
t.m34 = 1.0/850 //Adds depth to the animation
t = CATransform3DRotate(t, newRadianAngleValue, 0, 1, 0)

CATransaction.begin()
CATransaction.setAnimationDuration(0)
yourAnimationCALayer.transform = t
CATransaction.commit()

TODO

  • Add some error handling :)
  • Add ability to change flip from left/right to top/bottom
  • Add unit tests
  • Add documentation ;)
You can’t perform that action at this time.