Move CALayer via UIBezierPath - iphone

I have a layer that will move from point A to point B on a UIBezierPath.
I have found a lot of samples those are refers to CAAnimation and UIBezierPath.
But I need to move my layer only from specified point to another on bezier path.
Any suggestions would be appreciated.
Thanks

Hope this will be helpful.
UIBezierPath *trackPath = [UIBezierPath bezierPath];
.
.
.
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:#"position"];
anim.path = trackPath.CGPath;
anim.repeatCount = 1;
anim.duration = 2.0;
[layerToAnimate addAnimation:anim forKey:#"pathGuide"];

If your bezier path is a circle or even a half circle, you could just skip the path and instead add the point to a larger square layer. Set the point to be a fixed distance from the center of that larger square layer. Then you can just rotate the larger layer on the z axis around the center whatever number of degrees you need it to move. Seems it would simplify things a bit, though I'm not sure exactly what else you need it to do.

i'd been looking to do something like this and fount this tutorial, it shows how to follow a specific path. It works with a car (a CALayer) and a UIBezierpath as the race track and is solved in this order:
Defining the path the car should follow (in this case your BezierPath)
Drawing the black line that defines the track; (N/A)
Drawing the white dashed center-line of the track; (N/A)
Creating the layer defining the car; (your Layer)
Animating the car along the path. (What your asked!)
You can check the reference Post here:
http://nachbaur.com/2011/01/07/core-animation-part-4/
Also you can download the source code here:
http://cdn5.nachbaur.com/wp-content/uploads/2011/01/CALayerAnimTest.zip?25881d
hope this helps!
regards,
Jorge.

Related

How to Plot (show) user location on Image? iOS

So here is task i need to get done on iOS:
Show User's Current Location on an Image like this:
Yes, like this Image!
So few things one will notice as soon as one look at it. Its Tilted. It's headings are Off. You can see horizon..!
Lets say,
I have location coordinates for corners of this image.
I have angle at which this image is tilted. (e.g 50°)
I have heading angle of the image. (e.g -170° North, which means its about 10° South-West, correct me if im wrong.)
And i have Zoom level on which this image would have been zoomed if it was on Google Maps/Google Earth. (e.g 14 zoom level - out of 20)
But thats the task, i need to show users location on such images. Just like in "Google Earth".
Can anyone give me heads up to accomplish this task?
Thank you everyone. :)
Given the information you have, sounds like you can use line-plane intersection to solve your problem.
I achieved the desired result by plotting the coordinate on a UIView and transform it using CATrasnform3D. These explanations also help, Explanation of Transformation Matrix in terms of Core Animation and Core Animation Programming Guide itself.
_graphic.transform = CGAffineTransformMakeRotation(-2.89724656);
CATransform3D rotatedTransform = _graphic.layer.transform;
rotatedTransform.m34 = 1.0 / 500;
rotatedTransform.m22 = -2;
rotatedTransform.m41 = 170;
rotatedTransform.m42 = 170;
rotatedTransform =
CATransform3DRotate(rotatedTransform,
51 * M_PI / 180.0f,
1.0f,
0.0f,
0.0f);
_graphic.layer.transform = rotatedTransform;
[_graphic setNeedsDisplay];
Thank you all.

How to fill space between two UIBezierPaths

I'm working on drawing application which provides drawing lines with variable line width which depends on drawing speed. This behavior inspired by Paper app.
Algorithm which I'm trying to implement -- draw two bezier path with variable distance between them. The solution which described in sosborn's answer. Then smooth paths and fill the distance between them.
Actually I don't figured out how to fill space between paths.
You create a single path from the 2 bezier curves and fill it, like this:
NSBezierPath* path = [NSBezierPath bezierPath];
// Move to the start point
[path moveToPoint:startPt];
// Make the lower part of the curve
[path curveToPoint:endPt controlPoint1:cp1 controlPoint2:cp2];
// Make the upper part of the curve as part of the same path:
[path curveToPoint:startPt contorPoint1:cp3 controlPoint2:cp4];
// Now fill it
[path fill];

