利用UISlider和 UIImageView实现跑图

**UISlider 滑块

知识点:

初始化:initWithFrame:(CGRect)frame

核心方法:

- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;

// 设置滑块的初值 最大值 最小值

// 如果想设置初始位置 需要先把最大最小值设置上 再给初值才会发生变化

// 把图片的名字拼接出来

// 格式化拼接需要用到占位符

UIImageView(跑图制作)的对象还可以实现动画的效果,就是将很多图片放在一个数组中实现跑图功能

animationDuration 设置图片数组

animationImages 设置时间间隔

animationRepeatCount 设置动画的次数

startAnimating 开始动画

stopAnimating 关闭动画**



其中设置跟视图控制器就不说了,主要代码是在根视图控制器中:

RootViewController.m

#import "RootViewController.h"

@interface RootViewController ()
//  属性方便取值赋值 或者也可以使用tag
@property (nonatomic,strong)UIImageView *imgView;

@end

@implementation RootViewController
- (void)dealloc{
[_imgView release];
[super dealloc];
}

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.

//  声明一个滑块用于控制UIImageView 动画的速度
UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(100, 100, 200, 50)];
//  设置相关属性和方法
//  设置滑块和进度条的颜色
slider.thumbTintColor = [UIColor orangeColor];
slider.minimumTrackTintColor = [UIColor blueColor];
slider.maximumTrackTintColor = [UIColor greenColor];
//  设置滑块和进度条的图片
UIImage *img1 = [UIImage imageNamed:@"01-refresh"];
UIImage *img2 = [UIImage imageNamed:@"02-redo"];
UIImage *img3 = [UIImage imageNamed:@"03-loopback"];
UIImage *img4 = [UIImage imageNamed:@"12"];
UIImage *img5 = [UIImage imageNamed:@"13"];

//  这里可以不是镂空图,但是得尽量一点
[slider setThumbImage:img1 forState:UIControlStateNormal];
[slider setThumbImage:img2 forState:UIControlStateHighlighted];
[slider setThumbImage:img3 forState:UIControlStateSelected];
slider.minimumValueImage = img4;
slider.maximumValueImage = img5;

//  设置滑块的最大值和最小值
//  由于这里是控制图片播放速度的,所以最大值不要太大
slider.minimumValue = 0;
slider.maximumValue = 10;

//  设置滑块初始的位置
//  这里需要注意的点就是你得先声明最大最小值,在设置初始位置,不然你的初始位置及其默认是0;
slider.value = 5;

//  为滑块添加事件 用来控制跑图的速度
[slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];

//  添加到视图
[self.view addSubview:slider];
//  释放
[slider release];

//  实现跑图
//  创建一个图片数组
NSMutableArray *imgArray = [NSMutableArray array];
//  跑图一般都是一套的图,命名是应该使用统一规则,还得具有联系性,这样可以使用循环创建
for (int i = 1; i <= 10; i++) {
UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]];
//  将照片添加到图片数组中
[imgArray addObject:img];
}

//  创建一个imageView 用于显示跑图
self.imgView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 150, 200, 300)];
//  设置相关属性
self.imgView.animationImages = imgArray;
//  这个周期是显示完所有图片的时间  默认一秒钟播放三十张
//  self.imgView.animationDuration = 5;
//  默认是0  无限循环
// self.imgView.animationRepeatCount = 2;

//  动画开始
[self.imgView startAnimating];

//  添加导视图
[self.view addSubview:self.imgView];
//  释放
[_imgView release];

}

//  实现action方法
- (void)sliderAction:(UISlider *)slider
{
//  用滑块控制速度,也就是控制他的动画周期
self.imgView.animationDuration = slider.value;
//  每次值的改变都需要,重新开始动画
[self.imgView startAnimating];
//  需求  最大位置停止,显示一张图片 并且将滑块设置成选中状态
if (slider.value == slider.maximumValue) {
[self.imgView stopAnimating];
UIImage *img = [UIImage imageNamed:@"11.jpg"];
self.imgView.image = img;
slider.selected = YES;
}else
{
slider.selected = NO;
}

}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

三维图

window->跟视图->imageView.和slider


跟视图->image" title="">

* 效果图*







图片下载链接:

http://pan.baidu.com/s/1mgvU1hY