GithubHelp home page GithubHelp logo

beijixing / nightmodetransition Goto Github PK

View Code? Open in Web Editor NEW

This project forked from boerworz/nightmodetransition

0.0 1.0 0.0 1.09 MB

An interactive transition heavily inspired by the Night Mode transition in Castro 2 for iOS.

License: MIT License

Swift 100.00%

nightmodetransition's Introduction

NightModeTransition

This repository contains an implementation of a transition heavily inspired by the Night Mode transition in Castro 2. You can see a glimpse of the transition near the end of the trailer.

Running the application

Simply open NightModeTransition.xcodeproj in Xcode 8 and Build & Run the application. Swipe downwards with two fingers when running the application to transition between the two available styles.

NOTE: The application currently doesn't work as expected in the iPhone 7 simulator due to an issue with snapshot views. Please run the application in any other simulator, or on a device.

The style transition in action

How the transition works

Note: A more detailed write-up has been posted on my blog.

The transition is implemented using a snapshot view and a mask layer. When the transition begins, a snapshot of the current view is taken and placed on top of all other content. A mask layer for the snapshot view is also created at this point, initially letting the entire snapshot be seen. When this is done, the actual view is updated to the new style.

As the user pans and the transition progresses, the mask layer is moved to let the user see the updated view behind the snapshot. When the panning ends the mask layer is animated either to its initial position if the transition was cancelled, or to the bottom of the window if the transition was completed. When the animating completes, the snapshot is removed from the view hierarchy and the user can interact with the application as usual.

To achieve the bouncy effect of the transition, we use a CAShapeLayer as the mask and update the path of the layer as the transition progresses. The top of the mask is drawn using a quad curve (UIBezierPath.addQuadCurveToPoint(_:controlPoint:)) where the vertical position of the control point is based on the vertical velocity of the pan gesture. The faster the user pans, the more pronounced the curve will be. Since the pan gesture recognizer calls its target selector periodically even when the user stops dragging (but keeps their fingers on the screen) as long as the calculated velocity hasn't settled, we don't need to add any special code to return the mask to its non-curved state.

Podcasts in the demo application

nightmodetransition's People

Contributors

boerworz avatar

Watchers

 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.