17 Oct 2008, 15:37
Generic-user-small

Mike Carter (17 posts)

I started some quartz drawing and wanted to do an outer glow on a simple shape, I have a circle and want the edges to glow.

After some searching it looks like there are two options:

1) Draw the shape over and over and changing the alpha.

2) Draw into a layer and apply a filer, it’s unclear is this even works on the iphone.

Any guidance would be greatly appreciated.

Thanks,

Mike

17 Oct 2008, 16:03
Biopic_100x100_pragsmall

Bill Dudney (917 posts)

Hi Mike,

Unfortunately the filter approach does not work on iPhone.

An approach i have used successfully.

3 layers - container - large enough to hold glow - shape - the shape - glow - draw the shape larger (slightly) an much more transparent and a much lighter color (tending yellow)

put the shape layer over the glow layer and make their positions the same, if you move anything make sure to move the container.

HTH

17 Oct 2008, 16:04
Biopic_100x100_pragsmall

Bill Dudney (917 posts)

Hi Mike,

Unfortunately the filter approach does not work on iPhone.

An approach i have used successfully.

3 layers - container - large enough to hold glow - shape - the shape - glow - draw the shape larger (slightly) an much more transparent and a much lighter color (tending yellow)

put the shape layer over the glow layer and make their positions the same, if you move anything make sure to move the container.

HTH

17 Oct 2008, 17:04
Generic-user-small

Mike Carter (17 posts)

Bill,

Thanks for the fast reply…

I will try what you suggested, I am just getting started with quartz but the drawing the circle 5 times with varying alphas worked great, nice effect.

Essentially these are gauges and I wonder if a better approach is to draw in illustrator or photoshop and chop up then animate by swapping images.

I have one more question, do you have a link to some of the math or math libraries, I am good at math, but don’t want to reinvent the wheel if I don’t have to. My circle is a gauge so I need to get points to draw triangles around the circles.

Thanks,

Mike

17 Oct 2008, 19:25
Biopic_100x100_pragsmall

Bill Dudney (917 posts)

Hi Mike,

Sorry I don’t have any pointers for math only libs. Bullet physics has some nice stuff in it and I’ve heard porting to iPhone is a snap. But its probably way overkill for what it sounds like you need.

23 Feb 2009, 04:23
08fb87e_pragsmall

Tom H (8 posts)

Hi Bill

I’m hopeful that the approach you describe above can be used to make a UILabel glow but I’ve had some difficulty implementing. I have the code below in a method that responds to a simple button touch up inside. Nothing happens when the button is touched . . .

Any insight you (or anyone else) can provide is greatly appreciated.

Thanks for a great book – it has been incredibly useful.

tom

theGlow = [CALayer layer];

[theGlow setBounds: CGRectMake(0.0f, 0.0f, [theLabel frame].size.width*1.1f, [theLabel frame].size.height*1.1f)];

[theGlow setPosition: CGPointMake([theLabel frame].origin.x, [theLabel frame].origin.y)];

[theGlow setOpacity:0.5f];

[theGlow setBackgroundColor:[[UIColor redColor] CGColor]];

[theGlow display];

[[theLabel layer] addSublayer:theGlow];

fwiw, theLabel is UILabel and theGlow is CALayer

23 Feb 2009, 13:40
Biopic_100x100_pragsmall

Bill Dudney (917 posts)

Hi Tom,

I am not 100% sure but I think the reason its not working is that the UILable is likely clipping its sublayers.

Also adding a sublayer to a UIView’s layer is not typically a good idea. Achieve the same effect with views instead of layers.

  • a container view large enough to hold the glow
  • a glow view that you can switch off and on
  • the UILabel

add the glow then the label to the container layer in that order.

Then it should work.

Good luck and please let us know when you get it working.

23 Feb 2009, 20:11
08fb87e_pragsmall

Tom H (8 posts)

Thanks Bill – I’ve taken your advice and built the effect I was looking for. Not quite as elegant as I’d hoped, but it will suffice.

In the end, I created a label (theLabel) with a clearColor background and an array of 5 UIViews (theGlow). The 5 UIViews are centered behind the label and their frames are progressively larger (starting at approx 50% the size of the label’s frame). All of the UIViews have their alpha set to 0.0f

The label and the 5 UIViews are added into a yet another UIView (theContainer) to make it easy to position the whole thing as one unit.

- (void)viewDidLoad {
    [super viewDidLoad];
	
	theContainer = [[UIView alloc] initWithFrame:CGRectMake(20.0f, 20.0f, 250.0f, 100.0f)];
	[theContainer setBackgroundColor:[UIColor clearColor]];

	theLabel = [[UILabel alloc] initWithFrame:CGRectMake(10.0f, 10.0f, 120.0f, 16.0f)];
	[theLabel setBackgroundColor:[UIColor clearColor]];
	[theLabel setTextAlignment:UITextAlignmentCenter];
	[theLabel setText:@"Hello World"];
	
	float red = 0xff/0xff; float green = 0xff/0xff; float blue = 0x66/0xff;
	
	UIColor *glowColor = [UIColor colorWithRed:red green:green blue:blue alpha:0.8];
	float offset = 6.0f; float delta = 3.0f;
	
	for(int i=0;i<5;i++) {
		theGlow[i] = [[UIView alloc] initWithFrame:CGRectInset([theLabel frame], offset, offset)];
		[theGlow[i] setBackgroundColor:glowColor];
		[theGlow[i] setAlpha:0.0];
		[theContainer addSubview:theGlow[i]];
		offset -= delta;
	}
	
	[theContainer addSubview:theLabel];
	
	[[self view] addSubview:theContainer];

}

When I want to turn on the glow, I’ve animated a change in alpha in each of the views. The alpha value of the innermost UIView is 0.5 and the alphas of the other UIViews are progressively smaller.

- (IBAction) buttonPress:(id) sender {
	[UIView beginAnimations:@"glow" context:nil];
	[UIView setAnimationDuration:0.25f];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDidStopSelector:@selector(animationDidStop)];
	[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
	
	for(int i=0; i<5; i++) {
		[theGlow[i] setAlpha:(0.5f - i*0.1f)];
	}
	
	[UIView commitAnimations];
}

- (void)animationDidStop {
	[UIView beginAnimations:@"glow" context:nil];
	[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
	[UIView setAnimationDuration:0.1f];
	for(int i=0;i<5;i++) {
		[theGlow[i] setAlpha:0.0f];
	}
	[UIView commitAnimations];
}

One final question about animating UIViews on the iPhone – is there a means by which the animation can be removed at the end of the animation? I’d initially had the animationRepeatCount:1 and animationRepeatAutoreverses:YES. This worked fine for turning the glow on and then off, but at the end of the animation, the alpha values on the UIViews go back to their non-zero value. As you can see from the code above, I’ve worked around this by not autoreversing and adding a delegate method that animates the glow in reverse.

Or perhaps I’m overlooking a more elegant way to go about animating the effect?

Thanks again for your insight and advice!

tom

09 Mar 2009, 12:44
Biopic_100x100_pragsmall

Bill Dudney (917 posts)

Hi Tom,

Sorry to be so late getting back to you!

I don’t know of a way to do what you are asking on UIView’s. With layers you can have the animation stay ‘attached’ after it finishes, perhaps you could do the same if you apply custom animations.

Good luck!

  You must be logged in to comment