Code Monkey home page Code Monkey logo

uiview-easingfunctions's Introduction

UIView+EasingFunctions

This is a category on UIView that allows to attach custom easing functions to animatable UIView properties.

UIView+EasingFunctions works great with AHEasing, a library of easing functions. The library contains almost every easing function you might ever need.

Of course you can write your own easing functions as well.

Easing functions?

Easing functions specify the rate of change of a parameter over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

from easings.net (you should probably check the site, it does a great job explaining and illustrating various easing functions)

Installation

###Cocoapods###

Cocoapods is an Objective-C library manager.

Adding UIView+EasingFunctions to your project using Cocoapods is as easy as adding the following line to your Podfile:

pod 'UIView+EasingFunctions'

UIView+EasingFunctions podspec automatically adds AHEasing to the project as well. If that's not something you want, use pod 'UIView+EasingFunctions/Bare' instead.

###Manually###

  1. Download and unarchive.
  2. Drag and drop UIView+EasingFunctions subfolder, containing UIView+EasingFunctions.h and .m files into your Xcode project's Project Navigator (left pane), click Finish.
  3. Add QuartzCore.framework to your project's Link Binary With Libraries build phase.

Usage

Let's say you want to make a bouncy frame animation:

#import <UIView+EasingFunctions/UIView+EasingFunctions.h>

#import <AHEasing/easing.h>

/* ... */

[view setEasingFunction:BounceEaseOut forKeyPath:@"frame"];

That's it. Now any frame animation of this view will use BounceEaseOut easing function (defined in AHEasing/easing.h):

[UIView animateWithDuration:.5 animations:^{
    
    view.frame = CGRectMake(10, 110, 100, 32);
    
}];

What if you only want one specific animation block to be affected? Use the completion block to remove the easing function:

[UIView animateWithDuration:.6 animations:^{
    
    [view setEasingFunction:ElasticEaseOut forKeyPath:@"center"];
    
    view.center = CGPointMake(160, 415);
    
} completion:^(BOOL finished) {
    
    [view removeEasingFunctionForKeyPath:@"center"];
    
}];

There's a sample app project available (make sure to open .xcworkspace file, not the .xcodeproj).

What properties are supported?

All animatable properties of UIView.

Gotchas

Animating backgroundColor between two colors in different color spaces (including pattern images) won't do any good.

How it works

It swizzles addAnimation:forKey: of the view's backing CALayer.

Acknowledgement

The entire idea of hijacking the backing layer's addAnimation:forKey: comes from this blog post by Evadne Wu.

License

Do whatever you want.

githalytics.com alpha

uiview-easingfunctions's People

Contributors

zrxq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

uiview-easingfunctions's Issues

Easing with constraints

I am using autolayout and and constraints more and more. One use is to set the constant of leading space of a content view to push the view left or right while there is a width constraint and no trailing constraint. It is how I am creating a sidebar interface.

I see that this project can manipulate some values but I do not see how I would modify this code to work with modifying a constant on a constraint. How would you do this sort of animation to allow for easing?

CocoaPod should depend on AHEasing?

Hey there @zrxq I was wondering your opinion on making the podspec for this library depend on AHEasing, as at the minute in order to use this library you have to specify separately AHEasing in the podfile.

Easing animations not working in ARM-64 bit devices.

I am trying the code below , it works fine in iPhone 5 , iPhone 4 but doesn't work properly in iPhone 5S.

 [viewButtonContainer setEasingFunction:QuadraticEaseIn forKeyPath:@"center"]; 

[UIView animateWithDuration:0.3 delay:waitFor options:UIViewAnimationOptionCurveLinear animations:^{
viewButtonContainer.center = CGPointMake(0,0);

} completion:^(BOOL finished) {

}];

Something to compile for ARM-64 may be ?

Support for animation delay

When using a UIView animation with a delay > 0.0 the animation seems to be played back with a duration of 0.0 β€” there's no visible animation at all:

[self.view setEasingFunction:BackEaseOut forKeyPath:@"frame"];

[UIView animateWithDuration:0.5 delay:0.3 options:0 animations:^{
    self.view.frame = someRect;
 } completion:NULL];

iOS8 spazzy animations

I'm building against the iOS8 SDK through Xcode6.
If I run it on a iOS7 device, the animations work properly.
However on an iOS8 device the animations are 'spazzy'.

Wrong animation when using

When I use EasingFunctions with CABasicAnimation I get the wrong behavior when adding an easing function.
Example code:

[self.button setEasingFunction:CubicEaseOut forKeyPath:@"transform.scale"];
CATransform3D trans = [(CALayer *)[self.button.layer presentationLayer] transform];
CABasicAnimation *animation = nil;
animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[animation setFromValue:[NSNumber numberWithDouble:1.0f]];
[animation setDuration:1.0f];
animation.fillMode = kCAFillModeForwards;
self.button.layer.transform = CATransform3DMakeScale(1.25, 1.25, 1.25);
[self.button.layer addAnimation:animation forKey:@"transform.scale"];

Explanation:
I'm animating a button to scale from 1 to 1.25 and instead of growing it firsts shrinks until you can't see it and then when the animation time passes it is becoming 1.25

Warning when compiling for arm64

- (void)setEasingFunction:(ViewEasingFunctionPointerType)function forKeyPath:(NSString *)keyPath

warning: incompatible pointer types sending 'float (float)' to parameter of type 'ViewEasingFunctionPointerType' (aka 'CGFloat (*)(CGFloat)')

CocoaPods integration

Not really an issue, but I would love to be able to add this project remotely with CocoaPods, rather than adding it locally via a podspec.

Problem animating origin and size of a frame.

If I use, for example, an ExponentialEaseInOut on a UIView that is 100 points tall and aligned to the bottom of its parent view to animate its origin and size to make it appear to grow bottom-aligned to 200 points, the bottom "detaches" from the bottom of the superview. Expected behavior is that the same easing math applies to both the origin and size, so the bottom appears to remain fixed.

[view setEasingFunction:ExponentialEaseInOut forKeyPath:@"frame"];
[UIView animateWithDuration:0.5
                      delay:0
                    options:0
                 animations:^{
                     view.frame = CGRectMake(0,view.superview.frame.size.height - 200,view.frame.size.width,200); // animates to correct new position and size, but the bottom doesn't stay "fixed" to the bottom of the superview
                 }
                 completion:nil];

iOS8: Setting an EasingFunction in a View Segue changes the frame

If you set an easing function for an animation which runs in a segue, the coordinates of the start and end frames for the view change (or perhaps it just ignores the ones you set). Commenting out the easing function returns to the expected beginning and end points.

Here's an example animation block (inside a segue between two view controllers):
[UIView animateWithDuration:2.0
delay:delay
options:UIViewAnimationOptionCurveEaseOut
animations:^{
[view setEasingFunction:QuinticEaseInOut forKeyPath:@"frame"];
view.frame = CGRectMake(view.frame.origin.x,
view.frame.origin.y-1024,
view.frame.size.width,
view.frame.size.height);
//start view.frame=CGRectMake(view.frame.origin.x, view.frame.origin.y....)

Commenting out the [view setEasingFunction... line has an expected start and end point, uncommenting it sets it to a negative value, and ignores my start and end points.

Not sure if this is my problem or something in AHEasing - keen to help solve it but not sure where to begin!

UPDATE: It seems that any animation I set up in iOS 8 ignores the start and end points of the animation, not just those in segues. Surely I'm not the only one experiencing this?

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.