ifttt / jazzhands Goto Github PK
View Code? Open in Web Editor NEWA simple keyframe-based animation framework for UIKit. Perfect for scrolling app intros.
Home Page: http://ifttt.github.io
License: MIT License
A simple keyframe-based animation framework for UIKit. Perfect for scrolling app intros.
Home Page: http://ifttt.github.io
License: MIT License
Hey there!
Curious if there is a reason why IFTTTCornerRadiusAnimation is not available in the pod?
Am I missing something there?
Thanks a ton!
Nick
So I didn't know where to post this so figured I'd do it here - 0.0.4 breaks the 0.0.3 method of init'ing the scroll view (you now need to do it in viewDidLoad as opposed to the view controller's init method). I based this on the Example project. Thing is, I didn't even notice my tour break until we were running pre-release tests and was kind of surprised. Turns out the '>' operator in cocoapods uses semantic versioning, which means that '>' applies to 0.0.3 and any version up to but not including 0.1, so my JazzHands got updated to 0.0.4 without me realizing it, which broke my implementation.
Should a release going from 0.0.3 to 0.0.4 really break previous implementations, or was I setting it up wrong all along?
Awesome library and thanks for the fantastic work!
It think you haven't updated README.md to accommodate new changes in your library since you suggest to override
- (void)scrollViewDidScroll:(UIScrollView *)aScrollView
with the content
[self.animator animate:scrollView.contentOffset.x];
but the same thing is in your base method (and some other stuff), so you don't need to call it yourself.
Additionally you don't suggest to call superclass (which I've suggested in the pull request), what couse, interface useless, since the _isAtEnd is changed in this callback!
self.isAtEnd = (aScrollView.contentOffset.x >= IFTTTMaxContentOffsetXForScrollView(aScrollView));
If refer to that part :
"Now, to animate the view, tell the animator what time it is. For example, to tie this animation to a UIScrollView, notify the animator of time in the scroller's delegate method.
(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
[self.animator animate:scrollView.contentOffset.x];
}
This will produce an effect where the view will be at 10,10 and sized 100x100 for scroll positions 0 to 30. Between scroll positions 30 and 60, the view will grow and move until scroll position 61, where it will be locked to 150, 10 and 200x200."
Animation dosent work when using classes instead of cocoa pods.
i am using same code of demo. but no animation happening in my demo.
We need cd JazzHandsDemo
, and run pod install
first. Rather than run JazzHandsDemo/JazzHandsDemo.xcodeproj
directly.
Btw, JazzHands
is amazing!
Please add support for swift package manager as soon as possible.
Thank you.
I tried to use ScaleAnimation together with AngleAnimation these two does not work together.
Hello guys, im a newbie in coding IOS Apps, I just want to ask how to code jazz hand without using the cocoapods. thanks. I tried whats in your tutorial but i can't get it.
It appears that I can't rotate and scale a view together.
Here's my code:
'''
-(void)configAnimations
{
IFTTTFrameAnimation *moneyanimation=[IFTTTFrameAnimation animationWithView:image];
[self.animator addAnimation:moneyanimation];
[moneyanimation addKeyFrames:@[
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(1) andFrame:image.frame],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(1.5) andFrame:CGRectOffset(image.frame, self.view.frame.size.width/2, 0)],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(2) andFrame:CGRectOffset(image.frame, self.view.frame.size.width, 0)],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(2.5) andFrame:CGRectOffset(image.frame, 1.5*self.view.frame.size.width, 0)],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(3) andFrame:image2.frame]
]];
IFTTTScaleAnimation *moneyScale=[IFTTTScaleAnimation animationWithView:image];
[moneyScale addKeyFrames:@[
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(1) andScale:1],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(1.5) andScale:0.75],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(2) andScale:0.5],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(2.5) andScale:0.75],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(3) andScale:1],
]];
[self.animator addAnimation:moneyScale];
IFTTTAngleAnimation *moneyRotate=[IFTTTAngleAnimation animationWithView:image];
[moneyRotate addKeyFrames:@[
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(1) andAngle:0],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(1.5) andAngle:M_PI/4],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(2) andAngle:M_PI_2],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(2.5) andAngle:M_PI_4*3],
[IFTTTAnimationKeyFrame keyFrameWithTime:timeForPage(3) andAngle:M_PI],
]];
[self.animator addAnimation:moneyRotate];
}
'''
It only rotates the view named '''image'''
Using XCode 6.4, if you make a brand new project, and do nothing else other then adding a copy of JazzHands, the compile will fail.
.../IFTTTAnimator.h:12:28: Cannot find interface declaration for 'NSObject', superclass of 'IFTTTAnimator'
I believe this happens because precompiled headers are no longer defaulted to on in new projects.
If you simply add an import for UIKit to IFTTTAnimator.h you can get a clean compile.
Hi,
I created a Swift DSL for JazzHands. You can find it here:
https://github.com/confile/JazzHandsSwift
It would be great if you could linke to this DSL if you like it.
Im using hideAt and showAt animation and it seems to me hideAt is really doing what showAt is supposed to do and showAt really hides the view.
In your pan example you wrote:
- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {
[self.animator animate:[recognizer locationOfTouch:0 inView:self.view]];
}
This is wrong because locationOfTouch
will return a CGPoint
is there a way to fix that?
The term M34 appears in many places, for example in the demo example:
IFTTTTransform3D *tt1 = [IFTTTTransform3D transformWithM34:0.03f];
What exactly does this mean?
You should write, which IOS versions supported.
I ve tested Demo app with IOS 6.1 and it crashed:
"Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer bounds contains NaN: [nan nan; nan nan]' "
Using Swift 2.0 in Xcode7 I get the following warnings:
/Users/mg/Documents/Grails/GGTS3.6.3-SR1-2/Demo/Pods/JazzHands/JazzHands/IFTTTConstraintConstantAnimation.m:18:17: Method override for the designated initializer of the superclass '-init' not found
/Users/mg/Documents/Grails/GGTS3.6.3-SR1-2/Demo/Pods/JazzHands/JazzHands/IFTTTConstraintMultiplierAnimation.m:21:17: Method override for the designated initializer of the superclass '-init' not found
/Users/mg/Documents/Grails/GGTS3.6.3-SR1-2/Demo/Pods/JazzHands/JazzHands/IFTTTLabelAnimation.m:17:17: Method override for the designated initializer of the superclass '-init' not found
Could you please fix that.
I added a methods to remove animatable objects form the animator, allowing to replace animations on the go.
Trying to animate a UIButton does not work. UILabel animated fine, and if I put the UIButton inside a UIView and animate the UIView, everything works.
Any really simple way to get a callback when specific page is shown?
If not trivial do you think it make sense to add it on
- (void)animateCurrentFrame {
[super animateCurrentFrame];
if(floorf(self.pageOffset) == self.pageOffset) {
// did scroll to page self.pageOffset
}
}
should it be implemented directly in the lib as a method to subclass or even a delegate?
what do you think?
By simple drag and drop of the src files in custom project. I get 10 errors of similiar kind.
What is the myth behind ?
Unknown type name 'IFTTTFrameAnimation'; did you mean 'IFTTTAnimation'?
I'm seeing what looked like rounding errors in the animations but turned out to be a duplicate frame generated between each pair of key frames. This code in IFTTTAnimation.m's addKeyFrame: iterates over all pairs of key frames and generates entries in the timeline.
for (NSUInteger i = 0; i < self.keyFrames.count - 1; i++) {
IFTTTAnimationKeyFrame *currentKeyFrame = [self.keyFrames objectAtIndex:i];
IFTTTAnimationKeyFrame *nextKeyFrame = [self.keyFrames objectAtIndex:i+1];
for (NSInteger j = currentKeyFrame.time; j <= nextKeyFrame.time; j++) {
[self.timeline addObject:[self frameForTime:j startKeyFrame:currentKeyFrame endKeyFrame:nextKeyFrame]];
}
}
If you follow the logic you will see that the final 'j' value in the inner loop ( nextKeyFrame.time) is the same as the first value (currentKeyFrame.time) for the next iteration of the outer loop. Changing the terminating condition for the inner loop to use < nextKeyFrame.time instead of <= will result in the final key frame not being generated, so that's not the right fix.
The simplest way (in my opinion) to avoid the duplicate is to begin all but the first iteration of the inner loop at currentKeyFrame.time+1:
for (NSInteger j = currentKeyFrame.time + (i == 0 ? 0 : 1); j <= nextKeyFrame.time; j++) {
An alternate would be stop the iteration of the inner loop one short except for the final outer loop iteration.
Hi,
Adding keyframes seems to regenerate the animation timeline at each new frame. I understand that to change the behaviour you would have to break the compatibility with previous versions so I propose adding a macro or something to disable the behavior, combined with a new method like commitKeyframes
or createTimeline
that would sort keyframes and generate the timeline. Also maybe adding an optional parameter (BOOL)commit
to the addKeyFrame
method on the animation base class could be also nice.
By implementing this I dropped my animation creations from 1.86s down to 0.85s on iPhone4/iOS6. Agreed, I do have a lot of animations, but still this could still be a nice improvement!
I can make a pull request if you want, but I reckon you may prefer do it yourself(ves).
Keep up the good work!
PS: if there is any other room for improvement, I would love to hear about it!
Please correct me if I'm wrong, but it seems that only one IFTTTAnimationKeyFrame
can be added to an animation for a given "time". I believe this to be an easy source of confusion. For example, the following doesn't change the view
's alpha at all:
[self.animation addKeyFrames:@[
[IFTTTAnimationKeyFrame keyFrameWithTime:time0 andFrame:offscreenFrame],
[IFTTTAnimationKeyFrame keyFrameWithTime:time0 andAlpha:0],
[IFTTTAnimationKeyFrame keyFrameWithTime:time1 andFrame:view.frame],
[IFTTTAnimationKeyFrame keyFrameWithTime:time1 andAlpha:1],
[IFTTTAnimationKeyFrame keyFrameWithTime:time2 andAlpha:0],
[IFTTTAnimationKeyFrame keyFrameWithTime:time2 andFrame:offscreenFrame],
]];
In fact, the above fails silently, only changing the view's frame. but the following does change the alpha:
[self.animation addKeyFrames:@[
[IFTTTAnimationKeyFrame keyFrameWithTime:time0 andFrame:offscreenFrame],
[IFTTTAnimationKeyFrame keyFrameWithTime:time0 + 1 andAlpha:0],
[IFTTTAnimationKeyFrame keyFrameWithTime:time1 - 1 andFrame:view.frame],
[IFTTTAnimationKeyFrame keyFrameWithTime:time1 andAlpha:1],
[IFTTTAnimationKeyFrame keyFrameWithTime:time2 - 1 andAlpha:0],
[IFTTTAnimationKeyFrame keyFrameWithTime:time2 andFrame:offscreenFrame],
]];
Ok, i realize this is not an issue and I'm sorry for that.
But I was wondering if it is possible to transform a square into a circle and vice versa and if so, how could I accomplish that?
Thanks in advance.
Hello,
I do not see the way to make the animation that you have on your gif on the page 4 and 5. First at all I can not put the UIImageView where I want to on the next page move it.
I can put it where I want on Y axis but not on the X axis. On your Unicorn example you have everything centered on the X axis but not moved to the right or the left.
Could you help me?
Thanks in advance
I am trying to re-implement the Demo which the compiler warns me Assignment to readonly property
at the line of code:
- (void)configureAnimation
{
IFTTTFrameAnimation *wordmarkFrameAnimation = [IFTTTFrameAnimation new];
wordmarkFrameAnimation.view = self.firstPerson;
^^^^
[self.animator addAnimation:wordmarkFrameAnimation];
}
I noticed that the IFTTTAnimation.h
class in Demo looks like:
@interface IFTTTAnimation : NSObject
@property (strong, nonatomic) UIView *view;
@property (strong, nonatomic) NSMutableArray *keyFrames;
- (id)initWithView:(UIView *)view;
- (void)animate:(NSInteger)time;
- (void)addKeyFrame:(IFTTTAnimationKeyFrame *)keyFrame;
- (IFTTTAnimationFrame *)animationFrameForTime:(NSInteger)time;
- (CGFloat)tweenValueForStartTime:(NSInteger)startTime
endTime:(NSInteger)endTime
startValue:(CGFloat)startValue
endValue:(CGFloat)endValue
atTime:(CGFloat)time;
view
is a readwrite
type property, while in the newest pod, the IFTTTViewAnimation
class :
@interface IFTTTViewAnimation : IFTTTAnimation
@property (nonatomic, strong, readonly) UIView *view;
- (instancetype)initWithView:(UIView *)view;
+ (instancetype)animationWithView:(UIView *)view;
@end
view
is a readonly
property. Any idea?
Would it be possible to use SnapKit AutoLayout with JazzHands Animation somehow?
@lauraskelton @devinfoley Hi,
I've discovered today that the hide animation performs differently on 64 bit devices than on 32 bit.
It seems that on 64 bit devices the interpolation of hide animation returned a fraction value that was translated to true if it was nonzero, but on 32 bit it was always 0 or 1, never a fraction.
I found that @encode(BOOL) and @encode(char) returned same on 32 bit but not on 64, and NSCFBoolean has a char type.
Please see my pull request. I hope it sticks to the original idea of the method.
Thanx,
Amir.
Hi, I used your JazzHands to build a app guide page.
and found a little issue about position of animation issue in iOS 7.0.3 while in other version of iOS is fine.
I made a demo about how that issue appears.
here is the repo : https://github.com/lane128/WLJazzHandsDemo
here is the incorrect position after animation. (iOS 7.0.3)
here is the correct position after animation (iOS > 7.0.3)
Hope you can help me to solve it.
Thanks.
Hey there,
Im having an issue with the IFTTTColorAnimation
var gradientBarColorAnimation: IFTTTColorAnimation!
public override func viewDidLoad() {
super.viewDidLoad()
var myView = UIView(frame: CGRectMake(0, 0, 100, 100));
myView.backgroundColor = UIColor.blackColor()
self.view.addSubview(myView)
self.gradientBarColorAnimation = IFTTTColorAnimation(view: myView)
self.gradientBarColorAnimation.addKeyframeForTime(0, color: myView.backgroundColor)
self.gradientBarColorAnimation.addKeyframeForTime(64, color: UIColor.redColor())
}
public func scrollViewDidScroll(scrollView: UIScrollView) {
self.gradientBarColorAnimation.animate(scrollView.contentOffset.y)
}
The problem is: when it pass the 64 time, it just changes the color to red, isn't an animated transition.
I tried to change the colors alpha chanel as the example uses, it doesn't work either.
Aditional info:
iOS 8.4,
Xcode 6.4
Swift 1.2
I tried the following animation:
First I created a view:
self.phoneScreen = UIImageView(image: UIImage(named: "screenBlank")!)
self.phoneScreen?.frame = CGRectMake(0, 0, self.phoneScreen!.frame.width/2, self.phoneScreen!.frame.height/2)
self.phoneScreen?.center = self.view.center
self.scrollView.addSubview(self.phoneScreen!)
Then I created the animation:
let phoneScreenAnimation: IFTTTFrameAnimation = IFTTTFrameAnimation(view: self.phoneScreen!)
self.animator.addAnimation(phoneScreenAnimation)
phoneScreenAnimation.addKeyFrame(IFTTTAnimationKeyFrame(time: timeForPage(1), andFrame: self.phoneScreen!.frame))
phoneScreenAnimation.addKeyFrame(IFTTTAnimationKeyFrame(time: timeForPage(2), andFrame: CGRectOffset(self.phoneScreen!.frame, self.view.frame.size.width, 0)))
The function timeForPage
is based on your example.
Here is the problem. The animation is running correctly from page 1 to page 2. The problem is that is not very smooth. It shakes a bit, or lets say it vibrates a bit while running. The shaking is around the x axis while the translation is running. It looks like there is a lot of computation and that the rendering of the view could not handle painting that fast. Is there something wrong with my code or is there a better way to move a view from page 1 to page 2?
I experimented with IFTTT framework to some extent. If I use setFrame for a view then that view won't be displayed in screen. How to solve this ?
I understand that Jazzhands's concept is keyframe, so the animations happen during page scrolling.
I'd like to know if it's possible to do some animations when scroll stops?
For example: after (not during) I scroll from page 1 to page 2, I can zoom in/out a button in page 2.
If it's possible, what is the best practice to do it?
Hi, I am trying to run the demo project but always fail to complete the pod installation.
Can anyone kindly guide me what should I do to make it work ?
$ pod install
Analyzing dependencies
/Library/Ruby/Gems/1.8/gems/cocoapods-0.18.1/lib/cocoapods/executable.rb:55: warning: Insecure world writable dir /usr/local in PATH, mode 040777
CocoaPods 0.29.0 is available.
[!] Unknown external source parameters for JazzHands
: path../
I'm getting 0.0.2 which doesn't include the angle animation source. Can we bump the version and include this? Thanks.
Compilation failed because of CocoaPods related script.
Please make the demo not related to CocoaPods. Not everybody — want or can – use CocoaPods...
不能适配iPhone X 顶部被覆盖 没有适配safeAero
Hi,
I am trying out your library and I am quickly facing a strange issue. The demo project runs fine on iOS6-7-8 and iPhone 4-5-6 (even after enabling iPhone 6 screen support), though if I use the exact same code in my own app it fails. Literally the same code, except for the added #import <UIKit/UIKit.h>
in the view controller header.
The exception is thrown at line 24 of the view controller class: self.view.frame = animationFrame.frame;
with exception CALayer position contains NaN: [nan nan]
.
Here is a link to the sample project: https://github.com/dvkch/JazzHandsBug1063 .
Thanks for taking time to look into this, Stan
I am currently receiving an exception on line 52 of IFTTTAnimationKeyFrame.m when running the example project on an iPhone 5S. I cannot replicate the issue on iPhone 4S, iPhone 5 or in any of the simulators (32 or 64 bit).
I am working around this by removing arm64 from the supported architectures in the project but will have a deeper dive into the issue over Christmas and attempt to resolve it.
Anybody else running into this?
Tom
When accessibility mode is enabled on a jazz hands scroll view, swiping through elements on the view causes the focus to cycle through elements in an incorrect order.
hello,
you say we use this framework , we should turn off autolayout first,
but,now,we must use auto layout,can you show me how to use this framework for auto layout?
thank U
Hi,
Using IFTTTScrollViewPageConstraintAnimation locks the animated UIView to the center of the screen (or left / right according to the position attribute).
If the constraint used to initialise it using '+animationWithSuperview:constraint:pageWidth:attribute:' had a offset constant other then 0 it is reset and ignored.
Thanx,
Amir
I apologize if this question seems basic to some, but I am a bit of a newbie. I have tried for hours to tweak the demo code to make the animation execute on a normal uiviewcontroller (not the scrollview that they provide). I would really appreciate any feedback. Is this possible? Thank you!
Now when I presented UIAlertController in Onboarding screen made from JazzHands, the screen was freeze and no any stack trace or error or crashes. The alert was showed, but I couldn't do anything with the app (such as pressing UIAlertAction's button).
How could I do it properly ?, Thanks in advance.
Previously, I had this code:
- (void)setView:(UIView *)view hiddenAtEndOfAnimation:(BOOL)hidden atPage:(Page)page {
IFTTTHideAnimation *hideAnimation = [[IFTTTHideAnimation alloc] initWithView:view];
[hideAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:page.left andHidden:!hidden]];
[hideAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:page.right - 1 andHidden:!hidden]];
[hideAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:page.right andHidden:hidden]];
[self.contentAnimator addAnimation:hideAnimation];
}
but with the latest version, this is impossible, as there is no simple init
that only sets the view. Highly dissapointed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.