Iphone exercise animation enables the ball to move, rotate, and zoom in (transtion, rotation, scaling)

First show the implementation effect:

 

Method 1:

1. Create a project for the base view and name it "AnimationTest ".

Open the ViewController. xib file, drag an Image View, a label, and a slider, place the imageView in the middle, and the other two under the screen;

2. Create the following code in the ViewController. h file:

[Cpp] # import <UIKit/UIKit. h>
 
@ Interface ViewController: UIViewController {
IBOutlet UIImageView * imageView; // picture
IBOutlet UISlider * slider; // slider bar

CGPoint delta; // coordinates
Nstmer * timer; // time
Float cellR; // ball radius


}
@ Property (nonatomic, retain) IBOutlet UIImageView * imageView;
@ Property (nonatomic, retain) IBOutlet UISlider * slider;
// When the slider bar is moved
-(IBAction) sliderMoved :( id) sender;
@ End
# Import <UIKit/UIKit. h>

@ Interface ViewController: UIViewController {
IBOutlet UIImageView * imageView; // picture
IBOutlet UISlider * slider; // slider bar

CGPoint delta; // coordinates
Nstmer * timer; // time
Float cellR; // ball radius


}
@ Property (nonatomic, retain) IBOutlet UIImageView * imageView;
@ Property (nonatomic, retain) IBOutlet UISlider * slider;
// When the slider bar is moved
-(IBAction) sliderMoved :( id) sender;
@ End
And all the controls are matched accordingly. I believe everyone knows this !!

3. ViewContoller. m file implementation

[Cpp] # import "ViewController. h"
 
@ Implementation ViewController
@ Synthesize imageView, slider;
 
