as the title suggest, I'm having problems with my UIScrollview, which movements get jerky after I play a CABasicAnimation. The animation flips the UI elements on the screen (up to 10) around while fading them out. To do this, I use the code below:
-(void)flipLayers:(UIView *)view {
CGFloat subviewX = ((1/view.frame.size.width)*(view.frame.origin.x+200));
CGFloat subviewY = 0.5;
[self setAnchorPoint:CGPointMake(-subviewX, subviewY) forView:view];
CALayer *layer = view.layer;
layer.shouldRasterize = YES;
CATransform3D aTransform = CATransform3DIdentity;
CGFloat zDistance = 2000;
aTransform.m34 = 1.0 / -zDistance;
scrollView.layer.sublayerTransform = aTransform;
CATransform3D bTransform = CATransform3DIdentity;
CABasicAnimation *rotateAnim = [CABasicAnimation animationWithKeyPath:#"transform"];
rotateAnim.fromValue= [NSValue valueWithCATransform3D:bTransform];
bTransform = CATransform3DRotate(aTransform, -M_PI_2, 0, 1, 0);;
rotateAnim.duration=0.2;
rotateAnim.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
rotateAnim.toValue=[NSValue valueWithCATransform3D:bTransform];
layer.transform = bTransform;
rotateAnim.removedOnCompletion = YES;
[layer addAnimation:rotateAnim forKey:nil];
CABasicAnimation *fadeAnim = [CABasicAnimation animationWithKeyPath:#"opacity"];
fadeAnim.duration = 0.12;
fadeAnim.removedOnCompletion = YES;
fadeAnim.beginTime = CACurrentMediaTime() + 0.08;
fadeAnim.fromValue = [NSNumber numberWithFloat:1.0];
fadeAnim.toValue = [NSNumber numberWithFloat:0.0];
[layer addAnimation:fadeAnim forKey:nil];
}
To restore the UI elements original position in a similar manner, I use this code
-(void)flipLayersBackwards:(UIView *)view {
CALayer *layer = view.layer;
CATransform3D aTransform = CATransform3DIdentity;
CGFloat zDistance = 2000;
aTransform.m34 = 1.0 / -zDistance;
scrollView.layer.sublayerTransform = aTransform;
CATransform3D bTransform = CATransform3DIdentity;
CABasicAnimation *rotateAnim = [CABasicAnimation animationWithKeyPath:#"transform"];
rotateAnim.fromValue= [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0, 1, 0)];
bTransform = CATransform3DRotate(aTransform, 0, 0, 1, 0);;
rotateAnim.duration=0.2;
rotateAnim.removedOnCompletion = YES;
rotateAnim.toValue=[NSValue valueWithCATransform3D:bTransform];
rotateAnim.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut];
layer.transform = bTransform;
[layer addAnimation:rotateAnim forKey:#"rotateAnim"];
CABasicAnimation *fadeAnim = [CABasicAnimation animationWithKeyPath:#"opacity"];
fadeAnim.duration = 0.064;
fadeAnim.removedOnCompletion = YES;
fadeAnim.beginTime = CACurrentMediaTime() + 0.02;
fadeAnim.fromValue = [NSNumber numberWithFloat:0.0];
fadeAnim.toValue = [NSNumber numberWithFloat:1.0];
[layer addAnimation:fadeAnim forKey:nil];
layer.shouldRasterize = NO;
}
The more times the animation is used, the jerkier the scrollview's movement get. Does anyone have an idea what could be causing this? Any help on how to fix this would be greatly appreciated. Thanks in advance :)
EDIT: I have found that the perspective transform is the cause of the choppiness, but I have no idea what to do about it
Related
I am making an iPhone app that draws a circle on the screen. I use a timer (every 5 second), so that I can 'grow' the circle, then wait 5 seconds then grow again. Now I am having trouble when animating the increase in size of the circle (I use paths and a CAShapeLayer layer). The size (from and to) are fine with the animation, its just when it starts the circle moves to the upper left hand side and grows from there. Any help or suggestions would be great. Thanks
The class where this is implemented is a UIControl, which is added to a UIView.
//Called in init method
(void) initalPop {
//Circle
self.bubble = [CAShapeLayer layer];
self.bubble.bounds = self.bounds;
self.bubble.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
self.bubble.fillColor = [
[UIColor greenColor] CGColor
];
self.bubble.strokeColor = [
[UIColor greenColor] CGColor
];
self.bubble.lineWidth = 4.0;
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, self.bounds);
self.bubble.path = path;
[self.layer addSublayer: self.bubble];
}
//Called when timer goes off
- (void) StageGrow {
CGFloat growSize = 50.0;
//Change the size of us and center the circle (but dont want to animate this
[CATransaction begin];
[CATransaction setValue: (id) kCFBooleanTrue forKey: kCATransactionDisableActions];
self.bounds = CGRectMake(0, 0, self.bounds.size.width + growSize, self.bounds.size.height + growSize);
self.bubble.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
[CATransaction commit];
[self ActualGrowCircle];
} - (void) ActualGrowCircle {
CGMutablePathRef oldPath = CGPathCreateMutable();
CGPathAddEllipseInRect(oldPath, nil, self.bubble.bounds);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, self.bounds);
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: #"path"];
animation.duration = 2.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = 1;
animation.delegate = self;
animation.autoreverses = NO;
animation.fromValue = (__bridge id) oldPath;
animation.toValue = (__bridge id) path;
self.bubble.bounds = self.bounds;
self.bubble.path = path;
[self.bubble addAnimation: animation forKey: #"animatePath"];
}
Let's say you're growing the bubble from size (100, 100) to size (150, 150).
You create oldPath as an ellipse in the rectangle (0, 0, 100, 100).
You create path as an ellipse in the rectangle (0, 0, 150, 150).
You set the bounds of the bubble layer to (0, 0, 150, 150), and you don't animate this change.
That means that oldPath will appear aligned to the top and left edges of the bubble layer.
One way to fix this is to create oldPath in a rectangle that is centered in the bubble's new bounds:
CGRect oldBubbleRect = CGRectInset(self.bounds, growSize / 2, growSize / 2);
CGPathRef oldPath = CGPathCreateWithEllipseInRect(oldBubbleRect, NULL);
By the way, you are leaking the paths you're creating. You need to call CGPathRelease on them after you're done with them.
Worked it out. In the long run I grouped the animations together and all became good (see code below). Thanks for your help Rob.
-(void)ActualGrowCircle {
CGMutablePathRef newPath = CGPathCreateMutable();
CGPathAddEllipseInRect(newPath, nil, self.bounds);
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"path"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = 1;
animation.autoreverses = NO;
animation.fromValue = (__bridge id)self.bubble.path;
animation.toValue = (__bridge id)newPath;
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:#"bounds"];
animation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation2.repeatCount = 1;
animation2.autoreverses = NO;
animation2.fromValue = [NSValue valueWithCGRect:self.bubble.bounds];
animation2.toValue = [NSValue valueWithCGRect:self.bounds];
CAAnimationGroup *group = [CAAnimationGroup animation];
[group setAnimations:[NSArray arrayWithObjects: animation2, animation, nil]];
group.duration = 0.5;
group.delegate = self;
self.bubble.bounds = self.bounds;
self.bubble.path = newPath;
[self.bubble addAnimation:group forKey:#"animateGroup"];
CGPathRelease(newPath);
}
Recently more and more apps are using new type of transition between views.
It's hard to define it but the transition looks like the preview view is fading out, going lower (downward translation) and scale down a little - all simultanously.
It's really subtle and elegant.
You can observe this transition in slow motion in Facebook app - find somebody's picture on the wall, tap to view it and then drag the fullscreen image down slowly and you will notice that the wall is rising from the back - fading and scaling a little bit. That's the transition.
Transition also envolves statusbar fading.
This transition is also present in Gmail 2.0 when you open settings from the left pane.
I think there is a certain framework or prepared method for this because more and more apps have this implemented.
But maybe I'm also wrong because I see some minor differences in some apps in the transition's trajectory - eg. Gmail uses a little carousel effect, but facebook just scales down to the middle.
Anyway it appears to be a new trend.
I'm looking for some reference or framework or know-how about implementing that sort of transitions.
Thanks for any useful stuff.
Try this link.I think this is the thing you are exactly looking for https://github.com/kentnguyen/KNSemiModalViewController
I first saw it used in the National Geographic apps... have a try with these two methods, the first 'drops it back' the second 'brings it back'. It's worked well for me in the past, just make a few adjustments to suit your needs.
- (void)dropItBack:(id)sender
{
// Position
CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:#"position"];
posAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 284)];//center point
// Opacity
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
opacityAnimation.toValue = [NSNumber numberWithFloat:0.5f];
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
scaleAnimation.toValue = [NSNumber numberWithDouble:0.8];
// Dramaticism of the Z rotation
// A lower number is more dramatic
float distance = 1000;
CATransform3D trans = CATransform3DIdentity;
trans.m34 = 1.f / -distance;
// Rotate Back
CABasicAnimation *rockBack = [CABasicAnimation animationWithKeyPath:#"transform"];
rockBack.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, 1.f, 0.f, 0.f)];
rockBack.beginTime = 0.f;
// Rotate forward
trans.m34 = 0.f;
CABasicAnimation *rockForward = [CABasicAnimation animationWithKeyPath:#"transform"];
rockForward.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, -1.f, 0.f, 0.f)];
rockForward.beginTime = 0.25f;
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 0.5f;
animationGroup.repeatCount = 0.f;
animationGroup.removedOnCompletion = NO;
animationGroup.autoreverses = NO;
animationGroup.fillMode = kCAFillModeForwards;
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[animationGroup setAnimations:[NSArray arrayWithObjects:rockBack, rockForward, scaleAnimation, posAnimation, opacityAnimation, nil]];
[self.navigationController.view.layer addAnimation:animationGroup forKey:nil];
popsheet = [UIButton buttonWithType:UIButtonTypeCustom];
[popsheet setBackgroundColor:[UIColor blueColor]];
[popsheet setFrame:CGRectMake(0, 580, 320, 400)];
[popsheet addTarget:self action:#selector(bringItForward:) forControlEvents:UIControlEventTouchUpInside];
[self.tabBarController.view addSubview:popsheet];
[UIView animateWithDuration:0.3 animations:^{
[popsheet setFrame: CGRectMake(0, 180, 320, 400)];
}];
}
- (void)bringItForward:(id)sender
{
// Position
CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:#"position"];
posAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 284)];
// Opacity
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
opacityAnimation.toValue = [NSNumber numberWithFloat:1.f];
// Scale
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
scaleAnimation.toValue = [NSNumber numberWithDouble:1.f];
// Dramaticism of the Z rotation
// A lower number is more dramatic
float distance = 1000;
CATransform3D trans = CATransform3DIdentity;
trans.m34 = 1.f / distance;
// Rotate back
CABasicAnimation *rockBack = [CABasicAnimation animationWithKeyPath:#"transform"];
rockBack.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, 1.f, 0.f, 0.f)];
rockBack.beginTime = 0.f;
// Rotate forward
trans.m34 = 0.f;
CABasicAnimation *rockForward = [CABasicAnimation animationWithKeyPath:#"transform"];
rockForward.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, -1.f, 0.f, 0.f)];
rockForward.beginTime = 0.25f;
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 0.5f;
animationGroup.repeatCount = 0.f;
animationGroup.removedOnCompletion = NO;
animationGroup.autoreverses = NO;
animationGroup.fillMode = kCAFillModeForwards;
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[animationGroup setAnimations:[NSArray arrayWithObjects:posAnimation, rockBack, rockForward, opacityAnimation, nil]];
[self.navigationController.view.layer addAnimation:animationGroup forKey:nil];
[UIView animateWithDuration:0.3 animations:^{
[popsheet setFrame: CGRectMake(0, 580, 320, 400)];
}];
}
I think you should try this library:
https://github.com/michaelhenry/MHFacebookImageViewer
I have been trying for the last few days to create the ken burns effect using a CALayer with animations and then save it to a video file.
I have my image layer which is inside another layer that is 1024x576. All of the animations are applied to the image layer.
Here is the code so far:
- (CALayer*)buildKenBurnsLayerWithImage:(UIImage *)image startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint fromScale:(float)fromScale toScale:(float)toScale
{
float calFromScale = fromScale + 1;
float calToScale = toScale + 1;
float fromX = startPoint.x * calFromScale;
float fromY = (image.size.height * calFromScale) - (videoSize.height + (startPoint.y * calFromScale));
float toX = endPoint.x * calToScale;
float toY = (image.size.height * calToScale) - (videoSize.height + (endPoint.y * calToScale));
CGPoint anchor = CGPointMake(0.0, 0.0);
CALayer* imageLayer = [CALayer layer];
imageLayer.contents = (id)image.CGImage;
imageLayer.anchorPoint = anchor;
imageLayer.bounds = CGRectMake(0.0, 0.0, image.size.width, image.size.height);
imageLayer.position = CGPointMake(image.size.width * anchor.x, image.size.height * anchor.y);
imageLayer.contentsGravity = kCAGravityResizeAspect;
// create the panning animation.
CABasicAnimation* panningAnimation = [CABasicAnimation animationWithKeyPath:#"position"];
panningAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(-fromX, -fromY)];
panningAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(-toX, -toY)];
panningAnimation.additive = YES;
panningAnimation.removedOnCompletion = NO;
// create the scale animation.
CABasicAnimation* scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:fromScale];
scaleAnimation.toValue = [NSNumber numberWithFloat:toScale];
scaleAnimation.additive = YES;
scaleAnimation.removedOnCompletion = NO;
CAAnimationGroup* animationGroup = [CAAnimationGroup animation];
animationGroup.animations = [[NSMutableArray alloc] initWithObjects:panningAnimation,scaleAnimation, nil];
animationGroup.beginTime = 1e-100;
animationGroup.duration = 5.0;
animationGroup.removedOnCompletion = NO;
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[imageLayer addAnimation:animationGroup forKey:nil];
return imageLayer;
}
Here is how i'm calling the method:
CALayer* animatedLayer = [self buildKenBurnsLayerWithImage:image startPoint:CGPointMake(100, 100) endPoint:CGPointMake(500, 500) fromScale:5.0 toScale:2.0];
The problem I am having is that the end result with panning and scaling is off by a few pixels on the screen.
If someone knows how to fix this i would great appreciate it.
All transformations are applied with respect to the anchor point. Try using the anchor point
CGPoint anchor = CGPointMake(0.5f, 0.5f);
Your "viewport" should no longer scale to the bottom right (if that is responsible for the animation being off by a few pixels), but equally to all directions.
I use the following to code to add drop shadow:
letterE.layer.shadowColor = [[UIColor blackColor] CGColor];
letterE.layer.shadowOffset = CGSizeMake(2.5, 2.5);
letterE.layer.shadowRadius = 3.0;
letterE.layer.shadowOpacity = 0.95;
and the following to rotate:
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0];
rotationAnimation.duration = 5.0;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1.0;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[letterE.layer addAnimation:rotationAnimation forKey:#"rotationAnimation"];
During the animation, the shadow is static which looks weird:
How can I make the shadow dynamically updated during the animation?
I found this interesting so I gave it a shot. A possible solution is to build a second clear view under the main view, giving it (the bottom view) a shadow using the original view's path. Then you can apply the animation to both views. I did this with simple rectangular views but I see no reason why this can't be done with more complex paths or using 2 CALayers instead of 2 UIViews.
This is how I set up my views...
testView = [[UIView alloc] initWithFrame:CGRectMake(40, 40, 100, 100)];
testView.backgroundColor = [UIColor redColor];
//increase y origin of second view to simulate shadow offset
testViewShadow = [[UIView alloc] initWithFrame:CGRectMake(40, 50, 100, 100)];
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(0, 0, testView.frame.size.width, testView.frame.size.height));
testViewShadow.layer.shadowPath = path;
testViewShadow.layer.shadowOpacity = 1.0;
testViewShadow.layer.shadowOffset = CGSizeMake(0, 0);
testViewShadow.layer.shadowRadius = 10.0;
CFRelease(path);
[self.view addSubview:testViewShadow];
[self.view addSubview:testView];
..and my animation (just hooked up your CAAnimation to a button as an IBAction and applied to both views)...
- (IBAction)rotate:(id)sender{
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0];
rotationAnimation.duration = 5.0;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1.0;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[testView.layer addAnimation:rotationAnimation forKey:#"rotationAnimation"];
[testViewShadow.layer addAnimation:rotationAnimation forKey:#"rotationAnimation"];
}
This is what the result looks like...
Any (2D) transformations should look believable if you apply them to both views.
Hope that helps!
I am creating a bookmarking feature for my app, I'd like to show the user what happens in a way similar to itunes store, when you buy something it jumps to tabBar. I once watched some WWDC video that explained this, but can't remember how to do it. Any idea where I should start looking for?
You can take a snapshot of the view you want to animate, then create an image layer, then use Core Animation to animate that to the tab bar. Here's the code I use to do that:
- (void)animateSnapshotOfView:(UIView *)view toTab:(UINavigationController *)navController
{
NSUInteger targetTabIndex = [self.tabBarController.viewControllers indexOfObject:navController];
NSUInteger tabCount = [self.tabBarController.tabBar.items count];
// AFAIK there's no API (as of iOS 4) to get the frame of a tab bar item, so guesstimate using the index and the tab bar frame.
CGRect tabBarFrame = self.tabBarController.tabBar.frame;
CGPoint targetPoint = CGPointMake((targetTabIndex + 0.5) * tabBarFrame.size.width / tabCount, CGRectGetMidY(tabBarFrame));
targetPoint = [self.window convertPoint:targetPoint fromView:self.tabBarController.tabBar.superview];
UIGraphicsBeginImageContext(view.frame.size);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGRect frame = [self.window convertRect:view.frame fromView:view.superview];
CALayer *imageLayer = [CALayer layer];
imageLayer.contents = (id)image.CGImage;
imageLayer.opaque = NO;
imageLayer.opacity = 0;
imageLayer.frame = frame;
[self.window.layer insertSublayer:imageLayer above:self.tabBarController.view.layer];
CGMutablePathRef path = CGPathCreateMutable();
CGPoint startPoint = imageLayer.position;
CGPathMoveToPoint(path, NULL, startPoint.x, startPoint.y);
CGPathAddCurveToPoint(path,NULL,
startPoint.x + 100, startPoint.y,
targetPoint.x, targetPoint.y - 100,
targetPoint.x, targetPoint.y);
CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
positionAnimation.path = path;
CGPathRelease(path);
CABasicAnimation *sizeAnimation = [CABasicAnimation animationWithKeyPath:#"bounds.size"];
sizeAnimation.fromValue = [NSValue valueWithCGSize:imageLayer.frame.size];
sizeAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(50, 50)];
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
opacityAnimation.fromValue = [NSNumber numberWithFloat:0.75];
opacityAnimation.toValue = [NSNumber numberWithFloat:0];
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = [NSArray arrayWithObjects:positionAnimation, sizeAnimation, opacityAnimation, nil];
animationGroup.duration = 1.0;
animationGroup.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
animationGroup.delegate = self;
[animationGroup setValue:imageLayer forKey:#"animatedImageLayer"];
[imageLayer addAnimation:animationGroup forKey:#"animateToTab"];
}