I want to animate the drawing of a path as it is being drawn on the screen I am assuming Core Animation is the best way with a NSBezierPath however I am not sure on how to implement this.
Basically the idea is to have a path from point A to point B slowly being animated from A to B until the path reaches B. A good tutorial on how to do this would be great.
You can create CAShapeLayer with your CGPath (can be created from UIBezierPath for example).
Then path property of CAShapeLayer is animatable itself and you can also create more advanced animations using animatable strokeStart and strokeEnd properties (available starting iOS 4.2)
Simple example of how to add layer with random line that appears with animation:
CAShapeLayer *l = [CAShapeLayer layer];
l.frame = self.view.bounds;
l.strokeColor = [UIColor redColor].CGColor;
CGPoint start = CGPointMake(arc4random()%300+10, arc4random()%400+40);
CGPoint end = CGPointMake(arc4random()%300+10, arc4random()%400+40);
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:start];
[path addLineToPoint:end];
l.path = path.CGPath;
[path release];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:1.0f];
animation.duration = 3.0f;
[l addAnimation:animation forKey:#"myStroke"];
[self.view.layer addSublayer:l];
Related
I have a UIView that draws a circle inside it using the following code:
-(void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, myColor);
CGContextFillEllipseInRest(context, myRect);
}
I want to animate this circle to a grey color... How can I achieve this?
-(void)fadeToGrey {
// What goes here?
}
You should use CAShapeLayer as a layer class and do your drawing inside setLayerProperties: method. drawRect: will not be overridden. Here is my sample code with comments of custom UIView with attaching color animation method.
//Returns the class used to create the layer for instances of this class.
//it is CALayer class by default.
+ (Class)layerClass
{
return [CAShapeLayer class];
}
//Lays out subviews.
- (void)layoutSubviews
{
[self setLayerProperties];
}
- (void)setLayerProperties {
//The view’s Core Animation layer used for rendering.
CAShapeLayer *layer = (CAShapeLayer *)self.layer;
// Color Declarations
UIColor* strokeColor = [UIColor redColor];
// Some sample Bezier Drawing. In my case it is a triangle.
// However, you can draw circle by using `+bezierPathWithRoundedRect:cornerRadius:`
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(0.0, self.frame.size.height)];
[bezierPath addLineToPoint: CGPointMake(self.frame.size.width/2, 0.0)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
[bezierPath addLineToPoint: CGPointMake(0.0, CGRectGetHeight(self.frame))];
bezierPath.miterLimit = 8;
bezierPath.lineJoinStyle = kCGLineJoinBevel;
layer.path = bezierPath.CGPath;
layer.fillColor = strokeColor.CGColor;
}
//here is the magic :)
- (void)attachColorAnimationToColor:(UIColor *)color {
//"fillColor" property of CAShapeLayer's instance is animatable
//(thus we have overridden `layerClass` method btw), that leads us to create
//CABasicAnimation instance with fromValue (initial color), toValue (final color).
CABasicAnimation *animation = [self animationWithKeyPath:#"fillColor"];
animation.fromValue = (__bridge id)(((CAShapeLayer *)self.layer).fillColor);
animation.toValue = (__bridge id)color.CGColor;
[self.layer addAnimation:animation forKey:animation.keyPath];
}
//setting properties of color animation
- (CABasicAnimation *)animationWithKeyPath:(NSString *)keyPath {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:keyPath];
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion=NO;
animation.repeatCount = 1;
animation.duration = 0.3f;
return animation;
}
You will use it by calling attachColorAnimationToColor: like this:
//your custom view declaration
YourView *yourView = [[YourView alloc]initWithFrame:CGRectMake(...)];
[self.view addSubview:yourView];
[yourView attachColorAnimationToColor:[UIColor lightGrayColor]];
CAShape Layer Class Reference to fillColor property
Feel free to ask if something goes wrong.
UPDATE
Our layer fillColor is red. So if you fire animation to redColor, that means that you want animation from 'red' to 'red'. Create method reverse animation, where toValue is our stroke color of shape. (Animation does not update it, it stays red always). Here is sample that was tested now :)
-(void)attachReverseAnimationFromColor:(UIColor*)color{
CABasicAnimation *animation = [self animationWithKeyPath:#"fillColor"];
animation.toValue = (__bridge id)(((CAShapeLayer *)self.layer).fillColor);
animation.fromValue = (__bridge id)color.CGColor;
[self.layer addAnimation:animation forKey:animation.keyPath];
}
PS Happy Coding.
I am developing a small game in iphone... Game concept is place an object in top of the bar...Rotating a bar using accelerometer. When bar rotating , i need to move an object with respect to bar. How to implement this concept...Any examples or references?
Rotating both img:
barImg,objImg //UIImageView
barImg.transform = CGAffineTransformMakeRotation(Ypos);
objImg.transform=CGAffineTransformMakeRotation(Ypos);
So for rotating 360 Degree with animation:
CABasicAnimation *rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:-M_PI * 2.0]; // full rotation*/ * rotations * duration ];
rotationAnimation.duration = 1;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = MAXFLOAT;
[rotatingTelIamgeview.layer addAnimation:rotationAnimation forKey:#"rotationAnimation"];
you can play with toValue for changing the angle.
For moving an object:
CGPoint startPoint = CGPointMake(lvMessageInputBar.animationBubbleImageView.layer.frame.origin.x+lvMessageInputBar.animationBubbleImageView.layer.frame.size.width/2
, lvMessageInputBar.animationBubbleImageView.layer.frame.origin.y +lvMessageInputBar.animationBubbleImageView.layer.frame.size.height/2 );
CGPoint endPoint = CGPointMake(endPoint.origin.x+Endpoint.size.width/2, bubleRect.origin.y+bubleRect.size.height/2);
CGPoint middlePoint = // any point between start and end corrdinates
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, startPoint.x, startPoint.y);
CGPathAddQuadCurveToPoint(path, NULL,middlePoint.x, middlePoint.y,endPoint.x,endPoint.y);
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.delegate = self;
pathAnimation.removedOnCompletion = NO;
pathAnimation.path = path;
[pathAnimation setCalculationMode:kCAAnimationCubic];
[pathAnimation setFillMode:kCAFillModeForwards];
pathAnimation.duration = 0.3;
[lvMessageInputBar.animationBubbleImageView.layer addAnimation:pathAnimation forKey:nil];
The above example moves the layer of the object over a path.but CGPathAddQuadCurveToPoint makes the path not diagonal rather circular path (curve).
you can use CGPathAddPath if you do not want this effect.
If you are new to iPhone I would start with layer tutorial to get the idea behind CALayer and then take a look CALayer animations
CALayers introduction:
https://www.raywenderlich.com/3096-calayers-tutorial-for-ios-introduction-to-calayers
CALayer Animation documentation of from Apple:
https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html
You can also watch Session 424 (Core Animation in Practice, Part 1) and 425 (Core Animation in Practice, Part 2) of WWDC 2010:
https://developer.apple.com/videos/archive/
I'm trying to slide down an image in an UIImageView, but I don't know which combination of UIContentMode and animation property is the right one to make that happen.
The image should always have the same size and should not be streched... all I want is, that nothing is visible first and then the frame extends and reveals the image.
Maybe it's easier if you see what I mean:
So, it sounds rather easy, but what UIContentMode should I use for the UIImageView and what property should I animate? Thank you!
I took your lead and made a screencast as well. Was this what you had in mind?
I put the animation repeating indefinitely so it would be easier to capture with a video, but it can be started at the press of a button, as well as frozen in place, showing the popover and its contents, until reversed to be hidden again.
I used Core Animation for that, instead of animating a UIView, since I wanted to use the mask property of CALayer to hide the popover and reveal it with a sliding animation.
Here is the code I used (same as in the video):
- (void)viewDidLoad
{
// Declaring the popover layer
CALayer *popover = [CALayer layer];
CGFloat popoverHeight = 64.0f;
CGFloat popoverWidth = 200.0f;
popover.frame = CGRectMake(50.0f, 100.0f, popoverWidth, popoverHeight);
popover.contents = (id) [UIImage imageNamed:#"popover.png"].CGImage;
// Declaring the mask layer
CALayer *maskLayer = [CALayer layer];
maskLayer.frame = CGRectMake(0, - popoverHeight, popoverWidth, popoverHeight);
maskLayer.backgroundColor = [UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:1.0f].CGColor;
// Setting the animation (animates the mask layer)
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position.y"];
animation.byValue = [NSNumber numberWithFloat:popoverHeight];
animation.repeatCount = HUGE_VALF;
animation.duration = 2.0f;
[maskLayer addAnimation:animation forKey:#"position.y"];
//Assigning the animated maskLayer to the mask property of your popover
popover.mask = maskLayer;
[self.view.layer addSublayer:popover];
[super viewDidLoad];
}
NOTE: You have to import the QuartzCore framework into your project and write this line in your header file: #import <QuartzCore/QuartzCore.h>.
Tells if this works for you or if you need any more help setting this up.
Try this code.
Consider the UIImageView as imageView.
imageView.contentMode = UIViewContentModeScaleAspectFill;
CGRect imageRect = imageView.frame;
CGRect origImgRect = imageRect;
imageRect.size.height = 5;
imageView.frame = imageRect;
[UIView animateWithDuration:2.0
animations:^{imageView.rect = origImgRect;}
completion:^(BOOL finished){ }];
Can anybody please help me with this problem? I have the nsarray of lines and I need to write them one after the other within some UIView (I want to animate the hand drawing).
Here is the answer (found here : http://soulwithmobiletechnology.blogspot.fr/2012/07/how-to-animate-line-draw.html)
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50.0,0.0)];
[path addLineToPoint:CGPointMake(120.0, 600.0)];
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.view.bounds;
pathLayer.path = path.CGPath;
pathLayer.strokeColor = [[UIColor redColor] CGColor];
pathLayer.fillColor = nil;
pathLayer.lineWidth = 2.0f;
pathLayer.lineJoin = kCALineJoinBevel;
[self.view.layer addSublayer:pathLayer];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
pathAnimation.duration = 2.0;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[pathLayer addAnimation:pathAnimation forKey:#"strokeEnd"];
Do not forget to #import <QuartzCore/QuartzCore.h>.
Some entry points that might help :
Apple documentations: Core Animation, Quartz 2D and Quartz Demo Sample code
Some Core Animation samples
this code animates an object over a set of points. can use same idea for your lines, which i assume are CGPath?
//
// animate along a set of points
//
// NSLog(#"The content of movement1PointsArray is%#",movement1PointsArray);
CGMutablePathRef touchPath1 = CGPathCreateMutable();
CGPoint touchPath1StartPoint = [[movement1PointsArray objectAtIndex:0] CGPointValue];
CGPathMoveToPoint(touchPath1,NULL,touchPath1StartPoint.x, touchPath1StartPoint.y);
for (NSInteger p = 0; p < [movement1PointsArray count]; ++p)
{
CGPoint touchesPointOnPath = [[movement1PointsArray objectAtIndex:p] CGPointValue];
CGPathAddLineToPoint(touchPath1, NULL,touchesPointOnPath.x,touchesPointOnPath.y);
}
CAKeyframeAnimation* touchPathAnimation1 = [CAKeyframeAnimation animationWithKeyPath:#"position"];
[touchPathAnimation1 setDuration: 1.0];
[touchPathAnimation1 setAutoreverses: NO];
touchPathAnimation1.removedOnCompletion = NO;
touchPathAnimation1.fillMode = kCAFillModeForwards;
[touchPathAnimation1 setPath: touchPath1];
CFRelease(touchPath1);
[animationsArray addObject:touchPathAnimation1];
[ball.layer addAnimation: touchPathAnimation1 forKey: #"position"];
i am having trouble getting a second path to animate...regardless of what i try, it only animates the last path.
You probably end up implementing the views drawRect method.
This http://howtomakeiphoneapps.com/2009/08/how-to-draw-shapes-with-core-graphics/
Should get you started
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.