Coder Social home page Coder Social logo

tbrown32 / parallaxscrollingframework Goto Github PK

View Code? Open in Web Editor NEW

This project forked from carlinyuen/parallaxscrollingframework

0.0 2.0 0.0 162 KB

Simple framework for keyframing parallax scrolling animations of UIViews in an iOS project. Keywords: ios, iphone, ipad, parallax, scrolling, scrollview, uiview, animation, tutorial, walkthrough, framework

License: MIT License

parallaxscrollingframework's Introduction

ParallaxScrollingFramework

Simple framework for keyframing parallax scrolling animations of UIViews in an iOS project.

Keywords: ios, iphone, ipad, parallax, scrolling, scrollview, uiview, animation, tutorial, walkthrough, framework

About

Did you see that IFTTT app tutorial? Daymn some smooth moves there.

The word on the street was that the tutorial was made with JS/CSS/HTML5 though, so here's my attempt at a native solution: the ParallaxScrollingFramework.

Features

  • Keyframe animation with any UIView based on scroll position of UIScrollView.
  • Simple, easy, integration. Works for vertical or horizontal scrolling.
  • Handles affine transforms and transparency, manages keyframes automatically.
  • Hashes UIViews to keep track of them, no need for keeping track of string keys.
  • Interpolates between keyframes linearly, working on cubic interpolation.
  • Ability to enable and disable animation (will default to first keyframe).

Details

Properties you can keyframe on:

  • offset : What point on scrollView keyframe should be. Based on contentOffset.
  • translate : Translation, relative to frame.origin of UIView.
  • scale : Scaling using CGAffineTransform, negative values flip view.
  • rotate : Rotation using CGAffineTransform, measured in radians.
  • alpha : Regular ol' UIView transparency, from 0 to 1.

Usage

You can set this up on any UIScrollView in seconds! Just a few easy steps:

  1. #import "ParallaxScrollingFramework.h"
  2. @property (nonatomic, strong) ParallaxScrollingFramework *animator;
  3. self.animator = [[ParallaxScrollingFramework alloc] initWithScrollView:self.scrollView];

And that's it! You're ready to go. All you have to do now, is add some keyframes for any UIView (ideally a subview of the UIScrollView). Sample code below:

[self.animator
	setKeyFrameWithOffset:100	// Indicates where keyframe is in ScrollView
	translate:CGPointZero		// Translation, relative to frame.origin
	scale:CGSizeMake(1, 1)		// Scaling using CGAffineTransform
	rotate:0					// Rotation also using CGAffineTransform
	alpha:1
	forView:self.loginButton];

[self.animator
	setKeyFrameWithOffset:300
	translate:CGPointMake(50, 100)
	scale:CGSizeMake(1.2, 1.2)
	rotate:0
	alpha:0.5
	forView:self.loginButton];

// Alternate syntax, don't screw up the properties!
//	If you don't define a property, it defaults to 0.
[self.animator setKeyFrame:@{
	ParallaxScrollingKeyFrameOffset : @(450),
	ParallaxScrollingKeyFrameTranslateX : @(target.x),
	ParallaxScrollingKeyFrameTranslateY : @(target.y),
	ParallaxScrollingKeyFrameScaleX : @(1)
	ParallaxScrollingKeyFrameScaleY : @(2)
	ParallaxScrollingKeyFrameAlpha : @(1),
	// Omitted rotation, will default to 0
} forView:self.loginButton];

Done!

parallaxscrollingframework's People

Contributors

carlinyuen avatar

Watchers

James Cloos avatar Tynesha Brown 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.