【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

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