-(Void) viewDidLoad
{
// Obtain the ball radius
CellR = imageView. frame. size. width/2;
// Display the value of the slide block on the right side
[Slider setShowValue: YES];
// Initialize the coordinates to be moved
Delta = CGPointMake (12.0, 4.0 );
// ScheduledTimerWithTimeInterval: The parameter specifies that the timer is fired between seconds. It accepts a value of 0.0-1.0 seconds. selector: Specifies the method to be called when the timer is triggered. repeats: indicates whether the timer object will be rescheduled repeatedly.
Timer = [NSTimer scheduledTimerWithTimeInterval: slider. value target: self selector: @ selector (onTimer) userInfo: nil repeats: YES];

[Super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
// Every call moves the ball and determines whether it is exposed to the screen edge.
-(Void) onTimer {
// Add delta. x to the x axis of the center of the ball, and delta. y to move the ball.
ImageView. center = CGPointMake (imageView. center. x + delta. x, imageView. center. y + delta. y );
// If the x axis of the center of the ball exceeds the screen width or the x axis of the ball is smaller than the radius, change delta. x to the opposite.
If (imageView. center. x> self. view. bounds. size. width-cellR | imageView. center. x <cellR ){
Delta. x =-delta. x;
}
// If the y axis of the center of the ball exceeds the screen height or the y axis of the ball is smaller than the radius, change delta. y to the opposite.
If (imageView. center. y> self. view. bounds. size. height-cellR | imageView. center. y <cellR ){
Delta. y =-delta. y;
}
}
// When you change the slider, this method will be called
-(IBAction) sliderMoved :( id) sender {
// Set the previous timer as invalid. Only when it is set as invalid can the sending interval be changed. You cannot directly change the interval.
[Timer invalidate];
// Re-create timer
Timer = [NSTimer scheduledTimerWithTimeInterval: slider. value target: self selector: @ selector (onTimer) userInfo: nil repeats: YES];

}
-(Void) dealloc {
[Timer invalidate];
[ImageView release];
[Slider release];
[Super dealloc];
}
# Import "ViewController. h"

@ Implementation ViewController
@ Synthesize imageView, slider;

-(Void) viewDidLoad
{
// Obtain the ball radius
CellR = imageView. frame. size. width/2;
// Display the value of the slide block on the right side
[Slider setShowValue: YES];
// Initialize the coordinates to be moved
Delta = CGPointMake (12.0, 4.0 );
// ScheduledTimerWithTimeInterval: The parameter specifies that the timer is fired between seconds. It accepts a value of 0.0-1.0 seconds. selector: Specifies the method to be called when the timer is triggered. repeats: indicates whether the timer object will be rescheduled repeatedly.
Timer = [NSTimer scheduledTimerWithTimeInterval: slider. value target: self selector: @ selector (onTimer) userInfo: nil repeats: YES];

[Super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
// Every call moves the ball and determines whether it is exposed to the screen edge.
-(Void) onTimer {
// Add delta. x to the x axis of the center of the ball, and delta. y to move the ball.
ImageView. center = CGPointMake (imageView. center. x + delta. x, imageView. center. y + delta. y );
// If the x axis of the center of the ball exceeds the screen width or the x axis of the ball is smaller than the radius, change delta. x to the opposite.
If (imageView. center. x> self. view. bounds. size. width-cellR | imageView. center. x <cellR ){
Delta. x =-delta. x;
}
// If the y axis of the center of the ball exceeds the screen height or the y axis of the ball is smaller than the radius, change delta. y to the opposite.
If (imageView. center. y> self. view. bounds. size. height-cellR | imageView. center. y <cellR ){
Delta. y =-delta. y;
}
}
// When you change the slider, this method will be called
-(IBAction) sliderMoved :( id) sender {
// Set the previous timer as invalid. Only when it is set as invalid can the sending interval be changed. You cannot directly change the interval.
[Timer invalidate];
// Re-create timer
Timer = [NSTimer scheduledTimerWithTimeInterval: slider. value target: self selector: @ selector (onTimer) userInfo: nil repeats: YES];

}
-(Void) dealloc {
[Timer invalidate];
[ImageView release];
[Slider release];
[Super dealloc];
}
Method 2:

To make the screen smoother, we need to use animation and add the following code on the basis of the original project.

First, add the following content in the ViewController. h file:

[Cpp] CGPoint translation;
CGPoint translation;
Initialize in VieDidLoad in ViewController. m:

[Cpp] // Initialization
Translation = CGPointMake (0.0, 0.0 );
// Initialize www.2cto.com
Translation = CGPointMake (0.0, 0.0 );
Change the onTimer Method to the following:

[Cpp]/every call moves the ball and determines whether it is exposed to the screen edge.
-(Void) onTimer {
// Start animation with UIView
[UIView beginAnimations: @ "my_own_animation" context: nil];
// Set the animation movement time to the value of the slider. value slider.
[UIView setAnimationDuration: slider. value];
// Set the animation curve class to: Straight UIViewAnimationCurveLinear
[UIView setAnimationCurve: UIViewAnimationCurveLinear];
// Execute an affine transform on The View and simply use its transform attribute: Set the animation Moving Value
ImageView. transform = CGAffineTransformMakeTranslation (translation. x, translation. y );
// Complete the animation. It must be written. Do not forget it.
[UIView commitAnimations];

// Change the Moving Value
Translation. x + = delta. x;
Translation. y + = delta. y;
// Whether it is out of range
If (imageView. center. x + translation. x> self. view. bounds. size. width-cellR | imageView. center. x + translation. x <cellR ){
Delta. x =-delta. x;
}
If (imageView. center. y + translation. y> self. view. bounds. size. width-cellR | imageView. center. y + translation. y <cellR ){
Delta. y =-delta. y;
}
}
/Every call moves the ball and determines whether it is exposed to the screen edge.
-(Void) onTimer {
// Start animation with UIView
[UIView beginAnimations: @ "my_own_animation" context: nil];
// Set the animation movement time to the value of the slider. value slider.
[UIView setAnimationDuration: slider. value];
// Set the animation curve class to: Straight UIViewAnimationCurveLinear
[UIView setAnimationCurve: UIViewAnimationCurveLinear];
// Execute an affine transform on The View and simply use its transform attribute: Set the animation Moving Value
ImageView. transform = CGAffineTransformMakeTranslation (translation. x, translation. y );
// Complete the animation. It must be written. Do not forget it.
[UIView commitAnimations];

// Change the Moving Value
Translation. x + = delta. x;
Translation. y + = delta. y;
// Whether it is out of range
If (imageView. center. x + translation. x> self. view. bounds. size. width-cellR | imageView. center. x + translation. x <cellR ){
Delta. x =-delta. x;
}
If (imageView. center. y + translation. y> self. view. bounds. size. width-cellR | imageView. center. y + translation. y <cellR ){
Delta. y =-delta. y;
}
}

This will make the screen smoother !!

The following shows the ball rotation effect:

Add code based on the original project:

First, add the following content in the ViewController. h file:

[Cpp] // rotation value
Float angle;
// Rotation value
Float angle;
Initialize in VieDidLoad in ViewController. m:

[Cpp] angle = 0;
Angle = 0;
Change the onTimer Method to the following:

[Cpp] // every call moves the ball and determines whether it is exposed to the screen edge.
-(Void) onTimer {

// Start animation with UIView
[UIView beginAnimations: @ "my_own_animation" context: nil];
// Set the animation movement time to the value of the slider. value slider.
[UIView setAnimationDuration: slider. value];
// Set the animation curve class to: Straight UIViewAnimationCurveLinear
[UIView setAnimationCurve: UIViewAnimationCurveLinear];

// Rotating effect
ImageView. transform = CGAffineTransformMakeRotation (angle );
// Complete the animation. It must be written. Do not forget it.
[UIView commitAnimations];
// Change the angle value. The angle value is a radian value, and the 1 radian value is 57.32 degrees. Rotate the 0.1 radian value each time. Set the value to a larger value if the effect is obvious.
Angle + = 0.1;
If (angular> 6.2857) angle = 0;
// Add delta. x to the x axis of the center of the ball, and delta. y to move the ball (method 1)
ImageView. center = CGPointMake (imageView. center. x + delta. x, imageView. center. y + delta. y );
// If the x axis of the center of the ball exceeds the screen width or the x axis of the ball is smaller than the radius, change delta. x to the opposite.
If (imageView. center. x> self. view. bounds. size. width-cellR | imageView. center. x <cellR ){
Delta. x =-delta. x;
}
// If the y axis of the center of the ball exceeds the screen height or the y axis of the ball is smaller than the radius, change delta. y to the opposite.
If (imageView. center. y> self. view. bounds. size. height-cellR | imageView. center. y <cellR ){
Delta. y =-delta. y;
}

}
// Every call moves the ball and determines whether it is exposed to the screen edge.
-(Void) onTimer {

// Start animation with UIView
[UIView beginAnimations: @ "my_own_animation" context: nil];
// Set the animation movement time to the value of the slider. value slider.
[UIView setAnimationDuration: slider. value];
// Set the animation curve class to: Straight UIViewAnimationCurveLinear
[UIView setAnimationCurve: UIViewAnimationCurveLinear];

// Rotating effect
ImageView. transform = CGAffineTransformMakeRotation (angle );
// Complete the animation. It must be written. Do not forget it.
[UIView commitAnimations];
// Change the angle value. The angle value is a radian value, and the 1 radian value is 57.32 degrees. Rotate the 0.1 radian value each time. Set the value to a larger value if the effect is obvious.
Angle + = 0.1;
If (angular> 6.2857) angle = 0;
// Add delta. x to the x axis of the center of the ball, and delta. y to move the ball (method 1)
ImageView. center = CGPointMake (imageView. center. x + delta. x, imageView. center. y + delta. y );
// If the x axis of the center of the ball exceeds the screen width or the x axis of the ball is smaller than the radius, change delta. x to the opposite.
If (imageView. center. x> self. view. bounds. size. width-cellR | imageView. center. x <cellR ){
Delta. x =-delta. x;
}
// If the y axis of the center of the ball exceeds the screen height or the y axis of the ball is smaller than the radius, change delta. y to the opposite.
If (imageView. center. y> self. view. bounds. size. height-cellR | imageView. center. y <cellR ){
Delta. y =-delta. y;
}

} Rotation effect implementation! Only one imageView. transform = CGAffineTransformMakeRotatin (angle) is added. The method sets the rotation effect;

The following is the amplification effect:

In the above Code, add one sentence:

[Cpp] imageView. transform = CGAffineTransformMakeScale (angle, angle );
ImageView. transform = CGAffineTransformMakeScale (angle, angle); this statement is used to zoom in, x and Y axes are placed in angle;

OK! Implementation! This blog is my own exercise. I have not explained many things clearly. Please forgive me!

 

From Ren haili (3G/mobile development)