iphone練習之animation使球移動、旋轉、放大(transtion,rotation,scaling)

 先展示實現效果：

 

第一種方法：

1、首先建立一個基視圖的項目並命名為：AnimationTest

開啟ViewController.xib檔案，拖一個Image View、label和一個slider，imageView放在中間,其它兩個放在螢幕的下面；

2、在ViewController.h檔案中建立如下代碼：

[cpp] #import <UIKit/UIKit.h>  
 
@interface ViewController : UIViewController{ 
    IBOutlet UIImageView *imageView;//圖片  
    IBOutlet UISlider *slider;//滑塊條  
     
    CGPoint delta;//座標  
    NSTimer *timer;//時間  
    float cellR;//球的半徑  
     
     
} 
@property (nonatomic,retain)IBOutlet UIImageView *imageView; 
@property (nonatomic,retain)IBOutlet UISlider *slider; 
//當滑塊條移動的時候  
-(IBAction)sliderMoved:(id)sender; 
@end 
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController{
    IBOutlet UIImageView *imageView;//圖片
    IBOutlet UISlider *slider;//滑塊條
   
    CGPoint delta;//座標
    NSTimer *timer;//時間
    float cellR;//球的半徑
   
   
}
@property (nonatomic,retain)IBOutlet UIImageView *imageView;
@property (nonatomic,retain)IBOutlet UISlider *slider;
//當滑塊條移動的時候
-(IBAction)sliderMoved:(id)sender;
@end
並且把所有的控制項相應的都對應上，這個相信大家都知道了！！

3、ViewContoller.m檔案實現

[cpp] #import "ViewController.h"  
 
@implementation ViewController 
@synthesize imageView,slider; 
 
- (void)viewDidLoad 
{ 
    //得到球的半徑  
    cellR=imageView.frame.size.width/2; 
    //滑動塊在右旁顯示值  
    [slider setShowValue:YES]; 
    //初始化要移動的座標  
    delta=CGPointMake(12.0, 4.0); 
    //scheduledTimerWithTimeInterval：參數指定秒計時器之間發射。它接受一個0.0-1.0秒的值，selector：參數指定定時器觸發時要調用的方法，repeats：參數表示計時器對象是否會反覆重新安排本身。  
    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.  
} 
//每次調用都讓球移動，並判斷是否接觸到螢幕邊緣  
-(void)onTimer{ 
    //球中心的x軸加delta.x，y軸加delta.y來使球移動  
    imageView.center=CGPointMake(imageView.center.x+delta.x,imageView.center.y+delta.y); 
    //如果球中心的x軸超過了螢幕的寬度或者球的x軸小於了半徑就把delta.x改成相反  
    if(imageView.center.x>self.view.bounds.size.width-cellR||imageView.center.x<cellR){ 
        delta.x=-delta.x; 
    } 
    //如果球中心的y軸超過了螢幕的高度或者球的y軸小於了半徑就把delta.y改成相反  
    if(imageView.center.y>self.view.bounds.size.height-cellR||imageView.center.y<cellR){ 
        delta.y=-delta.y; 
    } 
} 
//當你改變slider，該方法將被調用  
-(IBAction)sliderMoved:(id)sender{ 
    //把以前的timer設為無效，只有設為無效也，才能改變它的發身間隔頻率，你不能直接改變他的間隔  
    [timer invalidate]; 
    //然後重新建立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
{
    //得到球的半徑
    cellR=imageView.frame.size.width/2;
    //滑動塊在右旁顯示值
    [slider setShowValue:YES];
    //初始化要移動的座標
    delta=CGPointMake(12.0, 4.0);
    //scheduledTimerWithTimeInterval：參數指定秒計時器之間發射。它接受一個0.0-1.0秒的值，selector：參數指定定時器觸發時要調用的方法，repeats：參數表示計時器對象是否會反覆重新安排本身。
    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.
}
//每次調用都讓球移動，並判斷是否接觸到螢幕邊緣
-(void)onTimer{
    //球中心的x軸加delta.x，y軸加delta.y來使球移動
    imageView.center=CGPointMake(imageView.center.x+delta.x,imageView.center.y+delta.y);
    //如果球中心的x軸超過了螢幕的寬度或者球的x軸小於了半徑就把delta.x改成相反
    if(imageView.center.x>self.view.bounds.size.width-cellR||imageView.center.x<cellR){
        delta.x=-delta.x;
    }
    //如果球中心的y軸超過了螢幕的高度或者球的y軸小於了半徑就把delta.y改成相反
    if(imageView.center.y>self.view.bounds.size.height-cellR||imageView.center.y<cellR){
        delta.y=-delta.y;
    }
}
//當你改變slider，該方法將被調用
-(IBAction)sliderMoved:(id)sender{
    //把以前的timer設為無效，只有設為無效也，才能改變它的發身間隔頻率，你不能直接改變他的間隔
    [timer invalidate];
    //然後重新建立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];
}
第二種方法：

為了使畫面更流暢，我們要用到animation，在原先項目的基礎上添加如下代碼

首先在ViewController.h檔案添加：

[cpp] CGPoint​ translation; 
CGPoint​ translation;
在ViewController.m中的VieDidLoad中初始化：

[cpp] //初始化  
   translation=CGPointMake(0.0, 0.0); 
 //初始化 www.2cto.com
    translation=CGPointMake(0.0, 0.0);
把onTimer方法改成如下：

[cpp] /每次調用都讓球移動，並判斷是否接觸到螢幕邊緣 
-(void)onTimer{ 
    //UIView開始動畫  
    [UIView beginAnimations:@"my_own_animation" context:nil]; 
    //設定動畫移動的時間為slider.value滑塊的值  
    [UIView setAnimationDuration:slider.value]; 
    //設定動畫曲線類形為：直線UIViewAnimationCurveLinear  
    [UIView setAnimationCurve:UIViewAnimationCurveLinear]; 
    //在視圖上執行仿射變換，簡單地使用它的變換屬性：設定動畫移動值  
    imageView.transform=CGAffineTransformMakeTranslation(translation.x, translation.y); 
    //完成動畫，必須寫，不要忘了  
    [UIView commitAnimations]; 
     
    //移動值的變化  
    translation.x+=delta.x; 
    translation.y+=delta.y; 
    //是否超出範圍  
    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; 
    } 
} 
/每次調用都讓球移動，並判斷是否接觸到螢幕邊緣
-(void)onTimer{
    //UIView開始動畫
    [UIView beginAnimations:@"my_own_animation" context:nil];
    //設定動畫移動的時間為slider.value滑塊的值
    [UIView setAnimationDuration:slider.value];
    //設定動畫曲線類形為：直線UIViewAnimationCurveLinear
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    //在視圖上執行仿射變換，簡單地使用它的變換屬性：設定動畫移動值
    imageView.transform=CGAffineTransformMakeTranslation(translation.x, translation.y);
    //完成動畫，必須寫，不要忘了
    [UIView commitAnimations];
   
    //移動值的變化
    translation.x+=delta.x;
    translation.y+=delta.y;
    //是否超出範圍
    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;
    }
}