Arc's position on circle

I've got few pixels wide circle (circle is UIBezierPath based). I have to put an arc (which is basically UIView subclass with custom drawing) on the circle so the arc covers circle. I know how to calculate rotation of arc and position but something is not right. I mean I know the reason - it's beacause center property which is assigned to center of UIView, if it was center of the arc, everything would be great. But it's not.
I also know how to solve that. I have to calculate smaller radius where I will put arcs on. But how to do that. Basically it seems easy but because of the arc is in rectangular UIView it gets a bit harder. I'll show you some images so you can see the problem.
The easiest way to do this is to change the anchor point of each arc view's layer. You can read about the anchor point here if you don't already know about it.
You will need to add the QuartzCore framework to your build target and add #import <QuartzCore/QuartzCore.h>.
CGRect circleBounds = circleView.bounds;
topArcView.layer.anchorPoint = CGPointMake(.5, 0);
topArcView.layer.position = CGPointMake(CGRectGetMidX(circleBounds), 0);
bottomArcView.layer.anchorPoint = CGPointMake(.5, 1);
bottomArcView.layer.position = CGPointMake(CGRectGetMidX(circleBounds), CGRectGetMaxY(circleBounds));
leftArcView.layer.anchorPoint = CGPointMake(0, .5);
leftArcView.layer.position = CGPointMake(circleBounds.origin.x, CGRectGetMidY(circleBounds));
rightArcView.layer.anchorPoint = CGPointMake(1, .5);
rightArcView.layer.position = CGPointMake(CGRectGetMaxX(circleBounds), CGRectGetMidY(circleBounds));
Perhaps you could make the UIView subclass the same size and center point as the circle's rect. Then draw the arc in the correct location.

Transforming UIImage in Circular Motion without changing angle + Cocoa

I want to transform/rotate an UIImage in circular motion without changing the angle of the image. Following diagram explains the requirement.
How this can be done using UIView transform property. Thanks in advance.
Sounds to me like you only need to use the UIView frame property. However, because you are taking a non-linear path between your source and destination you will likely have to dabble with CoreAnimation.
Check out CAKeyFrameAnimation to animate a property through an arbitrary key path.
Good Luck!
My book provides sample code for animating an image along a path:
http://www.apeth.com/iOSBook/ch17.html#FIGnancyBell
CGMutablePathRef path = CGPathCreateMutable();
// ... define the path using CGPath... functions ...
CAKeyframeAnimation* anim1 = [CAKeyframeAnimation animationWithKeyPath:#"position"];
anim1.path = path;

Slice a UIImageView into a custom shape

I have a UIImageView that contains an image of a circle. I would like to be able to remove a portion of the image (while maintaining the transparency) to create the effect of a slice missing as shown below. My ultimate goal is to create something like the ITunes app, where as you play a song preview, the circle slowly fills in, in a clockwise direction.
If you don't need the image of the circle for anything other than the progress display, you could skip the UIImageView and just use CoreGraphics to draw the progress indicator. The basic steps would be:
Create a path - CGContextBeginPath
Add an arc using CGContextAddArc
Fill the path using CGContextFillPath
Close the path - CGContextClosePath
Repeat this for each progress step, changing the endpoint of your arc each time.
I've implemented a similar filling-up circle with the following code:
(the delegate provides a value between 0 and 1)
- (void)drawRect:(CGRect)rect
{
CGFloat endAngle=([self.delegate giveCompletion]+0.75)*2*M_PI;
UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:self.center radius:self.bounds.size.width/(3) startAngle:0.75*2*M_PI endAngle:endAngle clockwise:YES];
[path addLineToPoint:self.center];
[path addLineToPoint:CGPointMake(self.center.x, self.center.y+self.bounds.size.width/(3)) ];
[path addClip];
[[UIColor blueColor]setFill];
UIRectFill(self.bounds);
}
I haven't figured out how to dynamically make it fill up yet, though I guess that this would depend heavily on the specific context where it is being used. Hope it is of any help! Cheers.