iOS-小Demo--动画效果实例切换图片

一年春好处,不在浓芳,小艳疏香,最娇软<不良蛙>

---

动画切换图片的效果

上面是效果图:

• 代码实现部分:
  定义两个属性

# 定义一个放照片的  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];
}

动画总结参考: