图片碎片化mask动画

// 图片2 self.tranformFadeViewTwo = [[TranformFadeView alloc] initWithFrame:self.view.bounds]; self.tranformFadeViewTwo.contentMode = UIViewContentModeScaleAspectFill; self.tranformFadeViewTwo.verticalCount = 2; self.tranformFadeViewTwo.horizontalCount = 12; self.tranformFadeViewTwo.center = self.view.center; [self.tranformFadeViewTwo buildMaskView]; self.tranformFadeViewTwo.fadeDuradtion = 1.f; self.tranformFadeViewTwo.animationGapDuration = 0.1f; [self.view addSubview:self.tranformFadeViewTwo]; [self.tranformFadeViewTwo fadeAnimated:YES]; // timer self.timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]]; [self.timer event:^{ if (self.type == TYPE_ONE) { self.type = TYPE_TWO; [self.view sendSubviewToBack:self.tranformFadeViewTwo]; self.tranformFadeViewTwo.image = [self currentImage]; [self.tranformFadeViewTwo showAnimated:NO]; [self.tranformFadeViewOne fadeAnimated:YES]; } else { self.type = TYPE_ONE; [self.view sendSubviewToBack:self.tranformFadeViewOne]; self.tranformFadeViewOne.image = [self currentImage]; [self.tranformFadeViewOne showAnimated:NO]; [self.tranformFadeViewTwo fadeAnimated:YES]; } timeIntervalWithSecs:6]; [self.timer start]; - (UIImage *)currentImage { self.count = ++self.count % self.images.count; return self.images[self.count]; @end

//

// 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;

@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;

 // 承载所有的maskView

 self.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:UIViewAnimationOptionCurveLinear

 animations:^{

 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:UIViewAnimationOptionCurveLinear

 animations:^{

 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];

#pragma mark - 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

细节

使用的时候动态切换图片就可以了，实际上只需要创建出2个view.

Android性能优化 | 大图做帧动画卡？优化帧动画之 SurfaceView滑动窗口式帧复用 继上篇用“SurfaceView逐帧解析&帧复用”优化了帧动画内存性能后，一个更复杂的问题浮出水面：帧动画时间性能。这一篇试着让每帧素材大小 1MB 的帧动画流畅播放的同时不让内存膨胀。