[控件] LiveChangedImageView

LiveChangedImageView

 

效果

 

说明

切换图片的时候自动根据图片的尺寸进行渐变式切换，效果很不错，使用非常容易。

 

源码

https://github.com/YouXianMing/UI-Component-Collection

//
//  LiveChangedImageView.h
//  LiveImageView
//
//  Created by YouXianMing on 15/5/1.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface LiveChangedImageView : UIView

/**
 *  动画持续时间(默认值为0.3s)
 */
@property (nonatomic)          NSTimeInterval   duration;

/**
 *  原始的图片(只需要赋值一次，重写了setter方法，要注意)
 */
@property (nonatomic, strong)  UIImage         *image;

/**
 *  变化到的图片
 */
@property (nonatomic, strong)  UIImage         *changeToImage;

/**
 *  边框大小
 */
@property (nonatomic)          CGFloat          borderWidth;

/**
 *  边框颜色
 */
@property (nonatomic, strong)  UIColor         *borderColor;

/**
 *  变化时候的动画
 *
 *  @param animated 是否执行动画
 */
- (void)changedAnimation:(BOOL)animated;


/* ==========================
   ----- 简化操作的方法 -----
 ========================== */

/**
 *  便利构造器
 *
 *  @param frame    frame值
 *  @param duration 动画持续时间
 *  @param image    原始的图片
 *
 *  @return 实例对象
 */
+ (instancetype)liveChangedImageViewWithFrame:(CGRect)frame
                                     duration:(NSTimeInterval)duration
                                   startImage:(UIImage *)image;

/**
 *  切换到其他图片
 *
 *  @param image    被切换的图片
 *  @param animated 是否执行动画
 */
- (void)changeToImage:(UIImage *)image animated:(BOOL)animated;

@end

//
//  LiveChangedImageView.m
//  LiveImageView
//
//  Created by YouXianMing on 15/5/1.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "LiveChangedImageView.h"

@interface LiveChangedImageView ()

@property (nonatomic, strong) UIImageView  *imageView;

@end

@implementation LiveChangedImageView

/**
 *  创建出imageView
 *
 *  @param frame imageView的frame值
 */
- (void)createImageView:(CGRect)frame {

    self.imageView = [[UIImageView alloc] initWithFrame:frame];
    [self addSubview:self.imageView];
    
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
       
        [self createImageView:self.bounds];
        
        self.duration = 0.3f;
        
    }
    return self;
}


- (void)changedAnimation:(BOOL)animated {
    
    if (_changeToImage == nil) {
        return;
    }
    
    // 如果设定了动画
    if (animated) {
        
        // 设定切换动画
        CABasicAnimation *contentsAnimation = [CABasicAnimation animationWithKeyPath:@"contents"];
        contentsAnimation.duration          = _duration;
        contentsAnimation.fromValue         = (__bridge id)(_imageView.image.CGImage);
        contentsAnimation.toValue           = (__bridge id)(_changeToImage.CGImage);
        _imageView.layer.contents           = (__bridge id)(_changeToImage.CGImage);
        
        // 设定尺寸动画
        CGRect startRect = CGRectMake(0, 0, _imageView.image.size.width, _imageView.image.size.height);
        CGRect endRect   = CGRectMake(0, 0, _changeToImage.size.width, _changeToImage.size.height);
        
        CABasicAnimation *boundsAnimation = [CABasicAnimation animationWithKeyPath:@"bounds"];
        boundsAnimation.duration          = _duration;
        boundsAnimation.fromValue         = [NSValue valueWithCGRect:startRect];
        boundsAnimation.toValue           = [NSValue valueWithCGRect:endRect];
        _imageView.layer.bounds           = endRect;
        
        // 动画组
        CAAnimationGroup *group = [CAAnimationGroup animation];
        group.duration          = _duration;
        group.animations        = @[contentsAnimation, boundsAnimation];
        group.delegate          = self;
        
        // 加载动画
        [_imageView.layer addAnimation:group forKey:nil];
        
    } else {
    
        _imageView.image  = _changeToImage;
        _imageView.bounds = CGRectMake(0, 0, _changeToImage.size.width, _changeToImage.size.height);
        
    }
}

#pragma mark - 动画代理
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    _imageView.image = _changeToImage;
}

+ (instancetype)liveChangedImageViewWithFrame:(CGRect)frame
                                     duration:(NSTimeInterval)duration
                                   startImage:(UIImage *)image {
    LiveChangedImageView *changedView = [[LiveChangedImageView alloc] initWithFrame:frame];
    changedView.image                 = image;
    changedView.duration              = duration;
    
    return changedView;
}

- (void)changeToImage:(UIImage *)image animated:(BOOL)animated {
    self.changeToImage = image;
    [self changedAnimation:animated];
}

#pragma mark - 重写setter，getter方法
@synthesize image = _image;
- (void)setImage:(UIImage *)image {
    _image            = image;
    _imageView.image  = image;
    _imageView.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
}

- (UIImage *)image {
    return _imageView.image;
}

@synthesize borderColor = _borderColor;
- (void)setBorderColor:(UIColor *)borderColor {
    _imageView.layer.borderColor = borderColor.CGColor;
    _borderColor                 = borderColor;
}

- (UIColor *)borderColor {
    return _borderColor;
}

@synthesize borderWidth = _borderWidth;
- (void)setBorderWidth:(CGFloat)borderWidth {
    _imageView.layer.borderWidth = borderWidth;
    _borderWidth                 = borderWidth;
}

- (CGFloat)borderWidth {
    return _borderWidth;
}

@end

 

设计细节