Code Monkey home page Code Monkey logo

flipium's Introduction

FLIPIUM

Feb 8 : Added ability to use views instead of images.

To do : Swap back to original (potentially interactive) view after the flip.

INITIAL FORK : To try and implement using views (toImage) as the source. Also need to add an 'append' method.

Introducion

Flipium provides Titanium Appcelerator UI elements to simulate Flipboard's page-turning animation on a series of images, and is written purely in Coffeescript.

Basic Usage

First, add the following line to your app.js: var Flipium = require("flipium");

You then have two main functions to call: Flipium.createFlipView() and Flipium.createDragView()

createFlipView() creates an Ti.UI.View object that contains all your images as flippable pages.

createDragView() creates another Ti.UI.View object that will be overlayed across the screen, and acts as a gesture control to manipulate the FlipView.

FlipView Configuration

The following properties can be passed as a single object to the createFlipView() function:

  • duration: Time for the a page to turn fully in ms (default = 500)
  • images: An array containing your image filenames, e.g. ["1.png", "2.png", "3.png"]
  • path: Specify path to the folder containing your images
  • OR views: An array of Ti.UI.views
  • horizontal: Set to true for horizontal flipping (default = false)
  • startPage: FlipView will flip to this page on load (default = 1)
  • cacheOnLoad: By set to true, Flipium will crop and cache your images into flippable pages and save them in the ApplicationDataDirectory. If set to false, Flipium will expect each page to already be separated into two equally-sized images, with filenames in the format: "img_1_t.png" and "img_1_b.png" for top-bottom flipping, or "img_1_l.png" and "img_1_r.png" for left-right flipping (default = false)
  • distance: A number specifying the distance for the 3D animation. No meaningful units (default = 1000)

createFlipView also accepts the normal properties passed in Ti.UI.createView(), such as width and height.

DragView Configuration

The following properties can be passed as a single object to the createDragView() function:

  • dragDistance: The distance in pixels/points the user has to drag to manually flip a page (default = 230)
  • dragThreshold: After manually flipping a page past this percentage, the page will continue to flip over (default = 0.5)
  • initialDrag: The minimum distance in pixels/points the user has to drag before the page starts manually flipping (default = 10)
  • tapThreshold: The maximum (accidental) distance in pixels/points the user can drag in order for the gesture to be considered a tap (default = 5)
  • topLimit: When the user tries to flip to a previous page but is at the start limit, the page will stop flipping at this percentage (default = 0.7)
  • bottomLimit: When the user tries to flip to a next page but is at the end limit, the page will stop flipping at this percentage (default = 0.3)

createDragView also accepts the normal properties passed in Ti.UI.createView(), such as width and height.

Caching

If cacheOnLoad is true, images will be split and cached on load. Set to false if you are splitting images yourself and specifying a path to the split images folder. Call flipview.cacheImages() to manually cache images.

Clicking

To handle click events on the dragView, add an event listener for "tap" instead of "click", as the latter will disable gestures.

Supported Platforms

Flipium has been tested on iOS 5.0 simulator and device, and Android 2.2 emulator but not device.

flipium's People

Contributors

kosso avatar wongpeiyi avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

adrianopaladini

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.