LiveChangedImageView

[控件] LiveChangedImageView-LMLPHP

效果

[控件] LiveChangedImageView-LMLPHP

说明

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

源码

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

设计细节

[控件] LiveChangedImageView-LMLPHP

[控件] LiveChangedImageView-LMLPHP

05-11 22:43