這樣畫面就更加流暢了！！

下面實現球旋轉效果：

還是在原來的項目基礎上添加代碼：

首先在ViewController.h檔案添加：

[cpp] //旋轉的值  
    float angle; 
//旋轉的值
    float angle;
在ViewController.m中的VieDidLoad中初始化：

[cpp] angle=0; 
angle=0;
把onTimer方法改成如下：

[cpp] //每次調用都讓球移動，並判斷是否接觸到螢幕邊緣  
-(void)onTimer{ 
    
    //UIView開始動畫  
    [UIView beginAnimations:@"my_own_animation" context:nil]; 
    //設定動畫移動的時間為slider.value滑塊的值  
    [UIView setAnimationDuration:slider.value]; 
    //設定動畫曲線類形為：直線UIViewAnimationCurveLinear  
    [UIView setAnimationCurve:UIViewAnimationCurveLinear]; 
    
    //旋轉效果  
    imageView.transform=CGAffineTransformMakeRotation(angle); 
    //完成動畫，必須寫，不要忘了  
    [UIView commitAnimations]; 
    //改變angle的值，angle是弧度值，1弧度值是57.32度，每次都旋轉0.1弧度值，你要是想效果明顯就把值設大一點  
    angle += 0.1; 
    if (angle>6.2857) angle = 0; 
//球中心的x軸加delta.x，y軸加delta.y來使球移動(第一種方法）  
    imageView.center=CGPointMake(imageView.center.x+delta.x,imageView.center.y+delta.y); 
    //如果球中心的x軸超過了螢幕的寬度或者球的x軸小於了半徑就把delta.x改成相反  
    if(imageView.center.x>self.view.bounds.size.width-cellR||imageView.center.x<cellR){ 
        delta.x=-delta.x; 
    } 
    //如果球中心的y軸超過了螢幕的高度或者球的y軸小於了半徑就把delta.y改成相反  
    if(imageView.center.y>self.view.bounds.size.height-cellR||imageView.center.y<cellR){ 
        delta.y=-delta.y; 
    } 
     
} 
//每次調用都讓球移動，並判斷是否接觸到螢幕邊緣
-(void)onTimer{
  
    //UIView開始動畫
    [UIView beginAnimations:@"my_own_animation" context:nil];
    //設定動畫移動的時間為slider.value滑塊的值
    [UIView setAnimationDuration:slider.value];
    //設定動畫曲線類形為：直線UIViewAnimationCurveLinear
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
  
    //旋轉效果
    imageView.transform=CGAffineTransformMakeRotation(angle);
    //完成動畫，必須寫，不要忘了
    [UIView commitAnimations];
    //改變angle的值，angle是弧度值，1弧度值是57.32度，每次都旋轉0.1弧度值，你要是想效果明顯就把值設大一點
    angle += 0.1;
    if (angle>6.2857) angle = 0;
//球中心的x軸加delta.x，y軸加delta.y來使球移動(第一種方法）
    imageView.center=CGPointMake(imageView.center.x+delta.x,imageView.center.y+delta.y);
    //如果球中心的x軸超過了螢幕的寬度或者球的x軸小於了半徑就把delta.x改成相反
    if(imageView.center.x>self.view.bounds.size.width-cellR||imageView.center.x<cellR){
        delta.x=-delta.x;
    }
    //如果球中心的y軸超過了螢幕的高度或者球的y軸小於了半徑就把delta.y改成相反
    if(imageView.center.y>self.view.bounds.size.height-cellR||imageView.center.y<cellR){
        delta.y=-delta.y;
    }
   
}旋轉效果實現！就是只加了一個imageView.transform=CGAffineTransformMakeRotatin(angle)，該方法的目地是設定它的旋轉效果；

接下來是放大效果：

在上面代碼裡只加一句：

[cpp] imageView.transform=CGAffineTransformMakeScale(angle, angle); 
imageView.transform=CGAffineTransformMakeScale(angle, angle);該語句是實現放大效果，x和y軸放在angle倍；

ok！實現！本部落格是我自己的練習，有好多地方沒有講太清楚，還請諒解！

 

摘自 任海麗(3G/移動開發)