I am facing this weird issue, where CGAffineTransformMakeScale is causing rotation. The name suggests that it should only cause scaling, but that's not the case.
[UIView animateWithDuration:1.0 animations:^{
self.logoView.transform = CGAffineTransformMakeScale(6.0, 6.0);
} completion:^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:3.0 animations:^{
self.logoView.transform = CGAffineTransformMakeScale(-6.0, -6.0);
} completion:nil];
}
}];
I would assume that the view should scale 6x and scale back 6x. However, the second animation causes a 90-degree anti-clockwise rotation of the image! Can anyone explain what's going on?
Use the relative scaling transform rather than making an absolute one. So:
self.logoView.transform = CGAffineTransformScale(self.logoView.transform,
6, 6)
you shouldn't be scaling to CGAffineTransformMakeScale(-6.0,-6.0) in order to reverse what you already did (unless thats what you want, but i doubt it) but instead animate back to CGAffineTransformMakeScale(1.0,1.0). a shortcut is CGAffineTransformIdentity constant, which is an empty transform. So change that last line in the completion block to
self.logoView.transform = CGAffineTransformIdentity;
to explain whats currently going on, by scaling to a negative value in both x and y axes you are turning the view 'inside out' in both dimensions at the same time
I am looking to have an animation in my iOS app which is almost identical to the animation you see when you use Siri when it is displaying possible questions you can ask it.
The effect is an upward scroll of text replaced by more than come from below but the effect is one in a way where not all the questions move as one together, they seem to be independent and follow each other.
I like this animation and would like to emulate it in my app - but I haven't the first idea how to go around this. My only involvement with animations within my apps so far are ones such as CrossDissolve, FlipFromLeft, etc.
Does anyone know of a tutorial which teaches an effect like this, or can point me in the right direction to start?
Thanks to all in advance.
Having a quick look it looks fairly straight forward.
The animation can be broken down into several stages.
First, there are 5 UILabels animated separately. Each with a very short delay on the previous label.
Each label is animated like this...
Set the frame of the label to be low down on the screen and set alpha to 0.0.
Animate the frame of the label to around 300 points higher on the screen and alpha of 1.0 over a duration of around 0.2 seconds.
Animate the frame of the label to about 30 points higher on the screen over about 2 or 3 seconds.
Animate the frame of the label another 300 points higher on the screen and alpha back to 0.0 over about 0.2 seconds again.
Change text on the label and repeat.
I think the easiest way to do this would be with the method...
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewKeyframeAnimationOptions)options
animations:(void (^)(void))animations
completion:(void (^)(BOOL finished))completion
Lemme give this a try in actual code and get back to you. Code completion helps a lot.
OK, here goes
Darn, I just installed Yosemite and don't have Xcode. OK, I'll give it a try here...
- (void)animateLabels:(NSArray *)labels
{
CGFloat firstLabelStartTop = 600;
[labels enumerateObjectsUsingBlock:^(UILabel *label, NSUInteger idx, BOOL *stop) {
CGFloat delay = 0.1 * idx;
label.frame = CGRectMake(0, firstLabelStartTop + 30 * idx, 320, 21);
label.alpha = 0.0;
[UIView animateKeyFramesWithDuration:2.4
delay:delay
options:0
animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0
relativeDuration:0.1
animations:^{
label.alpha = 1.0;
label.frame = CGRectOffset(label.frame, 0, -200);
}];
[UIView addKeyframeWithRelativeStartTime:0.1
relativeDuration:0.9
animations:^{
label.frame = CGRectOffset(label.frame, 0, -30);
}];
[UIView addKeyframeWithRelativeStartTime:0.9
relativeDuration:0.1
animations:^{
label.alpha = 0.0;
label.frame = CGRectOffset(label.frame, 0, -200);
}];
}
completion:nil];
}];
}
This is a first attempt without Xcode to check my code and without being able to run it at all so it might not be perfect but it should give you an idea of where to go from here.
EDIT
From #WilliamGeorges comment it looks like they used a combination of completely separate animations using the method I detailed in my blog.
You would have to do 3 separate animations on each label but its still a similar idea to what I put in this answer.
I wasn't quiet sure how to word this, but here goes.
I have a couple of UIControls that I am sliding into the view with in the viewWillAppear method. The UIControls animate correctly as well as my graphics inside those UIControls, but the UITextField is not. It should be starting to the right 50 points with an alpha of 0 fading into 1. Instead the UITextFields does this odd masking and from the other direction (left to right instead of right to left, as well as a bit higher on the y axis). Does this have something to do with the UITextField not being ready for display when I start my animation? Below is the code.
nameOfBillViewConstraint.constant = 50;
nameOfBillView.alpha = 0.0;
[UIView animateWithDuration:10
delay: 0.5
options: UIViewAnimationOptionCurveEaseIn
animations:^{
nameOfBillViewConstraint.constant = 10;
nameOfBillView.alpha = 1.0;
[self.view layoutIfNeeded];
}
completion:nil];
Thanks for your help on this.It's more of a visual problem, but I wasn't sure how to display that here...
I saw this thread but the solution is not what I'm looking for.
I would like to pop up a UIView with an animation similar to how an app appears from the SpringBoard (it seems it comes closer) and make it disappear moving it away.
I've tried to animate the frame, but the effect is that the content is not resized: unfortunately I cannot assign constraints to the content of the view; the result should be like if the view is shown with the correct sizes and only the "graphics context" is resized.
Help!
This starts at 10% the size and turns to 100 % of the views size
view.transform = CGAffineTransformScale(view.transform, 0.1, 0.1);
[UIView animateWithDuration:0.35 animations:^{
view.transform = CGAffineTransformScale(view.transform, 1.0, 1.0);
} completion:^(BOOL finished) {
}];
also remember to #import <QuartzCore/QuartzCore.h>
You can animate the transform.scale and opacity of the view's layer. See this answer for details: https://stackoverflow.com/a/3463362/550177
I'm running this code...
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
CGAffineTransform settingsTransform = CGAffineTransformMakeTranslation(self.settingsView.frame.size.width, 0);
CGAffineTransform speedTransform = CGAffineTransformMakeTranslation(-self.speedView.frame.size.width, 0);
self.settingsView.transform = settingsTransform;
self.speedView.transform = speedTransform;
} completion:nil];
But when it runs the views jump half the transform in the opposite direction before sliding to half a position in the correct direction.
I've slowed down the animation duration to 5 seconds but the initial jump is instantaneous and half the transformation in the wrong direction.
When I animate back using this code...
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
self.settingsView.transform = CGAffineTransformIdentity;
self.speedView.transform = CGAffineTransformIdentity;
} completion:nil];
It does exactly the same thing.
The result is that the final movement is half the desired transform as it jumps half the transform in the wrong direction first.
I really can't work out why this is happening?
Any ideas.
::EDIT::
Clearing up some possible ambiguity.
I'm not trying to have these views "bounce" back to where they are. The views I'm animating are like control panel at the edge of the screen. When the user presses "go" the view then slide out of the way. When the user presses "stop" the panels slide back into the view.
At least they used to. Since enabling auto layout (which I need for other parts of the app) I can't just change the frame of the views so I went the the transform route.
You can see this effect by sticking a view into a view controller and a button to run the animation.
Thanks
I had the exact same problem so here is the solution I came up with.
CGAffineTransform transform = CGAffineTransformMake(1, 0, 0, 1, translation.x, translation.y);
[UIView animateWithDuration:0.25 animations:^{
_assetImageView.transform = transform;
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
}];
So I call [self.view layoutIfNeeded]; inside of the animate block. Without this the it has the same problem as you and jumps the distance negative translation first then animates to the correct position from there. I am calling this from a view controller so self is a sub class of UIViewController. In your case "self.view" may not exist but I hope you get the idea.
None of the solutions here worked for me... My animation would always skip. (except when it was right at the end of another animation, hint).
Some details:
The view that was doing this had a series of scale and translates already in the stack.
Solution:
Doing a keyframe animation, with a super short first key that would basically re apply the transform that that the last animation should have set.
UIView.animateKeyframesWithDuration(0.4, delay: 0.0, options: [.CalculationModeCubic], animations: { () -> Void in
//reset start point
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.01, animations: { () -> Void in
self.element.transform = initialTransform
})
UIView.addKeyframeWithRelativeStartTime(0.01, relativeDuration: 0.99, animations: { () -> Void in
self.element.transform = finalTransform
})
}, completion: nil)
OK, having watched the WWDC videos again they state that one of the first things you have to do when using AutoLayout is to remove any calls for setFrame.
Due to the complexity of the screen I have removed the Auto-Layout completely and I'm now using the frame location to move the view around the screen.
Thanks
I've asked Apple Technical Support about this issue and got this response, so it's a bug.
iOS 8 is currently exhibiting a known bug in UIKit animations where
transform animations get the wrong fromValue (primarily affecting the
position of animated objects, making them appear to “jump”
unexpectedly at the start on an animation).
[...]
The workaround until a potential fix is delivered is to drop down to
Core Animation APIs to code your animations.
Here's improved version of Andreas answer
The key difference is that you can specify just one keyframe and get less code
UIView.animateKeyframes(withDuration: animationDuration, delay: 0.0, options: [], animations: {
UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1.0, animations: {
animatedView.transform = newTransform
})
}, completion: nil)
Does your settingsView or speedView already have a transformation applied before this animation takes place?
If the transformations for these views is not the identity transformation (aka CGAffineTransformIdentity, aka no transformation), you cannot access their .frame properties.
UIViews' frame properties are invalid when they have a transformation applied to them. Use "bounds" instead.
Since you want your second animation to occurs from the current state of your first animation (whether it is finished or not) I recommend to use the UIViewAnimationOptionLayoutSubviews option when setting your second animation.
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionLayoutSubviews
animations:^{
self.settingsView.transform = CGAffineTransformIdentity;
self.speedView.transform = CGAffineTransformIdentity;
} completion:nil];
Here is a sample of the code i used for testing by using the simple view controller template:
myviewcontroller.m:
- (void)viewDidLoad
{
[super viewDidLoad];
self.animatedView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 160, 80)];
self.animatedView.backgroundColor = [UIColor yellowColor];
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionLayoutSubviews
animations:^{
CGAffineTransform settingsTransform = CGAffineTransformMakeTranslation(self.animatedView.frame.size.width, 0);
self.animatedView.transform = settingsTransform;
}
completion:nil];
self.buttonToTest = [UIButton buttonWithType:UIButtonTypeRoundedRect];
self.buttonToTest.frame = CGRectMake(90, 20, 80, 40);
[self.buttonToTest setTitle:#"Click Me!" forState:UIControlStateNormal];
[self.buttonToTest addTarget:self action:#selector(buttonClicked) forControlEvents:UIControlEventTouchUpInside];
// set-up view hierarchy
[self.view addSubview:self.buttonToTest];
[self.view addSubview: self.animatedView];
}
- (void) buttonClicked
{
[UIView animateWithDuration:.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionBeginFromCurrentState|UIViewAnimationOptionLayoutSubviews
animations:^{
self.animatedView.transform = CGAffineTransformIdentity;
}
completion:nil];
}
I had this problem and solved it by:
Hide the original view
Add a temp view that copies the view you want to animate
Carry out animation which will now be as intended
Remove the temp view and unhide the original view with the final state
Hope this helps.
I tried the answers above, about the layoutIfNeeded, but it didn't work.
I added the layoutIfNeeded outside (before) the animation block and it solved my problem.
view.layoutIfNeeded()
UIView.animate(withDuration: duration, delay: 0, options: .beginFromCurrentState, animations: {
// Animation here
})