Move an NSView from outside view with autolayout using NSAnimation - objective-c

I am using auto-layout in my project and have a 'detailed view' slide over the 'tile view' upon a button press.
The 'tile view' is aligned to the top, bottom, left and right.
The 'detailed view' is aligned to centre x,y and equal width/height.
I got the animations to work however I had to use two different methods:
1) This is my preferred method of animation and works perfectly fine on the 'tile view'
CAKeyframeAnimation* tileKeyAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform"];
tileKeyAnimation.fillMode = kCAFillModeForwards;
tileKeyAnimation.removedOnCompletion = NO;
tileKeyAnimation.keyTimes = #[#0,#0.45];
tileKeyAnimation.values = #[[NSValue valueWithCATransform3D:CATransform3DIdentity],
[NSValue valueWithCATransform3D:self.tileTransform]];
tileKeyAnimation.duration = 0.5;
[_tileView.layer addAnimation:tileKeyAnimation forKey:#"transform"];
2) Since the above animation was not working for the 'detailed view', I resorted to using a different type of animation for it. (I created an outlet for the centreX constraint named _detailedCenterXConstraint)
_detailedCenterXConstraint.constant = _tileView.bounds.size.width;
[NSAnimationContext runAnimationGroup:^(NSAnimationContext *context) {
[context setTimingFunction:[[CAMediaTimingFunction alloc] initWithControlPoints:0 :0 :0 :0.45]];
[context setDuration:[self pushAnimationDuration]];
[_detailedCenterXConstraint.animator setConstant:_detailedView.bounds.size.width];
} completionHandler:^{
}];
The problem with this approach is that the animations do not match with each other. I have tried using a custom CAMediaTimingFunction in (2) to match the animation timing in (1) but it seems that I'm not using this correctly.
Is there a reason why a CAKeyframeAnimation (1) should not work on my 'detailed view'?
Alternatively is there a way how to match the animation timing between the two approaches?

I have managed to get an identical animation with the following code:
[NSAnimationContext runAnimationGroup:^(NSAnimationContext *context) {
[context setTimingFunction:0.45 :1.0 :0.45 :1.0];
[context setDuration:[self pushAnimationDuration]/2];
[_detailedCenterXConstraint.animator setConstant:_detailedView.bounds.size.width];
} completionHandler:^{
}];

Related

UIButton not receiving touch after superview rotate

