Giter VIP home page Giter VIP logo

npviewcollapser's Introduction

NPViewCollapser

NPViewCollapser is used to apply a book-style folding effect to any view.

Alt text Alt text

All you need to use NPViewCollapser are NPViewCollapser.h and NPViewCollapser.m.

The included sample project lets you demo the effect by manually dragging the slider or animating the change using the expand and collapse buttons. Animations are accomplished using another custom class (NPProgressTimer). See the 'Animating' section below for details.

Usage

Let's say you have a UIView called myCoolView. You can enable the collapsing effect on it by creating an instance of NPViewCollapser and passing in your view.

NPViewCollapser *viewCollapser = [NPViewCollapser collapserWithView:myCoolView];

Collapsing the view is easy, just call collapseByAmount: on the corresponding viewCollapser. The amount is a value between 0 and 1. 1 means the view is fully collapsed, 0 means it's fully open. Any value in between represents intermediate states.

// Collapse the view half-way
[viewCollapser collapseByAmount:0.5f];

Animating

NPViewCollapser doesn't support animations on its own. CAAnimations didn't quite work as smoothly when applying complex transforms so they were left out.

That being said, it's still possible to animate the collapser manually. Included with this project is another custom class called NPProgressTimer.

NPProgressTimer

NPProgressTimer is a simple class that allows you to run custom animations. NPProgressTimer will manage time-keeping for you. All you have to do is pass a block that will process individual steps of the animation.

For example, to use NPProgressTimer to animate NPViewCollapser collapsing you could initialize it like this.

NPProgressTimer *progressTimer = [NPProgressTimer timerWithDuration:0.3f
                                               			   stepSize:0.01f
                                       			   progressCallback:^(BOOL finished, double progress) {
													[viewCollapser collapseByAmount:progress];
												   }];

Once the progress timer is initialized, you can start it using one of the start methods.

[progressTimer start];

npviewcollapser's People

Contributors

nebs avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

xukuangbo

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.