Making things Move on the iPhone

3,769
-1

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,769
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.

×