TranformFadeView

效果圖:

?

源碼地址:

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

?

注意:

maskView是iOS8中新出的,用以簡化alpha遮罩的操作,與layer的mask是一回事,想要修改兼容的,請考慮使用layer的mask來滿足你的需求.

?

特點:

* 方塊的個數可以自己設定

* 你可以實現你自己的策略來設定漸變消失的方式

?

核心源碼:

// // TranformFadeView.h // TransformationFadeView // // Created by XianMingYou on 15/4/16. // Copyright (c) 2015年 XianMingYou. All rights reserved. // #import <UIKit/UIKit.h>@interface TranformFadeView : UIView/*** Image顯示方式*/ @property (nonatomic) UIViewContentMode contentMode;/*** 要顯示的相片*/ @property (nonatomic, strong) UIImage *image;/*** 垂直方向方塊的個數*/ @property (nonatomic) NSInteger verticalCount;/*** 水平方向方塊的個數*/ @property (nonatomic) NSInteger horizontalCount;/*** 開始構造出作為mask用的view*/ - (void)buildMaskView;/*** 漸變動畫的時間*/ @property (nonatomic) NSTimeInterval fadeDuradtion;/*** 兩個動畫之間的時間間隔*/ @property (nonatomic) NSTimeInterval animationGapDuration;/*** 開始隱藏動畫** @param animated 是否執行動畫*/ - (void)fadeAnimated:(BOOL)animated;/*** 開始顯示動畫** @param animated 時候執行動畫*/ - (void)showAnimated:(BOOL)animated;@end // // TranformFadeView.m // TransformationFadeView // // Created by XianMingYou on 15/4/16. // Copyright (c) 2015年 XianMingYou. All rights reserved. // #import "TranformFadeView.h"#define STATR_TAG 0x19871220@interface TranformFadeView ()/*** 圖片*/ @property (nonatomic, strong) UIImageView *imageView;/*** 所有的maskView*/ @property (nonatomic, strong) UIView *allMaskView;/*** maskView的個數*/ @property (nonatomic) NSInteger maskViewCount;/*** 存儲maskView的編號*/ @property (nonatomic, strong) NSMutableArray *countArray;@end@implementation TranformFadeView/*** 初始化并添加圖片** @param frame frame值*/ - (void)initImageViewWithFrame:(CGRect)frame {self.imageView = [[UIImageView alloc] initWithFrame:frame];self.imageView.layer.masksToBounds = YES;[self addSubview:self.imageView]; }- (instancetype)initWithFrame:(CGRect)frame {if (self = [super initWithFrame:frame]) {[self initImageViewWithFrame:self.bounds];}return self; }- (void)buildMaskView {/*** 如果沒有,就返回空*/if (self.horizontalCount < 1 || self.verticalCount < 1) {return;}// 承載所有的maskViewself.allMaskView = [[UIView alloc] initWithFrame:self.bounds];self.maskView = self.allMaskView;// 計算出每個view的尺寸CGFloat height = self.frame.size.height;CGFloat width = self.frame.size.width;CGFloat maskViewHeight = self.verticalCount <= 1 ? height : (height / self.verticalCount);CGFloat maskViewWidth = self.horizontalCount <= 1 ? width : (width / self.horizontalCount);// 用以計數int count = 0;// 先水平循環,再垂直循環for (int horizontal = 0; horizontal < self.horizontalCount; horizontal++) {for (int vertical = 0; vertical < self.verticalCount; vertical++) {CGRect frame = CGRectMake(maskViewWidth * horizontal,maskViewHeight * vertical,maskViewWidth,maskViewHeight);UIView *maskView = [[UIView alloc] initWithFrame:frame];maskView.frame = frame;maskView.tag = STATR_TAG + count;maskView.backgroundColor = [UIColor blackColor];[self.allMaskView addSubview:maskView];count++;}}self.maskViewCount = count;// 存儲self.countArray = [NSMutableArray array];for (int i = 0; i < self.maskViewCount; i++) {[self.countArray addObject:@(i)];} }/*** 策略模式一** @param inputNumber 輸入** @return 輸出*/ - (NSInteger)strategyNormal:(NSInteger)inputNumber {NSNumber *number = self.countArray[inputNumber];return number.integerValue; }- (void)fadeAnimated:(BOOL)animated {if (animated == YES) {for (int i = 0; i < self.maskViewCount; i++) {UIView *tmpView = [self maskViewWithTag:[self strategyNormal:i]];[UIView animateWithDuration:(self.fadeDuradtion <= 0.f ? 1.f : self.fadeDuradtion)delay:i * (self.animationGapDuration <= 0.f ? 0.2f : self.animationGapDuration)options:UIViewAnimationOptionCurveLinearanimations:^{tmpView.alpha = 0.f;} completion:^(BOOL finished) {}];}} else {for (int i = 0; i < self.maskViewCount; i++) {UIView *tmpView = [self maskViewWithTag:i];tmpView.alpha = 0.f;}} }- (void)showAnimated:(BOOL)animated {if (animated == YES) {for (int i = 0; i < self.maskViewCount; i++) {UIView *tmpView = [self maskViewWithTag:[self strategyNormal:i]];[UIView animateWithDuration:(self.fadeDuradtion <= 0.f ? 1.f : self.fadeDuradtion)delay:i * (self.animationGapDuration <= 0.f ? 0.2f : self.animationGapDuration)options:UIViewAnimationOptionCurveLinearanimations:^{tmpView.alpha = 1.f;} completion:^(BOOL finished) {}];}} else {for (int i = 0; i < self.maskViewCount; i++) {UIView *tmpView = [self maskViewWithTag:i];tmpView.alpha = 1.f;}}}/*** 根據tag值獲取maskView** @param tag maskView的tag值** @return tag值對應的maskView*/ - (UIView *)maskViewWithTag:(NSInteger)tag {return [self.maskView viewWithTag:tag + STATR_TAG]; }/* 重寫setter,getter方法 */@synthesize contentMode = _contentMode; - (void)setContentMode:(UIViewContentMode)contentMode {_contentMode = contentMode;self.imageView.contentMode = contentMode; } - (UIViewContentMode)contentMode {return _contentMode; }@synthesize image = _image; - (void)setImage:(UIImage *)image {_image = image;self.imageView.image = image; } - (UIImage *)image {return _image; }@end

需要注意的細節:

?

總結

以上是生活随笔為你收集整理的[控件] TranformFadeView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。