I have some UIView with drawrect code for drawing pie:
- (void)drawRect:(CGRect)rect
{
CGRect parentViewBounds = self.bounds;
CGFloat x = CGRectGetWidth(parentViewBounds)/2;
CGFloat y = CGRectGetHeight(parentViewBounds)/2;
// Get the graphics context and clear it
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextClearRect(ctx, rect);
// define line width
CGContextSetLineWidth(ctx, 4.0);
CGContextSetFillColor(ctx, CGColorGetComponents( [someColor CGColor]));
CGContextMoveToPoint(ctx, x, y);
CGContextAddArc(ctx, x, y, 100, radians(270), radians(270), 0); // 27
CGContextClosePath(ctx);
CGContextFillPath(ctx);
}
But when I try to animate "endAngle" property after drawing, it doesn't work:
CABasicAnimation *theAnimation;
theAnimation=[CABasicAnimation animationWithKeyPath:#"endAngle"];
theAnimation.duration=1;
theAnimation.repeatCount=1;
theAnimation.autoreverses=NO;
theAnimation.fromValue=[NSNumber numberWithFloat:270];
theAnimation.toValue=[NSNumber numberWithFloat:60];
[[self.layer presentationLayer] addAnimation:theAnimation forKey:#"animateLayer"];
Where I'm making a mistake?
If you want to make an animation then you should look into using Core Animation for the drawing. It makes animation much simpler.
Have a look at this great tutorial on making a custom animatable pie chart with Core Animation. I'm sure that you can modify it to get what you want.
If it seems to complicated to you then you can have a look at my answer to "Draw part of a circle" which draws a pie chart shape by making a very wide stroke of a circle.
Several things. You can't use a CAAnimation to animate drawing that you do in a drawRect method like that.
Second, if you did use a CAShapeLayer, you could animate changes to the path that's installed in the layer, but you need to make sure that the path has the same number and type of control points for all steps in the animation.
CGPath arc commands use different numbers of control points to draw different angles. Thus, you can't change the angle of the arc and animate it.
What you have to do is to install a path that's the full length of your arc, and then animate changes to the shape layer's strokeStart and/or strokeEnd properties. Those properties cause the path to omit the first part/last part of the path from the drawing. I daresay the tutorial David linked to on the animatable pie chart uses that technique.
Related
I have a shadow image that I would like to draw around the outer edge of a grouped UITableView section. This is the image:
I can get the UIBezierPath that represents the rect I want to draw around, but I can't figure out how to repeat the image along the route of the rect. So far it just fills the rect with the image:
UIImage *patternImg = [UIImage imageNamed:#"cellShadow"];
UIColor *fill = [UIColor colorWithPatternImage:patternImg];
[fill setFill];
CGRect aSectRect = [self rectForSection:0];
UIBezierPath *aSectPath = [self createRoundedPath:aSectRect];
[aSectPath fill];
Is this possible? What do I need to do?
Unfortunately, there's no way to have UIBezierPath use an image as a "brush" which is essentially what you'd want. But you can have CoreGraphics draw a shadow for you:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetShadow(context, CGSizeZero, myShadowRadius);
// Draw your shape here
Now if you draw just one shape it will get a shadow. But if you draw more shapes, each will get its own shadow which might not be what you want. The solution is called a transparency layer, which is not related to CALayers or something but is just some kind of "grouping" in CoreGraphics:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetShadow(context, CGSizeZero, myShadowRadius);
CGContextBeginTransparencyLayer(context, NULL);
// Draw your shapes here.
CGContextEndTransparencyLayer(context);
Between the CGContextBeginTransparencyLayer and CGContextEndTransparencyLayer calls the shadow is disabled. After the CGContextEndTransparencyLayer call, the shadow is applied to everything that has been drawn between begin and end as if it were just one shape.
I have a simple custom UIView (a rectangle) that is implemented with drawRect.
The view is drawn from two values; currentValue and maxValue
From drawRect:
The height of the rect represents how much currentValue is of maxValue:
if(currentValue > maxValue)
currentValue = maxValue;
float scale = currentValue/maxValue;
//Draw the rect
CGContextBeginPath(context);
CGContextMoveToPoint(context, self.bounds.origin.x, self.bounds.size.height);
CGContextAddLineToPoint(context, self.bounds.size.width, self.bounds.size.height);
CGContextAddLineToPoint(context, self.bounds.size.width, self.bounds.size.height-(self.bounds.size.height*scale));
CGContextAddLineToPoint(context, self.bounds.origin.x, self.bounds.size.height-(self.bounds.size.height*scale));
CGContextClosePath(context);
CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextFillPath(context);
CGContextStrokePath(context);
I've setup a ViewController with a UISlider that changes the currentValue and each time it's changed setNeedsDisplay gets called. This part works just fine. The rect changes height when the slider is used, exactly as planned.
My question is.. I would like this transition between heights to be animated. What's the best way to do it?
Thanks
Instead of having UIView with custom drawing your can add CAShapeLayer object to your view's layer. CAShapeLayer class allows to specify path to draw and draw attributes - and also changes for those properties are easily animatable.
If your view is just a rect filled with solid color as in question your second option is either adjust view's frame or set appropriate affine transform to get required heights - both those properties are also easily animatable using animation methods in UIView class.
If you really just want a simple shape that can be drawn by a Core Animation layer (like CAShapeLayer or CAGradientLayer), you should just use a Core Animation layer and a CABasicAnimation to animate the layer's frame.
If you plan to draw something more complex, and you want to animate changes to the shape, then you need to do more work. You need to give your object properties or instance variables to store the current and final values, and maybe to store the velocity of the value. You need to create a CADisplayLink object and use it to drive calls to your animation method. Your animation method should update the current value based on how much time has passed and then call setNeedsDisplay.
You'll probably want to do this with Core Animation. The relevant docs are on Apple's developer site. There is also a good source of links on Core Animation with iOS on this other SO question.
I'm drawing several circles within my view by means of the drawRect function.
I'd like to have my circles pop up (scale to 1.2 -> scale to 1.0)
I've used coreanimation in the past but using OpenGL takes different functions.
Here's a snippit of my code which draws a circle in my view:
//calling draw function
CGContextRef contextRef = UIGraphicsGetCurrentContext();
//setting a specific fill color
CGContextSetRGBFillColor(contextRef, 0.0, 255.0, 0.0, 1.0);
//drawing the circle with a specific height, weight and x,y location
CGContextFillEllipseInRect(contextRef, CGRectMake(30 ,30, 20,20));
How can I animate this circle that it 'pops up'.
"Pops up" is not telling me that much.
if you want it to go from small to big modify width and height of rect.use a global int variable
I'v got this piece of code :
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGFloat colors[] = {
1.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
};
CGGradientRef gradientRef = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors) / (sizeof(colors[0]) * 4));
CGColorSpaceRelease(rgb);
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect rect = theCell.backgroundView.bounds;
CGPoint start = CGPointMake(rect.origin.x, 0);
CGPoint end = CGPointMake(rect.origin.x, rect.size.height/2);
CGContextDrawLinearGradient(context, gradientRef, start, end, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
And I wonder how I can make it draw into a designated view and a clipping rect passed in parameters to my function. Tip: I don't mind about drawRect, I'm not subclassing anything.
Tip 2: I don't want to insert any layers that I won't be able to remove later.
Tip 3: This piece of code does not draw anything that my eyes could see..... :-( Missing a graphic port ?
Tip 4: I'd like to erase the draw simply changing the background color, and it's done...
CGContextRef context = UIGraphicsGetCurrentContext(); will get the graphics context for the current view, so if you call this in the drawRect: method of a UIView it will draw.
I don't understand what you mean by:
I don't mind about drawRect, I'm not
subclassing anything
but if you want to do custom drawing you must either override the drawRect: method or use layers. To use layers you would call CGContextRef context = CGLayerGetContext(theLayer); instead of CGContextRef context = UIGraphicsGetCurrentContext();.
Ok, so I looked at the documentation and it says that you can get a CGContextRef by calling UIGraphicsGetCurrentContext() from the drawRectMethod. Here's what it says: In an iOS application, you set up a UIView object to draw to and implement the drawRect: method to perform drawing. Before calling your custom drawRect: method, the view object automatically configures its drawing environment so that your code can start drawing immediately. As part of this configuration, the UIView object creates a graphics context (a CGContextRef opaque type) for the current drawing environment. You obtain this graphics context by calling the UIKit function UIGraphicsGetCurrentContext. You save and restore graphics contexts using the functions UIGraphicsPushContext and UIGraphicsPopContext.
You can create custom graphics context objects in situations where you want to draw somewhere other than your view. For example, you may want to capture a series of drawing commands and use them to create an image or a PDF file. To create the context, you use the CGBitmapContextCreate or CGPDFContextCreate function. After you have the context, you can pass it to the drawing functions needed to create your content.
When creating custom contexts, the coordinate system for those contexts is different from the native coordinate system used by iOS. Instead of the origin being in the upper-left corner of the drawing surface, it is in the lower-left corner and the axes point up and to the right. The coordinates you specify in your drawing commands must take this into consideration or the resulting image or PDF file may appear wrong when rendered. See “Creating a Bitmap Graphics Context” and “Creating a PDF Graphics Context” for details on using CGBitmapContextCreate and CGPDFContextCreate.
Might I recommend you look into the CAGradientLayer, and add it as a sublayer of your view? Lots simpler, and it will be hardware accelerated which matters for table cells.
Example stolen partly from here:
http://tumbljack.com/post/188089679/gpu-accelerated-awesomeness-with-cagradientlayer
#import <QuartzCore/QuartzCore.h> // Also import this framework
......
CAGradientLayer grad = [CAGradientLayer layer];
UIColor *colorOne = [UIColor colorWithHRed:1.0f Green:1.0f Blue:1.0f alpha:1.0f];
UIColor *colorTwo = [UIColor colorWithHRed:0.0f Green:0.0f Blue:0.0f alpha:1.0f];
NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];
grad.colors = colors;
CGRect rect = theCell.backgroundView.bounds;
rect.size.height = rect.size.height / 2;
grad.frame = rect;
[self.layer addsublayer:grad]
You may have to play with the colors a bit, not sure if you had the gradient tilted or not...
I approaching core animation and drawing empirically.
I am trying to animate a simple shape; the shape in question is formed by 3 lines plus a bezier curve. A red line is also drawn, to show the curve control points.
alt text http://img.skitch.com/20091119-1ufar435jdq7nwh8pid5cb6kmm.jpg
My main controller simply adds this subview and calls the adjustWave method whenever touchesEnd.
Here is the code for my shape drawing class. As you see the class has one property, cp1x (the x of the bezier control point 1). This is the value I would like to animate. Mind, this is a dumb attempt ...
- (void)drawRect:(CGRect)rect {
float cp1y = 230.0f;
float cp2x = 100.0f;
float cp2y = 120.0f;
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextClearRect(ctx, rect);
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 10.0f, 200.0f);
CGPathAddCurveToPoint (path, NULL, cp1x, cp1y, cp2x, cp2y, 300.0f, 200.0f);
CGPathAddLineToPoint(path, NULL, 300.0f, 300.0f);
CGPathAddLineToPoint(path, NULL, 10.0f, 300.0f);
CGPathCloseSubpath(path);
CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);
CGContextAddPath(ctx, path);
CGContextFillPath(ctx);
// Drawing a line from control points 1 and 2
CGContextBeginPath(ctx);
CGContextSetRGBStrokeColor(ctx,1,0,0,1);
CGMutablePathRef cp1 = CGPathCreateMutable();
CGPathMoveToPoint(cp1, NULL, cp1x, cp1y);
CGPathAddLineToPoint(cp1, NULL, cp2x, cp2y);
CGPathCloseSubpath(cp1);
CGContextAddPath(ctx, cp1);
CGContextStrokePath(ctx);
}
- (void)adjustWave {
[UIView beginAnimations:#"movement" context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:#selector(didStart:context:)];
[UIView setAnimationDidStopSelector:#selector(didStop:finished:context:)];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:3.0f];
[UIView setAnimationRepeatCount:3];
[UIView setAnimationRepeatAutoreverses:YES];
cp1x = cp1x + 20.0f;
[UIView commitAnimations];
}
The shape doesn't change. If, conversely, I take out the CA code and add a simple `[self setNeedsDisplay] in the last method the shape changes, but obviously without CA.
Can you help sme? I am sure I am making a very basic mistake here…
Thanks in advance,
Davide
If you are writing this for iPhone OS 3.x (or Snow Leopard), the new CAShapeLayer class should let you do this kind of animation pretty easily. If you have a path that maintains the same number of control points (like in your case), you can set that path to the CAShapeLayer, then animate the path property from that starting value to your final path. Core Animation will perform the appropriate interpolation of the control points in the path to animate it between those two states (more, if you use a CAKeyframeAnimation).
Note that this is a layer, so you will need to add it as a sublayer of your UIView. Also, I don't believe that the path property implicitly animates, so you may need to manually create a CABasicAnimation to animate the change in shape from path 1 to path 2.
EDIT (11/21/2009): Joe Ricioppo has a nice writeup about CAShapeLayer here, including some videos that show off these kinds of animations.
You won't be able to animate your shape with CA. You can only animate layer properties in CA, not custom properties.
CA can be fast because it doesn't have to call back to your code to perform animations, if you think about how it is implemented, it basically is just a thread running GL primitives operations with CALayer frames and contents.
CA animations are sets of instructions for CA to run on its background thread, fire and forget (plus callback at animation completion), not callbacks to your code.
Animating the contents of a layer would require CA to call you back to draw at each frame, or to let you instruct CA about how to draw. Neither of those happen.