一年春好处,不在浓芳,小艳疏香,最娇软<不良蛙>
![]()
动画切换图片的效果
动画切换图片的效果
上面是效果图:
- 代码实现部分:
定义两个属性
# 定义一个放照片的 UIImageView
@property (strong, nonatomic) UIImageView *OurImages;
# 记录当前展示的照片次序 (可以理解你正在展示的是第几张照片 从0 开始)
@property (assign, nonatomic) NSInteger currentIndex;
思路:
目的: 实现滑动切换照片
解决思路: 首先需要展示照片的 UIImageView -----> 其次要有展示的图片(我这是五张) -----> 通过左滑右滑切换展示的图片 -----> 同时要有动画效果
上代码:
# 创建 UIImageView
self.OurImages = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
[self.view addSubview:self.OurImages];
// 图片会在 View 中显示 并且比例不变
self.OurImages.contentMode = UIViewContentModeScaleAspectFill;
# 设置默认的照片 和 默认的次序 (这里要对应 第一张图片 对应下标(次序) 0)
self.OurImages.image = [UIImage imageNamed:@"001 (1).jpg"];
self.currentIndex = 0;
# 创建 并 添加两个手势 左滑右滑
# 注意: 这个手势 默认属性direction(方向)只有向右滑动 所以要为左滑动更改下属性 向右是默认 可以不改
UISwipeGestureRecognizer *left = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(leftAction:)];
left.direction = UISwipeGestureRecognizerDirectionLeft;
[self.view addGestureRecognizer:left];
UISwipeGestureRecognizer *right = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(rightAction:)];
[self.view addGestureRecognizer:right];
```
```code
# 左滑触及的方法 目的是 上一张照片 给自己定义的方法传参数标记1
- (void)leftAction:(UISwipeGestureRecognizer *)sender
{
[self transitionAnimation:1];
}
# 右滑触及的方法 目的是 下一张照片 给自己定义的方法传参数标记0
- (void)rightAction:(UISwipeGestureRecognizer *)sender
{
[self transitionAnimation:0];
}
上面是主题思路完成 下面就是完成细节的切换 实现滑动触及的方法细节
# 根据传入的参数 切换不同的照片
- (void)transitionAnimation:(BOOL)isNext
{
// 创建转场动画
CATransition *trans = [[CATransition alloc] init];
// 效果 支持的字段参考 上一篇动画的总结
trans.type = @"cube";
if (isNext)
{
trans.subtype = kCATransitionFromRight;
}else
{
trans.subtype = kCATransitionFromLeft;
}
// 动画持续时间
trans.duration = 1.0f;
// 调用得到照片的方法
self.OurImages.image = [self getImage:isNext];
[self.OurImages.layer addAnimation:trans forKey:@"切换照片"];
}
- (UIImage *)getImage:(BOOL)isNext
{
if (isNext)
{
// 当 currentIndex = 1时候 (1+1)%5 = 2; 下一张
self.currentIndex = (self.currentIndex +1)%5;
}else
{
// 当 currentIndex = 1时候 (1-1+5)%5 = 0; 上一张
self.currentIndex = (self.currentIndex - 1 + 5)%5;
}
// 往数组里面添加图片 图片名与下标名对应
NSString *imageName = [NSString stringWithFormat:@"001 (%ld).jpg",self.currentIndex + 1];
return [UIImage imageNamed:imageName];
}
