Wrox Programmer Forums
|
BOOK: Beginning iOS 4 Application Development
This is the forum to discuss the Wrox book Beginning iOS 4 Application Development by Wei-Meng Lee; ISBN: 978-0-470-91802-9
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning iOS 4 Application Development section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old June 6th, 2011, 06:14 PM
Authorized User
 
Join Date: Apr 2011
Posts: 18
Thanks: 2
Thanked 0 Times in 0 Posts
Default Implementing gauge animation

Hello,

This question is outside the scoop of the book, but i post it here cause it's one of my favorite forum on iphone development. I want to develop a gauge (like this on the image) with two buttons that increase and decrease the gauge. Can someone give me an idea on how to start this stuff? Thanks.

http://imageshack.us/photo/my-images...augeimage.png/
 
Old June 7th, 2011, 08:22 AM
Friend of Wrox
 
Join Date: Aug 2010
Posts: 298
Thanks: 1
Thanked 62 Times in 60 Posts
Default

What part is holding you back? The animation/rotation?

You will need 2 UIImageViews, a background image and a overlay. The overlay will need to set its anchor point at the bottom of the image
overlay.layer.anchorpoint = CGPointMake(.5,1.0); //Uses unit coordinate system
http://developer.apple.com/library/m...es/Layers.html

Your action methods (button clicks) will increase or decrease your angle ivar which will apply to
overlay.transform = CGAffineTransformMakeRotation(yourIvar);

http://developer.apple.com/library/i...id/DTS40007434

May give you some ideas on how to deal with the animation.

I have done a simple version similar to your supplied image but using a speedometer. A slider is used to change the angle (speed to which the needle points), if you can't get what you need from these other references, I can make it available.

Bob
 
Old June 7th, 2011, 09:50 AM
Authorized User
 
Join Date: Apr 2011
Posts: 18
Thanks: 2
Thanked 0 Times in 0 Posts
Default

Thanks "thepianoguy" for this reply, ideas and links. I will try to do this using Core animation and your code is welcome . I was thinking about using : CGContext Class and it's methods like : CGContextAddArc and CGContextAddArcToPoint to build my arcs but i'm not sure!

Regards.
 
Old June 7th, 2011, 10:11 AM
Friend of Wrox
 
Join Date: Aug 2010
Posts: 298
Thanks: 1
Thanked 62 Times in 60 Posts
Default

You plan to use the CGContextAddArc and CGContextAddArcToPoint for what? Drawing the background? A graphic image certainly seems simpler.

Bob
 
Old June 7th, 2011, 10:30 AM
Authorized User
 
Join Date: Apr 2011
Posts: 18
Thanks: 2
Thanked 0 Times in 0 Posts
Default

How can i use a graphic image? i need to animate the gauge value changes! is that wrong?

Thanks.
 
Old June 7th, 2011, 10:44 AM
Friend of Wrox
 
Join Date: Aug 2010
Posts: 298
Thanks: 1
Thanked 62 Times in 60 Posts
Default

As I stated in my original reply, based on the image you posted, it appears that you need a background image which is static (empty - full) and an overlay image(foreground) which can animate, the needle that indicates the point between empty and full. The needle can be animated to rotate around its bottom point (anchorpoint). If you check out the link to the metronome project you can see how the graphics are animated in a different context but similar manner to this description.

Bob
The Following User Says Thank You to thepianoguy For This Useful Post:
Yujiin (June 8th, 2011)
 
Old June 7th, 2011, 10:56 AM
Authorized User
 
Join Date: Apr 2011
Posts: 18
Thanks: 2
Thanked 0 Times in 0 Posts
Default

Thanks man, i'm on the code of Metronome example, and i'll give you a feedback :).

Regards.
 
Old June 8th, 2011, 12:00 AM
Authorized User
 
Join Date: Apr 2011
Posts: 18
Thanks: 2
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by thepianoguy View Post
As I stated in my original reply, based on the image you posted, it appears that you need a background image which is static (empty - full) and an overlay image(foreground) which can animate, the needle that indicates the point between empty and full. The needle can be animated to rotate around its bottom point (anchorpoint). If you check out the link to the metronome project you can see how the graphics are animated in a different context but similar manner to this description.

Bob
Thanks Bob for this great idea, really thanks, that's works just fine .

Kind regards.





Similar Threads
Thread Thread Starter Forum Replies Last Post
Text Animation flash2004 Flash (all versions) 2 May 18th, 2005 12:41 AM
Animation Control JelfMaria VB How-To 2 March 14th, 2005 12:11 AM
animation problems chrissy Javascript 1 February 22nd, 2005 12:32 PM
Animation pallone Javascript How-To 9 February 2nd, 2005 03:17 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.