[控件] 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(, , _imageView.image.size.width, _imageView.image.size.height);
        CGRect endRect   = CGRectMake(, , _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(, , _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(, , 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

设计细节