您现在的位置：计算机技术学习网 > 技术中心 > 编程开发 > 移动开发 > Iphone >

iphone练习之animation使球移动、旋转、放大(transtion,rotation

来源：未知 责任编辑：智问网络 发表时间:2013-10-07 00:58　点击:次
IphoneAndroidWindows Phone其他技术
 先展示实现效果：

 


第一种方法：

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/移动开发)

    相关新闻>>

    最新推荐更多>>>
    搞定IPhone应用的
    搞定IPhone应用的
    热门新闻进入移动开发频道>>
    Iphone
    [IOS]本地化
    Iphone
    appledoc:Objective-C注释文档生成工具
    Iphone
    [IOS]自定义长触屏事件
    Iphone
    [IOS]Photo应用
    Iphone
    iOS App 目录结构
    Iphone
    ios 代码片段
    发表评论
    请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    今日头条

    更多>>

    推荐热点

    • Lexical or Preprocessor Issue 'xxx.h
    • ios学习笔记（二）xcode 4.3.2下实现基本交互
    • ios版本的helloworld
    • iphone（object-c） 内存管理（3） 有效的内存管理 前半部分
    • ios学习笔记（一）xcode 4.3.2下创建第一个ios项目
    • IOS类似iphone通讯录TableView的完整demo【附源码】
    • UITableView一些方法
    • [iPhone中级]iPhone团购信息客户端的开发 (二)
    • 如何为Iphone应用创建启动界面

    您可能感兴趣的文章

    快速直达

    新闻点评智问网络

    新闻关注排行榜

    热门推荐 最新推荐

    移动开发导航

    IphoneAndroidWindows Phone其他技术
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1