Making Things Move
           on the iPhone
                             Keith Peters
                           www.bit-1...
www.bit-101.com/
                               360iDev/
                            presentation.zip


Wednesday, March 4...
CoreAnimation



Wednesday, March 4, 2009
Background



Wednesday, March 4, 2009
Background
                           2005




Wednesday, March 4, 2009
Background
                           2005
                                     2007



Wednesday, March 4, 2009
Background
                           2005
                                     2007
                                     ...
Wednesday, March 4, 2009
Wednesday, March 4, 2009
Wednesday, March 4, 2009
What is Animation?



Wednesday, March 4, 2009
Wednesday, March 4, 2009
Wednesday, March 4, 2009
Coded Animation




Wednesday, March 4, 2009
Coded Animation
                                Apply a
                                 rule




Wednesday, March 4, 2009
Coded Animation
                                Apply a
                                 rule




                        ...
Coded Animation
                                Apply a
                                 rule




                    Upda...
Coded Animation
                                Apply a
                                 rule




                    Upda...
Make something
                          to move


Wednesday, March 4, 2009
Make something
                          to move


Wednesday, March 4, 2009
Make something
                          to move

                           (project files: Animation101)


Wednesday, Mar...
// interface
  UIImageView *ball;




  // viewDidLoad
  ball = [[UIImageView alloc] initWithImage:
            [UIImage i...
NSTimer




Wednesday, March 4, 2009
NSTimer
  [NSTimer
     scheduledTimerWithTimeInterval:1.0/60.0
     target:self
     selector:@selector(onTimer)
     use...
Moving UIViews




Wednesday, March 4, 2009
Moving UIViews

                   • view.center




Wednesday, March 4, 2009
Moving UIViews

                   • view.center
                   • view.transform



Wednesday, March 4, 2009
Moving UIViews

                   • view.center
                   • view.transform
                   • view.frame


Wed...
// interface
     float x;
     float y;



                           // viewDidLoad
                           x = 50.0;...
ball.center = CGPointMake(x, y);
  x += 2.0;
  y += 3.0;




Wednesday, March 4, 2009
ball.frame = CGRectMake(x, y, width, height);
  x += 2.0;
  y += 3.0;




Wednesday, March 4, 2009
ball.transform =
      CGAffineTransformMakeTranslation(x, y);
  x += 2.0;
  y += 3.0;




Wednesday, March 4, 2009
ball.transform =
      CGAffineTransformTranslate(
          ball.transform, 2.0, 3.0);




Wednesday, March 4, 2009
Which is fastest?




Wednesday, March 4, 2009
Which is fastest?

                   • view.center




Wednesday, March 4, 2009
Which is fastest?

                   • view.center
                   • view.transform (~2-3x)



Wednesday, March 4, 2009
Which is fastest?

                   • view.center
                   • view.transform (~2-3x)
                   • view....
Velocity




                           (project files:Velocity)

Wednesday, March 4, 2009
Velocity


                               +
                           (project files:Velocity)

Wednesday, March 4, 2009
speed
                              and
                           direction




Wednesday, March 4, 2009
speed
                              and
                           direction
                                            y...
- y velocity



                           - x velocity          + x velocity




                                        ...
Wednesday, March 4, 2009
// interface:
  float vx;
  float vy;




Wednesday, March 4, 2009
// interface:
  float vx;
  float vy;


                    // viewDidLoad:
                    vx = 2.0;
                ...
// interface:
  float vx;
  float vy;


                    // viewDidLoad:
                    vx = 2.0;
                ...
speed




                             angle


                           (project files: AngularVelocity)

Wednesday, Marc...
y velocity
                                     speed                    =
                                               ...
Wednesday, March 4, 2009
// interface:
  float angle;
  float speed;




Wednesday, March 4, 2009
// interface:            // viewDidLoad:
  float angle;             angle = 45.0;
  float speed;             speed = 4.0;
...
// interface:            // viewDidLoad:
  float angle;             angle = 45.0;
  float speed;             speed = 4.0;
...
Acceleration




                           (project files: Acceleration)

Wednesday, March 4, 2009
Acceleration


                                 +
                           (project files: Acceleration)

Wednesday, Marc...
Wednesday, March 4, 2009
// interface:
  float ax;
  float ay;




Wednesday, March 4, 2009
// interface:            // viewDidLoad:
  float ax;                ax = 0.07;
  float ay;                ay = 0.1;




We...
// interface:                             // viewDidLoad:
  float ax;                                 ax = 0.07;
  float a...
Bouncing




                           (project files: Bouncing)

Wednesday, March 4, 2009
Wednesday, March 4, 2009
-x velocity y velocity




                                         y velocity
                            x velocity


We...
Wednesday, March 4, 2009
// interface:
              float bounce;




Wednesday, March 4, 2009
// interface:
              float bounce;




                              // viewDidLoad:
                              ...
ball.center = CGPointMake(x, y);
  x += vx;
  y += vy;
  if(x > 300)	 	 	  // 320 - radius (20)
  {
  	 x = 300;
  	 vx *=...
if(y > 440)	 	 // 460 - radius
              	
  {
  	 y = 440;
  	 vy *= bounce;
  }
  else if(y < 20)	 	 // 0 + radius
 ...
Gravity



                               acceleration
                                   (+y)



Wednesday, March 4, 2009
Wednesday, March 4, 2009
// interface:
     float gravity;




Wednesday, March 4, 2009
// interface:
     float gravity;



                           // viewDidLoad:
                           gravity = 0.5;
...
// interface:
     float gravity;



                           // viewDidLoad:
                           gravity = 0.5;
...
Wednesday, March 4, 2009
acceleration.y



                           acceleration.x



Wednesday, March 4, 2009
@interface GravityViewController :
  UIViewController <UIAccelerometerDelegate>
  {
  	 UIImageView *ball;
  	 float x;
  ...
Wednesday, March 4, 2009
// viewDidLoad
  gravity = CGPointZero;
  [[UIAccelerometer sharedAccelerometer]
      setDelegate:self];




Wednesday, M...
// viewDidLoad
  gravity = CGPointZero;
  [[UIAccelerometer sharedAccelerometer]
      setDelegate:self];

  - (void)accel...
// viewDidLoad
  gravity = CGPointZero;
  [[UIAccelerometer sharedAccelerometer]
      setDelegate:self];

  - (void)accel...
Do we still have time?



Wednesday, March 4, 2009
Dragging and Throwing



Wednesday, March 4, 2009
Wednesday, March 4, 2009
// interface
    BOOL dragging;




Wednesday, March 4, 2009
// interface           // viewDidLoad
    BOOL dragging;         dragging = NO;




Wednesday, March 4, 2009
// interface                         // viewDidLoad
    BOOL dragging;                       dragging = NO;



           ...
- (void)touchesBegan:(NSSet *)touches
          withEvent:(UIEvent *)event
  {
  	 UITouch *touch = [touches anyObject];
 ...
- (void)touchesEnded:(NSSet *)touches
          withEvent:(UIEvent *)event
  {
  	 dragging = NO;
  }




Wednesday, March...
- (void)touchesMoved:(NSSet *)touches
          withEvent:(UIEvent *)event
  {
  	 if(dragging)
  	{
  		    UITouch *touc...
Thank you
                   • Keith Peters
                   • kp@bit-101.com
                   • www.bit-101.com
     ...
Upcoming SlideShare
Loading in...5
×

Making things Move on the iPhone

3,727

Published on

Keith Peters - "Making things Move on the iPhone", 360|iDev San Jose '09

Published in: Technology, News & Politics
2 Comments
3 Likes
Statistics
Notes
  • I saw Keith give this presentation at 360iDev, and it was great. My natural tendency is often to look for libraries that help me solve seemingly tricky problems, but Keith demonstrates that it is surprisingly easy to implement basic animation, physics, and even use touch and acceleration input.

    Highly recommended!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Excelente!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,727
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
98
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Making things Move on the iPhone

  1. 1. Making Things Move on the iPhone Keith Peters www.bit-101.com Wednesday, March 4, 2009
  2. 2. www.bit-101.com/ 360iDev/ presentation.zip Wednesday, March 4, 2009
  3. 3. CoreAnimation Wednesday, March 4, 2009
  4. 4. Background Wednesday, March 4, 2009
  5. 5. Background 2005 Wednesday, March 4, 2009
  6. 6. Background 2005 2007 Wednesday, March 4, 2009
  7. 7. Background 2005 2007 2008 Wednesday, March 4, 2009
  8. 8. Wednesday, March 4, 2009
  9. 9. Wednesday, March 4, 2009
  10. 10. Wednesday, March 4, 2009
  11. 11. What is Animation? Wednesday, March 4, 2009
  12. 12. Wednesday, March 4, 2009
  13. 13. Wednesday, March 4, 2009
  14. 14. Coded Animation Wednesday, March 4, 2009
  15. 15. Coded Animation Apply a rule Wednesday, March 4, 2009
  16. 16. Coded Animation Apply a rule Change something Wednesday, March 4, 2009
  17. 17. Coded Animation Apply a rule Update Change the screen something Wednesday, March 4, 2009
  18. 18. Coded Animation Apply a rule Update Change the screen something Wednesday, March 4, 2009
  19. 19. Make something to move Wednesday, March 4, 2009
  20. 20. Make something to move Wednesday, March 4, 2009
  21. 21. Make something to move (project files: Animation101) Wednesday, March 4, 2009
  22. 22. // interface UIImageView *ball; // viewDidLoad ball = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@quot;ball.pngquot;]]; [self.view addSubview:ball]; Wednesday, March 4, 2009
  23. 23. NSTimer Wednesday, March 4, 2009
  24. 24. NSTimer [NSTimer scheduledTimerWithTimeInterval:1.0/60.0 target:self selector:@selector(onTimer) userInfo:nil repeats:YES]; Wednesday, March 4, 2009
  25. 25. Moving UIViews Wednesday, March 4, 2009
  26. 26. Moving UIViews • view.center Wednesday, March 4, 2009
  27. 27. Moving UIViews • view.center • view.transform Wednesday, March 4, 2009
  28. 28. Moving UIViews • view.center • view.transform • view.frame Wednesday, March 4, 2009
  29. 29. // interface float x; float y; // viewDidLoad x = 50.0; y = 50.0; Wednesday, March 4, 2009
  30. 30. ball.center = CGPointMake(x, y); x += 2.0; y += 3.0; Wednesday, March 4, 2009
  31. 31. ball.frame = CGRectMake(x, y, width, height); x += 2.0; y += 3.0; Wednesday, March 4, 2009
  32. 32. ball.transform = CGAffineTransformMakeTranslation(x, y); x += 2.0; y += 3.0; Wednesday, March 4, 2009
  33. 33. ball.transform = CGAffineTransformTranslate( ball.transform, 2.0, 3.0); Wednesday, March 4, 2009
  34. 34. Which is fastest? Wednesday, March 4, 2009
  35. 35. Which is fastest? • view.center Wednesday, March 4, 2009
  36. 36. Which is fastest? • view.center • view.transform (~2-3x) Wednesday, March 4, 2009
  37. 37. Which is fastest? • view.center • view.transform (~2-3x) • view.frame (~2-3x) Wednesday, March 4, 2009
  38. 38. Velocity (project files:Velocity) Wednesday, March 4, 2009
  39. 39. Velocity + (project files:Velocity) Wednesday, March 4, 2009
  40. 40. speed and direction Wednesday, March 4, 2009
  41. 41. speed and direction y velocity x velocity Wednesday, March 4, 2009
  42. 42. - y velocity - x velocity + x velocity + y velocity Wednesday, March 4, 2009
  43. 43. Wednesday, March 4, 2009
  44. 44. // interface: float vx; float vy; Wednesday, March 4, 2009
  45. 45. // interface: float vx; float vy; // viewDidLoad: vx = 2.0; vy = 3.0; Wednesday, March 4, 2009
  46. 46. // interface: float vx; float vy; // viewDidLoad: vx = 2.0; vy = 3.0; // onTimer: ball.center = CGPointMake(x, y); x += vx; y += vy; Wednesday, March 4, 2009
  47. 47. speed angle (project files: AngularVelocity) Wednesday, March 4, 2009
  48. 48. y velocity speed = sin(angle) x speed angle x velocity = cos(angle) x speed (project files: AngularVelocity) Wednesday, March 4, 2009
  49. 49. Wednesday, March 4, 2009
  50. 50. // interface: float angle; float speed; Wednesday, March 4, 2009
  51. 51. // interface: // viewDidLoad: float angle; angle = 45.0; float speed; speed = 4.0; Wednesday, March 4, 2009
  52. 52. // interface: // viewDidLoad: float angle; angle = 45.0; float speed; speed = 4.0; // onTimer: ball.center = CGPointMake(x, y); x += cos(angle * M_PI / 180.0) * speed; y += sin(angle * M_PI / 180.0) * speed; Wednesday, March 4, 2009
  53. 53. Acceleration (project files: Acceleration) Wednesday, March 4, 2009
  54. 54. Acceleration + (project files: Acceleration) Wednesday, March 4, 2009
  55. 55. Wednesday, March 4, 2009
  56. 56. // interface: float ax; float ay; Wednesday, March 4, 2009
  57. 57. // interface: // viewDidLoad: float ax; ax = 0.07; float ay; ay = 0.1; Wednesday, March 4, 2009
  58. 58. // interface: // viewDidLoad: float ax; ax = 0.07; float ay; ay = 0.1; // onTimer: ball.center = CGPointMake(x, y); x += vx; y += vy; vx += ax; vy += ay; Wednesday, March 4, 2009
  59. 59. Bouncing (project files: Bouncing) Wednesday, March 4, 2009
  60. 60. Wednesday, March 4, 2009
  61. 61. -x velocity y velocity y velocity x velocity Wednesday, March 4, 2009
  62. 62. Wednesday, March 4, 2009
  63. 63. // interface: float bounce; Wednesday, March 4, 2009
  64. 64. // interface: float bounce; // viewDidLoad: bounce = -1.0; Wednesday, March 4, 2009
  65. 65. ball.center = CGPointMake(x, y); x += vx; y += vy; if(x > 300) // 320 - radius (20) { x = 300; vx *= bounce; } else if(x < 20) // 0 + radius { x = 20; vx *= bounce; } Wednesday, March 4, 2009
  66. 66. if(y > 440) // 460 - radius { y = 440; vy *= bounce; } else if(y < 20) // 0 + radius { y = 20; vy *= bounce; } Wednesday, March 4, 2009
  67. 67. Gravity acceleration (+y) Wednesday, March 4, 2009
  68. 68. Wednesday, March 4, 2009
  69. 69. // interface: float gravity; Wednesday, March 4, 2009
  70. 70. // interface: float gravity; // viewDidLoad: gravity = 0.5; Wednesday, March 4, 2009
  71. 71. // interface: float gravity; // viewDidLoad: gravity = 0.5; // onTimer: vy += gravity; Wednesday, March 4, 2009
  72. 72. Wednesday, March 4, 2009
  73. 73. acceleration.y acceleration.x Wednesday, March 4, 2009
  74. 74. @interface GravityViewController : UIViewController <UIAccelerometerDelegate> { UIImageView *ball; float x; float y; float vx; float vy; float bounce; CGPoint gravity; } Wednesday, March 4, 2009
  75. 75. Wednesday, March 4, 2009
  76. 76. // viewDidLoad gravity = CGPointZero; [[UIAccelerometer sharedAccelerometer] setDelegate:self]; Wednesday, March 4, 2009
  77. 77. // viewDidLoad gravity = CGPointZero; [[UIAccelerometer sharedAccelerometer] setDelegate:self]; - (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration { gravity = CGPointMake(acceleration.x, -acceleration.y); } Wednesday, March 4, 2009
  78. 78. // viewDidLoad gravity = CGPointZero; [[UIAccelerometer sharedAccelerometer] setDelegate:self]; - (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration { gravity = CGPointMake(acceleration.x, -acceleration.y); } // onTimer vx += gravity.x; vy += gravity.y; Wednesday, March 4, 2009
  79. 79. Do we still have time? Wednesday, March 4, 2009
  80. 80. Dragging and Throwing Wednesday, March 4, 2009
  81. 81. Wednesday, March 4, 2009
  82. 82. // interface BOOL dragging; Wednesday, March 4, 2009
  83. 83. // interface // viewDidLoad BOOL dragging; dragging = NO; Wednesday, March 4, 2009
  84. 84. // interface // viewDidLoad BOOL dragging; dragging = NO; - (void)onTimer { if(!dragging) { ... } } Wednesday, March 4, 2009
  85. 85. - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint point = [touch locationInView:self.view]; float dx = point.x - x; float dy = point.y - y; float dist = sqrt(dx * dx + dy * dy); if(dist < 20) { dragging = YES; x = point.x; y = point.y; vx = 0; vy = 0; } } Wednesday, March 4, 2009
  86. 86. - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { dragging = NO; } Wednesday, March 4, 2009
  87. 87. - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { if(dragging) { UITouch *touch = [touches anyObject]; CGPoint point = [touch locationInView:self.view]; vx = point.x - x; vy = point.y - y; x = point.x; y = point.y; ball.center = point; } } Wednesday, March 4, 2009
  88. 88. Thank you • Keith Peters • kp@bit-101.com • www.bit-101.com • www.wickedpissahgames.com • www.bit-101.com/360iDev/presentation.zip Wednesday, March 4, 2009
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×