I move my UIImageView with layer around the screen. When at some point I'm trying to retrieve x and y coordinates of a moved imageView using imageView.frame.origin.x I receive original coordinates not the new ones after the move. How to get X and Y correctly?
Here is my code:
UIImageView *imageView = [[UIImageView alloc] initWithFrame:rect];
imageView.animationImages = [NSArray arrayWithArray:imgNameArr];
imageView.animationDuration = 2;
imageView.animationRepeatCount = 0;
[imageView startAnimating];
[self.view addSubview:imageView];
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.duration = speed;
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
CGMutablePathRef pointPath = CGPathCreateMutable();
CGPathMoveToPoint(pointPath, NULL, rect.origin.x, rect.origin.y);
CGPathAddLineToPoint(pointPath, NULL, x, y);
pathAnimation.path = pointPath;
CGPathRelease(pointPath);
[imageView.layer addAnimation:pathAnimation forKey:[NSString stringWithFormat:#"pathAnimation%#",objId]];
[imageView release];
Per the UIView documentation for the frame property:
Warning: If the transform property is not the identity transform, the
value of this property is undefined and therefore should be ignored.
The frame property also becomes undefined if you adjust that view's layer's transform or affineTransform properties (which are actually what the UIView alters when you set its transform). In Cocoa Touch transforms are applied at the time of compositing by the compositor. At present what you seem to get when a transform is applied is the original frame as though there were no transform, but as the docs say it's undefined so don't rely on that.
If you're just moving the view around with no other transformation, I recommend you use the view's center property rather than applying a transform. That will update your frame correctly. Based on empirical evidence, UIKit also seems smart enough that just adjusting the centre doesn't have any performance downside compared to applying a transform.
Related
I have a UIImageView with image just like above so what i have to do is gradually decrease and increase the shape of the image.
For achieving above task obviously I have to apply mask so I have created a rounded CAShapeLayer and added to the UIImageView layer and its working fine if I change my radius it will show only that amount of image wrt radius.
My problem is how we can apply animation so it will show in animated form. Please guide me I am not able to achieve with keyframe animation.
Following are the code for masking wrt radius.
// Set up the shape of the circle
int rChange = 0; // Its doing proper masking while changing this value
int radius = 123.5-rChange;
CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0+rChange, 0+rChange, 2.0*radius, 2.0*radius)
cornerRadius:radius].CGPath;
// Configure the apperence of the circle
[circle setFillColor:[[UIColor blackColor] CGColor]];
[[self.originalImageView layer] setMask:circle];
self.originalImageView.layer.masksToBounds = YES;
where 123.5 is my maximum radius of the image
and originalImageView is myUIImageView
If all you want to do is show a brown circle with an animated varying radius, I suggest two changes:
Don't bother with an image. Just use a CAShapeLayer and set its fillColor to brown.
Set the layer's path once, to a circle with width and height of 1 point. Then use the CAShapeLayer's transform to vary the size. You can animate the transform.
For example, create the layer like this:
CGRect bounds = self.view.bounds;
circleLayer = [CAShapeLayer layer];
circleLayer.fillColor = [UIColor brownColor].CGColor;
circleLayer.position = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
// Create a circle with 1-point width/height.
circleLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 1, 1)].CGPath;
// Use the layer transform to scale the circle up to the size of the view.
[circleLayer setValue:#(bounds.size.width) forKeyPath:#"transform.scale"];
Then you can change its size like this:
[circleLayer setValue:#(newSize) forKeyPath:#"transform.scale"];
That will implicitly (automatically) animate the size change using default parameters. If you want to use different animation parameters, you can explicitly animate the transform:
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
animation.fromValue = [circleLayer valueForKeyPath:#"transform.scale"];
animation.toValue = #(newSize);
animation.duration = 3.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut];
// Important: change the actual layer property before installing the animation.
[circleLayer setValue:animation.toValue forKeyPath:animation.keyPath];
// Now install the explicit animation, overriding the implicit animation.
[circleLayer addAnimation:animation forKey:animation.keyPath];
I've been trying to create a cool text effect with the CAReplicatorlayer, CATextLayer and very basic animations. I'm trying to make the letters look like they are being droped from the top of the screen followed by cool replicators which will become less and less visible. I've managed to do this effect but not completely.
So far this is what I've got:
CATextLayer *messageLayer = [CATextLayer layer];
[messageLayer setForegroundColor:[[UIColor blackColor] CGColor]];
[messageLayer setContentsScale:[[UIScreen mainScreen] scale]];
[messageLayer setFrame:CGRectMake(0, 0, 40, 40)];
[messageLayer setString:#"A"];
CAReplicatorLayer *replicatorX = [CAReplicatorLayer layer];
//Set the replicator's attributes
replicatorX.frame = CGRectMake(0, 0, 40, 40);
replicatorX.anchorPoint = CGPointMake(0,0);
replicatorX.position = CGPointMake(0, 0);
replicatorX.instanceCount = 9;
replicatorX.instanceDelay = 0.15;
replicatorX.instanceAlphaOffset = -0.1;
replicatorX.zPosition = 200;
replicatorX.anchorPointZ = -160;
[replicatorX addSublayer:messageLayer];
[self.view.layer addSublayer:replicatorX];
messageLayer.position = CGPointMake(40, 400);
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position.y"];
animation.fromValue = [NSNumber numberWithInt:0];;
animation.toValue = [NSNumber numberWithInt:400];
animation.duration = 3;
[messageLayer addAnimation:animation forKey:#"s"];
I have two problems:
The replicated layers are starting in the End point.
When the main layer reach his last animated point the animation stops and the replicated layers can't finish their animation.
Setting the correct values to the animation object's fillMode and removedOnCompletion properties will hopefully solve your problems:
"The replicated layers are starting in the End point."
This is caused by the value assigned to instanceDelay property, which delays the animation with 0.15s in your example. To present the animation from the fromValue, you need to account for this delay by setting the animation's fillMode to kCAFillModeBackwards .
animation.fillMode = kCAFillModeBackwards;
"When the main layer reach his last animated point the animation stops
and the replicated layers could not finish their animation."
This happens because by default "the animation is removed from the target layer's animations upon completion."1. You can override this default behavior by setting the animation attribute removedOnCompletion to NO.
animation.removedOnCompletion = NO;
Hope this helps. :)
I need to move object (UIImageView) from point A to point B, then rotate image at point B by 180 degrees to face the opposite direction and move object from B to A (backwards).
I have the code below which moves from A to B. I also know how to rotate UIImageView. But how to know when object has reached point B and how to apply rotation action considering there are many objects on the screen?
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.duration = speed;
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
CGMutablePathRef pointPath = CGPathCreateMutable();
CGPathMoveToPoint(pointPath, NULL, rect.origin.x, rect.origin.y);
CGPathAddLineToPoint(pointPath, NULL, x, y);
pathAnimation.path = pointPath;
CGPathRelease(pointPath);
[imageView.layer addAnimation:pathAnimation forKey:[NSString stringWithFormat:#"pathAnimation%#",objId]];
[imageView release];
Set a delegate on the CAAnimation object, and in the delegate implement the animationDidStop:finished: method.
OTOH, the animation you described sounds like it could be done easily enough with UIView's animation support. See Animating Views with Blocks if you're targeting 4.0 and up, or Animating Views if you're still targeting earlier versions.
You can use the CAAnimation delegate method
-(void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
I am trying to flip and give perspective rotate an uiimageview, in order to obtain an effect like reflection. first i give perspective using CATransform3D and then flip using CGAffineTransformMake. However i loose the perspective effect after the second trasnformation. and i couldn't figure out how to perspective and flip both using CATransform3D. img is the first image and img2 will be its reflection.
CALayer *layer = img.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -600;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 30.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;
img2.transform = CGAffineTransformMake(
1, 0, 0, -1, 0, img2.bounds.size.height
);
I was able to accomplish this effect in 4 (optionally 5) steps:
Create two UIImageViews in your nib. Create a UIImageView for your main image, then another for your reflected image. Make sure their view content modes are both set to Aspect Fit. Also, make the frame size of the reflected image 2x that of your main image (because the perspective reflection will add width to the image).
Load up the main image as normal. Now load up the reflection to be upside-down like so:
reflectionView.image = [UIImage
imageWithCGImage:mainImageView.image.CGImage
scale:1.0f
orientation: UIImageOrientationDownMirrored];
Now create the perspective transform like so:
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m24 = 1.0f/-mainImageView.frame.size.width;
[[reflectionView layer] setTransform:rotationAndPerspectiveTransform];
Finally, move the reflection into place:
reflectionView.center = CGPointMake(self.view.frame.size.width/2, mainImageView.frame.size.height*1.5);
Optionally, add a gradient to make the reflection fade away into the
background:
reflectionView.layer.masksToBounds = YES;
// define gradient
CAGradientLayer *theGradient = [CAGradientLayer layer];
theGradient.frame = reflectionView;
theGradient.colors = [NSArray arrayWithObjects:
(id)[[UIColor clearColor] CGColor],
(id)[[UIColor blackColor] CGColor], nil];
// add gradient to reflection image
[reflectionView insertSublayer:theGradient atIndex:0];
reflectionView = 0.25f;
It looks like this:
I'm trying to create a simple iPhone app that displays a picture with a reflection beneath, and I want to rotate the picture around the X axis, using Core Animation.
I've started by creating a new iPhone app using the "View-based Application" template. I added a "Picture.jpg" image file, and then I added this to the view controller:
- (void)awakeFromNib {
CGFloat zDistance = 1500.0f;
// Create perspective transformation
CATransform3D transform = CATransform3DIdentity;
transform.m34 = 1.0f / -zDistance;
// Create perspective transform for reflected layer
CATransform3D reflectedTransform = CATransform3DMakeRotation(M_PI, 1.0f, 0.0f, 0.0f);
reflectedTransform.m34 = 1.0f / -zDistance;
// Create spinning picture
CALayer *spinningLayer = [CALayer layer];
spinningLayer.frame = CGRectMake(60.0f, 60.0f, 200.0f, 300.0f);
spinningLayer.contents = (id)[UIImage imageNamed:#"Picture.jpg"].CGImage;
spinningLayer.transform = transform;
// Create reflection of spinning picture
CALayer *reflectionLayer = [CALayer layer];
reflectionLayer.frame = CGRectMake(60.0f, 360.0f, 200.0f, 300.0f);
reflectionLayer.contents = (id)[UIImage imageNamed:#"Picture.jpg"].CGImage;
reflectionLayer.opacity = 0.4f;
reflectionLayer.transform = reflectedTransform;
// Add layers to the root layer
[self.view.layer addSublayer:spinningLayer];
[self.view.layer insertSublayer:reflectionLayer below:spinningLayer];
// Spin the layers
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
anim.fromValue = [NSNumber numberWithFloat:0.0f];
anim.toValue = [NSNumber numberWithFloat:(2 * M_PI)];
anim.duration = 3.0f;
anim.repeatCount = 1e100f;
[spinningLayer addAnimation:anim forKey:#"anim"];
[reflectionLayer addAnimation:anim forKey:#"anim"];
}
This almost works. The problem is that the spinning of the main picture and of the reflection are not perfectly synchronized. It's very close to perfect, but the edges of the bottom of the picture and of top of the reflection are a few pixels apart. They appear to differ by a few degrees.
On the left side of the screen, the reflection seems to be "ahead" of the picture, and on the right side, the reflection is behind the picture. In other words, it looks like the bottom corners of the top image are pushed toward the screen, while the top corners of the reflection are pulled toward the viewer. This is true both when looking at the front and at the back of the images as they spin.
If I increase zDistance, the effect is less noticeable. If I eliminate the perspective transformations altogether by leaving transform.m34 equal to zero for both layers, then the picture and reflection look to be perfectly synchronized. So I don't think the problem is related to time-synchronization issues.
I suspect my perspective transformations are missing something, but I'm not sure how to determine what's wrong. I think I'm basically doing the same transformation described in this related Stack Overflow question.
Can someone help?
I think I may have found an answer to my question. In my original code, I created the reflection by placing it underneath the picture, and applying the flip and perspective. The right way to do it seems to be to place the reflection at the same position as the picture, apply translation and rotation transforms to get it to the right place, and then apply the perspective transformation.
When animating the spin, it is necessary to spin the reflection in the opposite direction of the picture's animation.
So, here's code that works:
- (void)awakeFromNib {
CGFloat zDistance = 1500.0f;
// Create perspective transformation
CATransform3D transform = CATransform3DIdentity;
transform.m34 = 1.0f / -zDistance;
// Create perspective transform for reflected layer
CATransform3D reflectedTransform = CATransform3DMakeTranslation(0.0f, 300.0f, 0.0f);
reflectedTransform = CATransform3DRotate(reflectedTransform, M_PI, 1.0f, 0.0f, 0.0f);
reflectedTransform.m34 = 1.0f / -zDistance;
// Create spinning picture
CALayer *spinningLayer = [CALayer layer];
spinningLayer.frame = CGRectMake(60.0f, 60.0f, 200.0f, 300.0f);
spinningLayer.contents = (id)[UIImage imageNamed:#"Picture.jpg"].CGImage;
spinningLayer.transform = transform;
// Create reflection of spinning picture
CALayer *reflectionLayer = [CALayer layer];
reflectionLayer.frame = CGRectMake(60.0f, 60.0f, 200.0f, 300.0f);
reflectionLayer.contents = (id)[UIImage imageNamed:#"Picture.jpg"].CGImage;
reflectionLayer.opacity = 0.4f;
reflectionLayer.transform = reflectedTransform;
// Add layers to the root layer
[self.view.layer addSublayer:spinningLayer];
[self.view.layer insertSublayer:reflectionLayer below:spinningLayer];
// Spin the layers
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
anim.fromValue = [NSNumber numberWithFloat:0.0f];
anim.toValue = [NSNumber numberWithFloat:(2 * M_PI)];
anim.duration = 3.0f;
anim.repeatCount = 1e100f;
[spinningLayer addAnimation:anim forKey:#"anim"];
CABasicAnimation *reflectAnim = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
reflectAnim.fromValue = [NSNumber numberWithFloat:0.0f];
reflectAnim.toValue = [NSNumber numberWithFloat:(-2 * M_PI)];
reflectAnim.duration = 3.0f;
reflectAnim.repeatCount = 1e100f;
[reflectionLayer addAnimation:reflectAnim forKey:#"reflectAnim"];
}
I'm not sure exactly why this works. It makes intuitive sense to me that placing the reflection at the same position as the original and then transforming it somehow puts the two images into the same "transformation space", but I'd appreciate it if someone could explain the mathematics behind this.
The full project is available at GitHub: https://github.com/kristopherjohnson/perspectivetest
You can use a CAAnimationGroup object to run two animations on the same time space. That should take care of any synchronization issues.
EDIT: removed silly code.