ios 動畫效果

一、使用NSTimer實現動畫

1.建立empty AppLication，添加HomeViewController頁面, iphone.png圖片

2.在 HomeViewController.xib中添加Image View，並調整其大小；再添加一個Slider控制項

 

3.HomeViewController.h代碼：

 #import <UIKit/UIKit.h>

@interface HomeViewController : UIViewController{    CGPoint delta;//座標變化量    NSTimer *timer;    CGSize picSize;//圖片大小    }@property (retain, nonatomic) IBOutlet UIImageView *imageView;@property (retain, nonatomic) IBOutlet UISlider *slider;- (IBAction)sliderChanged:(id)sender;@end

HomeViewController.m代碼：

 #import "HomeViewController.h"

@interface HomeViewController ()@end@implementation HomeViewController

 

@synthesize imageView;@synthesize slider;- (void)move{    imageView.center = CGPointMake(imageView.center.x + delta.x,                                    imageView.center.y + delta.y);        if (imageView.center.x > self.view.bounds.size.width - picSize.width / 2 ||         imageView.center.x < picSize.width / 2) {        delta.x = -delta.x;    }        if (imageView.center.y >self.view.bounds.size.height - picSize.height / 2 ||        imageView.center.y < picSize.height / 2) {        delta.y = -delta.y;    }    /*我們不斷地改變imaageView的center座標，橫向和縱向的調整數值為delta的x和y值，當檢測到imageView的位置     超過或小於螢幕的寬度或者高度的時候，我們改變其運動的方向*/}- (void)viewDidLoad{    picSize = imageView.bounds.size;    delta = CGPointMake(8.0, 4.0);    timer = [NSTimer scheduledTimerWithTimeInterval:slider.value                                             target:self                                            selector:@selector(move)                                            userInfo:nil                                             repeats:YES];        [super viewDidLoad];}- (void)dealloc {

 

    [timer invalidate];    [imageView release];    [slider release];    [super dealloc];}

 

- (IBAction)sliderChanged:(id)sender {    [timer invalidate];    timer = [NSTimer scheduledTimerWithTimeInterval:slider.value                                             target:self                                            selector:@selector(move)                                            userInfo:nil                                            repeats:YES];}@end

因為圖片是靜態所以看不到效果，這個很好玩，iphone圖片會在手機內四周不同位置移動，速度可以調節 

                                                        二、視覺效果動畫 

讓動畫產生平滑的感覺：

 

修改move方法

- (void)move{        [UIView beginAnimations:@"myAnimation" context:nil];        [UIView setAnimationDuration:slider.value];//動畫執行時間        [UIView setAnimationCurve:UIViewAnimationCurveLinear];//設定動畫的執行速度    /*setAnimationCurve有四種常量：            UIViewAnimationCurveLinear 在執行動畫的時間內，速度始終保持如一。            UIViewAnimationCurveEaseInOut 執行動畫的時候，速度開始慢，然後加速，結束時再次變慢            UIViewAnimationCurveEaseIn 速度開始慢，然後逐漸加速直到結束            UIViewAnimationCurveEaseOut 速度開始快，然後逐漸減速直到結束*/    imageView.center = CGPointMake(imageView.center.x + delta.x,                                    imageView.center.y + delta.y);        [UIView commitAnimations];//動畫塊結束時調用，此時imageView從一個點移動到另一個點就會非常平滑，而不是讓人感覺從一個點跳到了另一個點        if (imageView.center.x > self.view.bounds.size.width - picSize.width / 2 ||         imageView.center.x < picSize.width / 2) {        delta.x = -delta.x;    }        if (imageView.center.y >self.view.bounds.size.height - picSize.height / 2 ||        imageView.center.y < picSize.height / 2) {        delta.y = -delta.y;    }    /*我們不斷地改變imaageView的center座標，橫向和縱向的調整數值為delta的x和y值，當檢測到imageView的位置     超過或小於螢幕的寬度或者高度的時候，我們改變其運動的方向*/}

三、視圖變形

    雖然可以使用NSTimer達到view位置移動的動畫效果，但是也可以使用ios sdk提供的另外一種技術--Transforms(定義在Core Graphics架構中)來實現同樣的效果，並且實現更多功能。

    包括：Translation, 移動view的原點座標到指定的位置；Rotation, 旋轉view到一個指定的角度；Scaling, 縮放view到一個指定的寬高比例。

 

1、位移動畫

修改HomeViewController.h

#import <UIKit/UIKit.h>@interface HomeViewController : UIViewController{    CGPoint delta;    NSTimer *timer;    CGSize picSize;    CGPoint translation;    }@property (retain, nonatomic) IBOutlet UIImageView *imageView;@property (retain, nonatomic) IBOutlet UISlider *slider;- (IBAction)sliderChanged:(id)sender;

@end 

修改HomeViewController.m 的move方法和viewDidLoad方法

- (void)move{        imageView.transform = CGAffineTransformMakeTranslation(translation.x, translation.y);//移動view到指定的位置    translation.x += delta.x;    translation.y += delta.y;        if (imageView.center.x + translation.x > self.view.bounds.size.width - picSize.width / 2 ||        imageView.center.x + translation.x < picSize.width / 2) {        delta.x = -delta.x;    }        if (imageView.center.y + translation.y > self.view.bounds.size.height - picSize.height / 2 ||        imageView.center.y + translation.y < picSize.height / 2) {        delta.y = -delta.y;    }}

 - (void)viewDidLoad

{    picSize = imageView.bounds.size;    delta = CGPointMake(8.0, 4.0);        translation = CGPointMake(0.0, 0.0);        timer = [NSTimer scheduledTimerWithTimeInterval:slider.value                                             target:self                                            selector:@selector(move)                                            userInfo:nil                                             repeats:YES];        [super viewDidLoad];}

 

2、旋轉動畫

修改HomeViewController.h

#import <UIKit/UIKit.h>@interface HomeViewController : UIViewController{        CGPoint delta;    NSTimer *timer;    CGSize picSize;    CGPoint translation;    float angle;//旋轉角度    }@property (retain, nonatomic) IBOutlet UIImageView *imageView;@property (retain, nonatomic) IBOutlet UISlider *slider;- (IBAction)sliderChanged:(id)sender;

@end 

修改HomeViewController.m 的move方法和viewDidLoad方法

- (void)move{    imageView.transform = CGAffineTransformMakeRotation(angle);    angle += 0.02;    /*判斷角度是否大於360º，如果大於2π（3.14159 * 2 = 6.28318）,則讓angle為0*/    if (angle > 6.2832) {        angle = 0;    }}

 - (void)viewDidLoad

{    picSize = imageView.bounds.size;    delta = CGPointMake(8.0, 4.0);

 

    translation = CGPointMake(0.0, 0.0);

    angle= 0; 

    timer = [NSTimer scheduledTimerWithTimeInterval:slider.value                                             target:self                                            selector:@selector(move)                                            userInfo:nil                                             repeats:YES];        [super viewDidLoad];}

  

3、縮放動畫 

 只需要修改slider的事件sliderChanged 即可

- (IBAction)sliderChanged:(id)sender {    imageView.transform = CGAffineTransformMakeScale(slider.value, slider.value);//縮放

}