您的位置:首页 > 其它

使用NSTimer做匀速动画和变速动画

2016-01-11 09:37 337 查看


使用NSTimer做匀速动画和变速动画

NSTimer是一个计时器类,用于定时向指定对象发送消息,本案例使用NSTimer制作飞机匀速飞行和减速飞行的效果,如图-1所示:


图-1

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和Button控件,在右边栏的检查器中设置ImageView的显示图片,并将ImageView设置为TRViewController的属性imageView,将Button关联成TRViewController的方法start。

其次TRViewController中定义两个属性CGPoint类型的startPoint,用于记录飞机的开始点,NSUInteger类型的count用于计数。

然后实现start方法,在该方法创建一个计时器,每隔1/30秒重复调用方法run:。

最后实现方法run:,在该方法根据startPoint、count的计数、动画时长和帧率计算出每次调用该方法飞机移动的距离,如果是匀速运动每次移动的距离是相同的,如果是减速运动每次移动的距离则逐步减小。

实现此案例需要按照如下步骤进行。

步骤一:搭建StoryBoard界面

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和Button控件,在右边栏的检查器中设置ImageView的显示图片,并将ImageView设置为TRViewController的属性imageView,将Button关联成TRViewController的方法start,代码如下所示:

@interface TRViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@end

步骤二:创建计时器

首先在TRViewController中定义两个属性CGPoint类型的startPoint,用于记录飞机的开始点,NSUInteger类型的count用于计数,代码如下所示:

@interface TRViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *aircraftView;
@property (nonatomic) CGPoint startPoint;
@property (nonatomic) NSUInteger count;
@end

然后实现start方法,在该方法创建一个计时器,每隔1/30秒重复调用方法run:,代码如下所示:

- (IBAction)start
{
self.startPoint = self.aircraftView.center;//记录开始位置
    [NSTimer scheduledTimerWithTimeInterval:1/FPS target:self selector:@selector(run:) userInfo:nil repeats:YES];
}

步骤三:实现run:方法

首先定义两个宏FPS用来表示帧率,DURATION用来表示动画时长,根据count的计数、动画时长和帧率计算出每次调用该方法飞机移动的距离,如果是匀速运动每次移动的距离是相同的,代码如下所示:

#define FPS 30.0 //帧率
#define DURATION 3//动画时长
- (void)run:(NSTimer *)timer
{
self.count++;
CGPoint center = self.aircraftView.center;
center.y = self.startPoint.y + self.count * (80 - self.startPoint.y) / (FPS * DURATION);
self.aircraftView.center = center;
if(self.count >= FPS * DURATION) [timer invalidate];
}

如果是减速运动每次移动的距离则逐步减小,代码如下所示:

- (void) run:(NSTimer *)timer
{
CGPoint center = self.aircraft.center;
//当前值=上一次的值+(目标值-上一次值)*渐近因子
center.y = center.y + (100-center.y)*0.1;
self.aircraft.center = center;
if (center.y - 100 <= 1E-6) {
[timer invalidate];
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  匀速 变速动画