iPhone UIImageView and CABasicAnimation - iphone

I am doing a simple card rotation which works fine, but when I add a custom image background, after the card roation, the image is half chopped off. Any ideas?
float scaleValue = M_PI/2;
CABasicAnimation *yRotation;
yRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
yRotation.fromValue = [NSNumber numberWithFloat:0.0];
yRotation.toValue = [NSNumber numberWithFloat:scaleValue];
yRotation.duration = .5;
CABasicAnimation *yRotation2;
yRotation2 = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
yRotation2.fromValue = [NSNumber numberWithFloat:scaleValue];
yRotation2.toValue = [NSNumber numberWithFloat:0.0];
yRotation2.duration = .5;
yRotation2.cumulative = YES;
yRotation2.beginTime = .5;
CAAnimationGroup *groupAnim = [CAAnimationGroup animation];
groupAnim.removedOnCompletion = NO;
groupAnim.duration = 1;
groupAnim.fillMode = kCAFillModeForwards;
groupAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
groupAnim.animations = [NSArray arrayWithObjects:yRotation, yRotation2, nil];
[[image objectAtIndex:num] addAnimation:groupAnim forKey:#"animateCard"];
[self.view bringSubviewToFront:[image objectAtIndex:num]];

This code is help to you .......
once try it will be perfectly working...without choppedoff
- (void)loadView {
[super loadView];
self.view.backgroundColor = [UIColor blackColor];
// Orbit #1
CALayer *orbit1 = [CALayer layer];
orbit1.bounds = CGRectMake(0, 0, 200, 200);
orbit1.position = self.view.center;
orbit1.cornerRadius = 100;
orbit1.borderColor = [UIColor redColor].CGColor;
orbit1.borderWidth = 1.5;
CALayer *planet1 = [CALayer layer];
planet1.bounds = CGRectMake(0, 0, 20, 20);
planet1.position = CGPointMake(100, 0);
planet1.cornerRadius = 10;
planet1.backgroundColor = [UIColor redColor].CGColor;
[orbit1 addSublayer:planet1];
CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
anim1.fromValue = [NSNumber numberWithFloat:0];
anim1.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];
anim1.repeatCount = HUGE_VALF;
anim1.duration = 8.0;
[orbit1 addAnimation:anim1 forKey:#"transform"];
[self.view.layer addSublayer:orbit1];
// Orbit #2
CALayer *orbit2 = [CALayer layer];
orbit2.bounds = CGRectMake(0, 0, 120, 120);
orbit2.position = planet1.position;
orbit2.cornerRadius = 60;
orbit2.borderColor = [UIColor blueColor].CGColor;
orbit2.borderWidth = 1.5;
CALayer *planet2 = [CALayer layer];
planet2.bounds = CGRectMake(0, 0, 16, 16);
planet2.position = CGPointMake(60, 0);
planet2.cornerRadius = 8;
planet2.backgroundColor = [UIColor blueColor].CGColor;
[orbit2 addSublayer:planet2];
CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
anim2.fromValue = [NSNumber numberWithFloat:0];
anim2.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];
anim2.repeatCount = HUGE_VALF;
anim2.duration = 4.0;
[orbit2 addAnimation:anim2 forKey:#"transform"];
[orbit1 addSublayer:orbit2];
// Orbit #3
CALayer *orbit3 = [CALayer layer];
orbit3.bounds = CGRectMake(0, 0, 72, 72);
orbit3.position = planet2.position;
orbit3.cornerRadius = 36;
orbit3.borderColor = [UIColor grayColor].CGColor;
orbit3.borderWidth = 1.5;
CALayer *planet3 = [CALayer layer];
planet3.bounds = CGRectMake(0, 0, 12, 12);
planet3.position = CGPointMake(36, 0);
planet3.cornerRadius = 6;
planet3.backgroundColor = [UIColor grayColor].CGColor;
[orbit3 addSublayer:planet3];
CABasicAnimation *anim3 = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
anim3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
anim3.fromValue = [NSNumber numberWithFloat:0];
anim3.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];
anim3.repeatCount = HUGE_VALF;
anim3.duration = 2.0;
[orbit3 addAnimation:anim3 forKey:#"transform"];
[orbit2 addSublayer:orbit3];

Related

NSView not rotating around center

I'm trying to rotate a NSView around its center. But even if I change the anchorPoint, the NSView continue to rotate around its top left corner. Just a precision : I'm working on OSX 10.8.5.
Thanks in advance for your help.
Here is my code :
// myView.m
- (id)initWithFrame:(NSRect)rect
{
if(self = [super initWithFrame:(NSRect)rect])
{
self.frame = rect;
[self setWantsLayer:YES];
self.layer.backgroundColor = [NSColor whiteColor].CGColor;
self.layer.borderColor = [NSColor grayColor].CGColor;
self.layer.borderWidth = 1.0;
NSView *aView = [[NSView alloc] initWithFrame:NSMakeRect(0, 0, 50, 50)];
[aView setWantsLayer:YES];
aView.layer.backgroundColor = [NSColor redColor].CGColor;
aView.layer.anchorPoint = CGPointMake(0.5, 0.5);
[self addSubview:aView];
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
rotateAnimation.byValue = [NSNumber numberWithFloat:2*M_PI];
rotateAnimation.duration = 4;
rotateAnimation.repeatCount = INFINITY;
[aView.layer addAnimation:rotateAnimation forKey:#"rotationAnimation"];
}
}
EDITED 30-11-2018 : I managed to get the centered rotation using the layers :
// myView.m
- (id)initWithFrame:(NSRect)rect
{
if(self = [super initWithFrame:(NSRect)rect])
{
self.frame = rect;
[self setWantsLayer:YES];
self.layer.backgroundColor = [NSColor whiteColor].CGColor;
self.layer.borderColor = [NSColor grayColor].CGColor;
self.layer.borderWidth = 1.0;
NSView *aView = [[NSView alloc] init];
[aView setWantsLayer:YES];
aView.layer.backgroundColor = [NSColor redColor].CGColor;
aView.layer.bounds = CGRectMake(0, 0, 50, 50);
aView.layer.frame = CGRectMake(0, 0, 50, 50);
aView.layer.anchorPoint = CGPointMake(0.5, 0.5);
aView.layer.position = CGPointMake(0, 0);
[self.layer addSublayer:aView.layer];
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
rotateAnimation.byValue = [NSNumber numberWithFloat:2*M_PI];
rotateAnimation.duration = 4;
rotateAnimation.repeatCount = INFINITY;
[aView.layer addAnimation:rotateAnimation forKey:#"rotationAnimation"];
}
}
If you want to rotate a view you can do:
-(void)rotateByCenter:(NSView*)aView {
[aView setWantsLayer:YES];
aView.layer.anchorPoint = CGPointMake(0.5, 0.5);
aView.layer.position = CGPointMake(aView.frame.origin.x + aView.frame.size.width/2.,aView.frame.origin.y + aView.frame.size.height/2.) ;
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
rotateAnimation.byValue = [NSNumber numberWithFloat:2*M_PI];
rotateAnimation.duration = 20;
rotateAnimation.repeatCount = INFINITY;
[aView.layer addAnimation:rotateAnimation forKey:#"rotationAnimation"]; }

CAShapeLayer LineCap not proper at end of CABasic Animation

I have implemented a basic line drawing animation for a progress bar.The line has a round cap edge.When I animated the line drawing the beginning of line is having a rounded cap but in the end its a square. below is the code I am using am i missing anything??
CAShape Layer Code :
CAShapeLayer *lineLayer = [[CAShapeLayer alloc] init];
[lineLayer setFrame: CGRectMake(0,
0,
wifisyncView.popUpView.frame.size.width,
wifisyncView.popUpView.frame.size.height)];
[lineLayer setPath: [linePath CGPath]];
lineLayer.lineWidth = 9.0f;
lineLayer.strokeEnd = 9.0f;
lineLayer.fillColor = [[UIColor orangeColor] CGColor];
lineLayer.lineCap = kCALineCapRound;
[lineLayer setStrokeColor:[[UIColor orangeColor] CGColor]];
[lineLayer setMasksToBounds:YES];
lineLayer.cornerRadius = 30.0f;
CABASIC Animation code :
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
drawAnimation.duration = 5.0; // "animate over 5 seconds "
drawAnimation.repeatCount = 1.0; // Animate only once..
drawAnimation.removedOnCompletion = NO;// Remain stroked after the animation..
drawAnimation.fillMode = kCAFillModeForwards;
// Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:1.0f];
// Experiment with timing to get the appearence to look the way you want
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
drawAnimation.delegate = self;
// Add the animation to the circle
[lineLayer addAnimation:drawAnimation forKey:#"drawLineAnimation"];
Image Attached :
I dont find any mistakes in your code. I created a new project and pasted your code to viewDidLoad and is working fine. Code for your reference.
UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(100, 100)];
[linePath addLineToPoint:CGPointMake(500, 100)];
CAShapeLayer *lineLayer = [[CAShapeLayer alloc] init];
[lineLayer setFrame:self.view.bounds];
[lineLayer setPath: [linePath CGPath]];
lineLayer.lineWidth = 9.0f;
lineLayer.strokeEnd = 9.0f;
lineLayer.fillColor = [[UIColor orangeColor] CGColor];
lineLayer.lineCap = kCALineCapRound;
[lineLayer setStrokeColor:[[UIColor orangeColor] CGColor]];
[lineLayer setMasksToBounds:YES];
lineLayer.cornerRadius = 30.0f;
[self.view.layer addSublayer:lineLayer];
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
drawAnimation.duration = 5.0; // "animate over 5 seconds "
drawAnimation.repeatCount = 1.0; // Animate only once..
drawAnimation.removedOnCompletion = NO;// Remain stroked after the animation..
drawAnimation.fillMode = kCAFillModeForwards;
// Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:1.0f];
// Experiment with timing to get the appearence to look the way you want
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
drawAnimation.delegate = self;
// Add the animation to the circle
[lineLayer addAnimation:drawAnimation forKey:#"drawLineAnimation"];
I think you should try changing
[lineLayer setFrame: CGRectMake(0,
0,
wifisyncView.popUpView.frame.size.width,
wifisyncView.popUpView.frame.size.height)];
to
[lineLayer setFrame: CGRectMake(0,
0,
wifisyncView.popUpView.bounds.size.width,
wifisyncView.popUpView.bounds.size.height)];

Iphone-How do I get an image to rotate continously for about 60 seconds and then stop in the other direction

I need the image to spin around a few times and come to a stop in the opposite dirrection. THe image is a button with arrow that points right and then it spins a few times and comes to a stop facing the other way. Any help will be appreciated.
This is what I have at the moment.
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:#"transform.rotation.z"];
animation.duration = 0.60;//animation.duration = 0.60;
animation.repeatCount = 1;//animation.repeatCount = 1000ˆ
//#warning remove comment brackets below
animation.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:1.0], nil];
animation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:(degrees / 180)*M_PI], nil];
animation.fillMode = kCAFillModeForwards;
Please try this and let me know. This is working for me.
UIImageView *tempView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 80, 80)];
tempView.image = [UIImage imageNamed:#"Icon"];
tempView.backgroundColor = [UIColor redColor];
[self.view addSubview:tempView];
const NSUInteger rotations = 10;
const NSTimeInterval duration = 5;
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:#"transform.rotation"];
CGFloat touchUpStartAngle = 0;
CGFloat touchUpEndAngle = (M_PI);
CGFloat angularVelocity = (((2 * M_PI) * rotations) + M_PI) / duration;
anim.values = #[#(touchUpStartAngle), #(touchUpStartAngle + angularVelocity * duration)];
anim.duration = duration;
anim.autoreverses = NO;
anim.delegate = self;
anim.repeatCount = 1;
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[tempView.layer addAnimation:anim forKey:#"test"];
tempView.transform = CGAffineTransformMakeRotation(touchUpStartAngle + (touchUpEndAngle));
The following code works for me. It actually doesn´t change the direction. I think you can achieve this by adding a timer which change the imagesArray.
First I also tried using CAKeyframeAnimation like you but I couldn´t figure it out. So I changed to an animating image - I thought this way couldn´t be too bad, because Apple e.g. use this way also for animating the activity indicator.
-(void) myImageInitFunction {
UIImage *icon = [UIImage imageNamed:#"yourIconImage"];
NSArray *imagesArray = rotatingImagesArrayOfImage(icon, 30);
myImageViewThatShouldRotate.animationImages = imageArray;
myImageViewThatShouldRotate.animationDuration= 2.0;
[myImageViewThatShouldRotate startAnimating];
}
NSArray *rotatingImagesArrayOfImage(UIImage * icon, NSInteger nFrames)
{
NSMutableArray *images = [NSMutableArray arrayWithObject:icon];
for (NSInteger nLoop = 1; nLoop < nFrames; nLoop++) {
[images addObject: [UIImage imageWithCGImage: CGImageRotatedByAngle(icon.CGImage, nLoop * ( 360 / nFrames)) ] ];
}
return images;
}
CGImageRef CGImageRotatedByAngle(CGImageRef imgRef, CGFloat angle) {
CGFloat angleInRadians = angle * (M_PI / 180);
CGFloat width = CGImageGetWidth(imgRef);
CGFloat height = CGImageGetHeight(imgRef);
CGRect imgRect = CGRectMake(0, 0, width, height);
CGAffineTransform transform = CGAffineTransformMakeRotation(angleInRadians);
CGRect rotatedRect = CGRectApplyAffineTransform(imgRect, transform);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef bmContext = CGBitmapContextCreate(NULL,
rotatedRect.size.width,
rotatedRect.size.height,
8,
0,
colorSpace,
kCGImageAlphaPremultipliedFirst);
CGContextSetAllowsAntialiasing(bmContext, YES);
CGContextSetShouldAntialias(bmContext, YES);
CGContextSetInterpolationQuality(bmContext, kCGInterpolationHigh);
CGColorSpaceRelease(colorSpace);
CGContextTranslateCTM(bmContext,
+(rotatedRect.size.width/2),
+(rotatedRect.size.height/2));
CGContextRotateCTM(bmContext, angleInRadians);
CGContextTranslateCTM(bmContext,
-(rotatedRect.size.width/2),
-(rotatedRect.size.height/2));
CGContextDrawImage(bmContext, CGRectMake(0, 0,
rotatedRect.size.width,
rotatedRect.size.height),
imgRef);
CGImageRef rotatedImage = CGBitmapContextCreateImage(bmContext);
CFRelease(bmContext);
return rotatedImage;
}
i use this:
- (void)startAnimations {
CABasicAnimation* spinAnimation = [CABasicAnimation
animationWithKeyPath:#"transform.rotation"];
spinAnimation.toValue = [NSNumber numberWithFloat:M_PI];
spinAnimation.cumulative = YES;
spinAnimation.duration = 0.5;
spinAnimation.repeatCount = 10000;
[imageView.layer addAnimation:spinAnimation forKey:#"spinAnimation"];
}
- (void)cancelAnimations {
[imageView.layer removeAnimationForKey:#"spinAnimation"];
imageView.transform = CGAffineTransformMakeRotation(0.0);
}
call a timer in start animations to call cancelanimations in 60 secs. you can make rotation angle whatever you want
Thanks everyone this page is now very resourceful.
This is another solution.
- (CAKeyframeAnimation *)rotateFrom:(CGFloat)fromDegrees to:(CGFloat)toDegrees {
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:#"transform.rotation.z"];
animation.delegate = self;
animation.duration = 0.30;
animation.repeatCount = 1;
animation.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:1.0], nil];
animation.values= [NSArray arrayWithObjects:
[NSNumber numberWithFloat:fromDegrees*(M_PI/180)],
[NSNumber numberWithFloat:toDegrees*(M_PI/180)], nil];
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
return animation;
}

Rotate and translate UIImageView off and on screen

How can I rotate and translate a UIImageView off one side of the screen, then its coming back from the other side..
Lets say I have a Wheel that I want to rotate and translate from the middle then off the screen to the left, then its "coming back" from the right side and back the middle..
I used following code to rotate and translate it OFF the screen;
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: -M_PI * 2.0 /* full rotation*/ * 2 * 1 ];
rotationAnimation.duration = 1;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1.0;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
rotationAnimation.delegate = self;
CABasicAnimation* translationAnimation;
translationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.translation.x"];
translationAnimation.toValue = [NSNumber numberWithFloat:-700];
translationAnimation.duration = 1;
translationAnimation.cumulative = YES;
translationAnimation.repeatCount = 1.0;
translationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
translationAnimation.removedOnCompletion = NO;
translationAnimation.fillMode = kCAFillModeForwards;
Dunno if this is the right way to go, so please help!
try This, it will Work for you
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: -M_PI * 2.0 /* full rotation*/ * 2 * 1 ];
rotationAnimation.duration = 1;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1.0;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
rotationAnimation.delegate = self;
CABasicAnimation* translationAnimation;
translationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.translation.x"];
translationAnimation.toValue = [NSNumber numberWithFloat:-700];
translationAnimation.duration = 1;
translationAnimation.cumulative = YES;
translationAnimation.repeatCount = 1.0;
translationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
translationAnimation.removedOnCompletion = NO;
translationAnimation.fillMode = kCAFillModeForwards;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObjects:rotationAnimation,translationAnimation, nil];
group.delegate = self;
group.removedOnCompletion = NO;
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[[self.imageView.layer addAnimation:group forKey:#"randt"];
Swift 5.4.2 (based on Sanjeev Rao reply):
let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
rotationAnimation.toValue = NSNumber(floatLiteral: Double.pi * 2.0 /* full rotation*/ * 2 * 1)
rotationAnimation.duration = 1
rotationAnimation.isCumulative = true
rotationAnimation.repeatCount = 1.0;
rotationAnimation.timingFunction = CAMediaTimingFunction(name: .easeOut)
rotationAnimation.delegate = self // can be skipped
let translationAnimation = CABasicAnimation(keyPath: "transform.rotation.x")
translationAnimation.toValue = NSNumber(floatLiteral: -700)
translationAnimation.duration = 1
translationAnimation.isCumulative = true
translationAnimation.repeatCount = 1.0
translationAnimation.timingFunction = CAMediaTimingFunction(name: .easeOut)
translationAnimation.isRemovedOnCompletion = false
translationAnimation.fillMode = .forwards
let groupAnimation = CAAnimationGroup()
groupAnimation.animations = [rotationAnimation, translationAnimation]
group.delegate = self // can be skipped
groupAnimation.isRemovedOnCompletion = false
groupAnimation.timingFunction = CAMediaTimingFunction(name: .easeOut)
self.imageView.layer.add(groupAnimation, forKey: "randt")

UIScrollview gets slow after CABasicAnimations

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