【iOS】百叶窗动画

上周一个朋友问我会不会做百叶窗动画效果。当时一看，感觉还不会。但是想想刚好前两天做了图片的切割，百叶窗是不是就是把一个图片切割之后，再每个一起做转动的动画效果呢？经过测试，发现就是这个思路就可以做出来。下面先看效果。



代码部分就是在上一篇《【iOS】Quartz 2D图片压缩和裁剪》的基础上增加一些功能。所以关于图片裁剪部分的代码就不贴出来了。大家想看可以直接下载全部的工程代码。

下载请点击我。

下面就只贴百叶窗部分的代码。注释里面都有说明功能了。

//
//  BlindUnit.h
//  BYC
//
//  Copyright © 2016年 zhuming. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@protocol BlindDelegate <NSObject>

@optional
/**
*  百叶窗动画开始实现的代理方法
*/
- (void)blindStartAnimation;
/**
*  百叶窗动画完成后实现的代理方法
*/
- (void)blindFinishedAnimation;

@end

@interface BlindUnit : NSObject

@property (nonatomic,strong)id<BlindDelegate>delegate;

/**
*  父视图
*/
@property (nonatomic,strong)UIView *superView;
/**
*  百叶窗转动的动画
*/
@property (nonatomic,strong)UIImage *image;
/**
*  水平切割的数量
*/
@property (nonatomic,assign)NSInteger separateCount;
/**
*  切割的质量 0~1之间
*/
@property (nonatomic,assign)CGFloat cacheQuality;
/**
*  动画得时间
*/
@property (nonatomic,assign)CFTimeInterval duration;

/**
*  减方法 有动画完成的代理
*/
- (void)blindAnimation;

/**
*  百叶窗
*  无代理
*  @param superView 父视图
*  @param image     需要变化的图片
*  @param x         多少个叶
*  @param quality   切割的质量 0~1之间
*  @param duration  动画的时间
*/
+ (void)blindAnimationInSuperView:(UIView *)superView image:(UIImage *)image separate:(NSInteger)x cacheQuality:(CGFloat)quality duration:(CFTimeInterval)duration;

@end
<pre name="code" class="objc">//
//  BlindUnit.m
//  BYC
//
//  Created by zhuming on 16/1/9.
//  Copyright © 2016年 zhuming. All rights reserved.
//

#import "BlindUnit.h"
#import "ToolUnit.h"

@interface BlindUnit ()

@property (nonatomic,assign)NSInteger startCount;
@property (nonatomic,assign)NSInteger endCount;

@end

@implementation BlindUnit

/**
*  百叶窗动画
*/
- (void)blindAnimation{
NSDictionary *dice = [ToolUnit separateImage:self.image separate:self.separateCount cacheQuality:self.cacheQuality];
// 百叶窗动画
CABasicAnimation *rotation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
rotation.duration = self.duration;
rotation.fromValue = [NSNumber numberWithFloat:0];    // 从0°开始
rotation.toValue = [NSNumber numberWithFloat:M_PI_2]; // 转动180°
rotation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
rotation.autoreverses = YES;  // 翻转后是否反向翻转
rotation.repeatCount = 1;    // 循环次数
rotation.delegate = self;    // 动画代理
NSArray *keys=[dice allKeys];
for (int count = 0; count < self.separateCount; count++)
{
NSString *key=[keys objectAtIndex:count];
UIImageView *imageView=[dice objectForKey:key];
[imageView.layer addAnimation:rotation forKey:@"rotation"];
[self.superView addSubview:imageView];
}
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
// 原系统代理会多次执行 执行次数就是图片分割的数量
self.endCount ++;
if ((self.separateCount - 1) == self.endCount) {
//代理
if (_delegate && [_delegate respondsToSelector:@selector(blindFinishedAnimation)]) {
[_delegate blindFinishedAnimation];
}
}
}
- (void)animationDidStart:(CAAnimation *)anim{
// 原系统代理会多次执行 执行次数就是图片分割的数量
if (self.startCount == 0) {
//代理
if (_delegate && [_delegate respondsToSelector:@selector(blindStartAnimation)]) {
[_delegate blindStartAnimation];
}
}
self.startCount ++;
}

/**
*  百叶窗
*
*  @param superView 父视图
*  @param image     需要变化的图片
*  @param x         多少个叶
*  @param quality   切割的质量 0~1之间
*  @param duration  动画的时间
*/
+ (void)blindAnimationInSuperView:(UIView *)superView image:(UIImage *)image separate:(NSInteger)x cacheQuality:(CGFloat)quality duration:(CFTimeInterval)duration{

NSDictionary *dice = [ToolUnit separateImage:image separate:x cacheQuality:quality];
// 百叶窗动画
CABasicAnimation *rotation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
rotation.duration = duration;
rotation.fromValue = [NSNumber numberWithFloat:0];    // 从0°开始
rotation.toValue = [NSNumber numberWithFloat:M_PI_2]; // 转动180°
rotation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
rotation.autoreverses = NO;  // 翻转后是否反向翻转
rotation.repeatCount = 1;    // 循环次数
NSArray *keys=[dice allKeys];
for (int count = 0; count < x; count++)
{
NSString *key=[keys objectAtIndex:count];
UIImageView *imageView=[dice objectForKey:key];
[imageView.layer addAnimation:rotation forKey:@"rotation"];
[superView addSubview:imageView];
}
}

@end

//  ViewController.m
//  BlindTest
//
//  Created by zhuming on 16/1/10.
//  Copyright (c) 2016年 zhuming. All rights reserved.
//

#import "ViewController.h"

#import "BlindUnit.h"
#import "ToolUnit.h"

@interface ViewController ()<BlindDelegate>

@property (nonatomic,strong)UIImage *image1;
@property (nonatomic,strong)UIImage *image2;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
self.image1 = [UIImage imageNamed:@"1"];
self.image2 = [UIImage imageNamed:@"2"];
self.view.backgroundColor = [UIColor orangeColor];
[self test];

[ToolUnit compressImage:self.image2 percent:0.2];
// Do any additional setup after loading the view, typically from a nib.
}

- (void)test{

//    [BlindUnit blindAnimationInSuperView:self.view image:image separate:15 cacheQuality:1 duration:3];

BlindUnit *blindView = [[BlindUnit alloc] init];
blindView.superView = self.view;
blindView.image = self.image1;
blindView.separateCount = 12;
blindView.cacheQuality = 1;
blindView.duration = 3;
blindView.delegate = self;
[blindView blindAnimation];
}

- (void)blindFinishedAnimation{
NSLog(@"blindFinishedAnimation");
}
- (void)blindStartAnimation{
NSLog(@"blindStartAnimation");
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

代码没什么好分析的了，有了思路就好做了。