I am working with a UICollectionView, and I have defined a custom UICollectionViewCell by subclassing that class. The initializer of the class defines two views, just like this:
[[NSBundle mainBundle] loadNibNamed:#"ProtelViewCellFlipped" owner:self options:nil];
CATransform3D transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
[flippedView.layer setTransform:transform];
[flippedView setHidden:YES];
[self addSubview:flippedView];
[[NSBundle mainBundle] loadNibNamed:#"ProtelViewCell" owner:self options:nil];
[self addSubview:selfView];
[selfView.layer setZPosition:1];
where flippedView is a view defined by the "ProtelViewCellFlipped" xib file, and selfView is the view defined in the "ProtelViewCell" xib file. The view hierarchy is like this: the view hierarchy http://massimomarra.altervista.org/gerarchia.png
The thing is that the flipped view is rotated (as if it was the other side of the "selfView" view) by a CATransform3D, and then it is hidden. And that's all right, it works.
The selfView view has a UIButton on it. In the bottom right corner of the view. If I press that button, this method gets triggered:
- (void)infoButtonPressed:(UIButton *)sender
{
NSString *animationKey = (selfView.layer.zPosition > flippedView.layer.zPosition)? #"forward" : #"backwards";
CGFloat animationDuration = 0.3;
if (selfView.layer.zPosition > flippedView.layer.zPosition)
[self.layer removeAllAnimations];
CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
[rotation setValue:animationKey forKey:#"id"];
rotation.toValue = [NSNumber numberWithFloat:M_PI];
rotation.duration = animationDuration;
rotation.removedOnCompletion = NO;
rotation.fillMode = kCAFillModeForwards;
[self.layer addAnimation:rotation forKey:animationKey];
[self performSelector:#selector(flipLayers) withObject:nil afterDelay:animationDuration/2];
}
So that the self view is rotated with an animation. Also, during the animation gets called this method:
- (void)flipLayers
{
[selfView setHidden:!selfView.hidden];
[flippedView setHidden:!selfView.hidden];
[selfView.layer setZPosition:flippedView.layer.zPosition];
[flippedView.layer setZPosition:(1-selfView.layer.zPosition)];
}
so that the flippedView becomes visible (and selfView hides), and the zPosition of his layer becomes higher than selfView.
So now I have the flippedView visible, and it is displayed correctly. It has also a button, but to trigger his action I have to tap in another position: flipped view scheme: i have to tap where the button "was" before the rotation http://massimomarra.altervista.org/s03KRJAUk7C_nP3yTXb7TBQ.png
It seems like the rotation just modifies the graphics of the view, but not the content.
Can you please help me?
Thanks to you all in advance!!
transform the button back to identity before change orientation
something like this:
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
oneButton.transform=CGAffineTransformIdentity;
}
I don't know why but it seems working

CABasicAnimation move frame left by 300px

I need help with CABasicAnimation. I am trying to move a NSView left by 300 pixels. I found this SO thread: How to animate the frame of an layer with CABasicAnimation?
Turns out animating the frame is not possible and one of the answer points to a link to QA on Apple's website but it takes me a to a generic page:
http://developer.apple.com/library/mac/#qa/qa1620/_index.html
So, how can I do something as simple as translation of my NSView/CALyer?
Thanks!
NSView has a protocol called NSAnimatablePropertyContainer which allows you to create basic animations for views:
The NSAnimatablePropertyContainer protocol defines a way to add
animation to an existing class with a minimum of API impact ...
Sending of key-value-coding compliant "set" messages to the proxy will
trigger animation for automatically animated properties of its target
object.
The NSAnimatablePropertyContainer protocol can be found here
I recently used this technique to change the origin of a frame:
-(void)setOrigin:(NSPoint)aPoint {
[[self animator] setFrameOrigin:aPoint];
}
Instead of calling the [view setFrameOrigin:], I created another method called setOrigin: which then applies the setFrameOrigin: call to the view's animator.
If you need to change the duration of the animation, you can do so like this (similar to CATransactions):
-(void)setOrigin:(NSPoint)aPoint {
[NSAnimationContext beginGrouping];
[[NSAnimationContext currentContext] setCompletionHandler:^{
...Completion Callback Code goes here...
}];
[[NSAnimationContext currentContext] setDuration:1.0];
[[self animator] setFrameOrigin:aPoint];
[NSAnimationContext endGrouping];
}
The NSAnimationContext is described here
You can animate center property instead. Eg:
//assuming view is your NSView
CGPoint newCenter = CGPointMake(view.center.x - 300, view.center.y);
CABasicAnimation *animation = [CABasicAnimation animation];
//setup your animation eg. duration/other options
animation.fromValue = [NSValue valueWithCGPoint:v.center];
animation.toValue = [NSValue valueWithCGPoint:newCenter];
[view.layer addAnimation:animation forKey:#"key"];

Animating a gaussian blur using core animation?

I'm trying to animate something where it's initially blurry then it comes into focus. I guess it works OK, but when the animation is done it's still a little blurry. Am I doing this wrong?
CABasicAnimation* blurAnimation = [CABasicAnimation animation];
CIFilter *blurFilter = [CIFilter filterWithName:#"CIGaussianBlur"];
[blurFilter setDefaults];
[blurFilter setValue:[NSNumber numberWithFloat:0.0] forKey:#"inputRadius"];
[blurFilter setName:#"blur"];
[[self layer] setFilters:[NSArray arrayWithObject:blurFilter]];
blurAnimation.keyPath = #"filters.blur.inputRadius";
blurAnimation.fromValue = [NSNumber numberWithFloat:10.0f];
blurAnimation.toValue = [NSNumber numberWithFloat:1.0];
blurAnimation.duration = 1.2;
[self.layer addAnimation:blurAnimation forKey:#"blurAnimation"];
Your problem is that the animation stops and is automatically removed, but the filter lingers with the tiniest of blur applied.
What you want to do is to remove the blur filter when the animation completes. You need to add a delegate to the CABasicAnimation instance and implement the -[id<CAAnimationDelegate> animationDidStop:finished:] method.
If you let self be the delegate in this case it should be fairly simple, add this line before adding the animation to your layer:
blurAnimation.delegate = self;
And the callback is equally simple:
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
[[self layer] setFilters:nil];
}
If you're looking for an optimized way to animate a blur then I recommend creating a single blurred image of your view and then fading the blurred image from alpha 0 to 1 over the top of your original view. Seems nice and fast in tests.

NSView CALayer Opacity Madness

It seems as though the layer's properties of my NSView are sometimes not editable/wrong. In the code below, the animation works perfectly, and all appears normal. The output from the NSlogs are always :
anim over opacity = 1.00000
first opacity = 0.50000
current opacity = 0.00000
updated opacity = 0.00000
The first two logs look right, so even at animation did stop, the layer seems to operate normally. However, some time later, when I check the opacity it magically turned to 0. Further wrong, when I set the layer's opacity to 1, and check it immediately after, it still is 0. How is that possible?
I goofed around with setneedsdisplay in the layer and setneedsdisplay:YES in nsview and that
didn't help. Any suggestions are greatly appreciated.
- (void) someSetupAnimationMethod {
aLayer = [CALayer layer];
[theView setWantsLayer:YES];
[theView setLayer:aLayer];
[aLayer setOpacity:0.0];
CABasicAnimation *opacity = [CABasicAnimation animationWithKeyPath:#"opacity"];
opacity.byValue = [NSNumber numberWithFloat:1.0];
opacity.duration = 0.3;
opacity.delegate = self;
opacity.fillMode = kCAFillModeForwards;
opacity.removedOnCompletion = NO;
[opacity setValue:#"opacity done" forKey:#"animation"];
[aLayer addAnimation:opacity forKey:nil];
}
- (void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
if([[anim valueForKey:#"animation"] isEqualToString:#"opacity done"]) {
NSLog(#"anim over opacity = %f", aLayer.opacity);
aLayer.opacity = 0.5;
[aLyaer removeAllAnimations];
NSLog(#"first opacity = %f", aLayer.opacity);
}
}
- (void) someLaterMethod {
NSLog(#"current opacity = %f", aLayer.opacity);
aLayer.opacity = 1.0;
NSLog(#"updated opacity = %f", aLayer.opacity);
}
You're breaking a fundamental CALayer/NSView rule by creating a layer-backed view and then trying to manipulate the layer directly.
aLayer = [CALayer layer];
[theView setWantsLayer:YES];
[theView setLayer:aLayer];
When you tell the view to use a layer before calling setLayer:, the view becomes "layer-backed" -- it is simply using the layer as a buffer and all drawing that you want to do should be done through the usual drawRect: and related methods. You are not allowed to touch the layer directly. If you change the order of those calls:
[theView setLayer:aLayer];
[theView setWantsLayer:YES];
You now have a "layer-hosting" view, which means that the view just provides a space on the screen for the layer to be drawn into. In this case, you do your drawing directly into the layer. Since the contents of the layer become the contents of the view, you cannot add subviews or use the view's drawing mechanisms.
This is mentioned in the -[NSView setWantsLayer:] documentation; I also found an old cocoa-dev thread that explains it pretty well.
I'm not certain that this will fix your problem, but as far as I can see you're doing everything else correctly, such as setting the fill mode and updating the value after the animation finishes.

Animating Views with Core Animation Layer

I have a NSWindow containing a NSView with 'Wants Core Animation Layer' enabled. The view then contains many NSImageView that use are initially animated into position. When I run the animation, it is extremely sluggish and drops most of the frames. However, if I disable 'Wants Core Animation Layer' the animation works perfectly. I'm going to need the core animation layer but can't figure out how to get it to perform adequately.
Can I do anything to fix the performance issues?
Here is the code:
// AppDelegate
NSRect origin = ...;
NSTimeInterval d = 0.0;
for (id view in views)
{
[view performSelector:#selector(animateFrom:) withObject:origin afterDelay:d];
d += 0.05f;
}
// NSImageView+Animations
- (void)animateFrom:(NSRect)origin
{
NSRect original = self.frame;
[self setFrame:origin];
[NSAnimationContext beginGrouping];
[[NSAnimationContext currentContext] setDuration:0.20f];
[[self animator] setFrame:original];
[NSAnimationContext endGrouping];
}
It's possible that the NSTimer is killing your performance. Core Animation has rich support for controlling the timing of animations through the CAMediaTiming protocol, and you should take advantage of that in your app. Instead of using the animator proxy and NSAnimationContext, try using Core Animation directly. If you create a CABasicAnimation for each image and set its beginTime, it will delay the start of the animation. Also, for the delay to work the way you want, you must wrap each animation in a CAAnimationGroup with its duration set to the total time of the entire animation.
Using the frame property could also be contributing to the slowdown. I really like to take advantage of the transform property on CALayer in situations like this where you're doing an "opening" animation. You can lay out your images in IB (or in code) at their final positions, and right before the window becomes visible, modify their transforms to the animation's starting position. Then, you just reset all of the transforms to CATransform3DIdentity to get the interface into its normal state.
I have an example in my <plug type="shameless"> upcoming Core Animation book </plug> that's very similar to what you're trying to do. It animates 30 NSImageViews simultaneously with no dropped frames. I modified the example for you and put it up on github. These are the most relevant bits of code with the extraneous UI stuff stripped out:
Transform the layers to their start position
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
// ... SNIP ... //
//Start with all of the images at the origin
[CATransaction begin];
[CATransaction setDisableActions:YES];
for (CALayer *imageLayer in [[[self imageContainer] layer] sublayers]) {
CGPoint layerPosition = [layer position];
CATransform3D originTransform = CATransform3DMakeTranslation(20.f - layerPosition.x, -layerPosition.y, 0.f);
[imageLayer setTransform:originTransform];
}
[CATransaction commit];
}
Animate the transform back to the identity
- (IBAction)runAnimation:(id)sender {
CALayer *containerLayer = [[self imageContainer] layer];
NSTimeInterval delay = 0.f;
NSTimeInterval delayStep = .05f;
NSTimeInterval singleDuration = [[self durationStepper] doubleValue];
NSTimeInterval fullDuration = singleDuration + (delayStep * [[containerLayer sublayers] count]);
for (CALayer *imageLayer in [containerLayer sublayers]) {
CATransform3D currentTransform = [[imageLayer presentationLayer] transform];
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"transform"];
anim.beginTime = delay;
anim.fromValue = [NSValue valueWithCATransform3D:currentTransform];
anim.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim.fillMode = kCAFillModeBackwards;
anim.duration = singleDuration;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObject:anim];
group.duration = fullDuration;
[imageLayer setTransform:CATransform3DIdentity];
[imageLayer addAnimation:group forKey:#"transform"];
delay += delayStep;
}
}
I also have a video on YouTube of the example in action if you want to check it out.
Did you try to batch everything in a CATransaction?
[CATransaction begin];
for {...}
[CATransaction commit];
CATransaction is the Core Animation mechanism for batching multiple layer-tree operations into atomic updates to the render tree.