iOS 七巧板动画

前言

之前做过很多项目，一般项目的首页大多采用了类似九宫格的设计。在这次项目中，为了让项目更炫，首页的设计采用了七巧板的设计，还加上了动画。一开始感觉比较难做，但是掌握了思路做起来也只是时间问题。利用CAShapeLayer和UIBezierPath画出不规则的矩形，然后通过点击手势添加点击方法，最后再加上动画效果。

核心代码

1、基类

#import "TangramBaseView.h"

@implementation TangramBaseView

- (void)setMaskWithUIBezierPath:(UIBezierPath *)bezierPath
{
    //蒙板
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = [bezierPath CGPath];
    maskLayer.fillColor = [[UIColor redColor] CGColor];
    maskLayer.frame = self.bounds;
    self.layer.mask = maskLayer;

    //边框蒙板
    CAShapeLayer *maskBorderLayer = [CAShapeLayer layer];
    maskBorderLayer.path = [bezierPath CGPath];
    maskBorderLayer.fillColor = [[UIColor clearColor] CGColor];
    maskBorderLayer.strokeColor = self.backgroundColor.CGColor;//边框颜色
    maskBorderLayer.lineWidth = 1; //边框宽度
    [self.layer addSublayer:maskBorderLayer];
}

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
    BOOL result = [self.path containsPoint:point];
    return result;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    if (self.isClicked) {
        self.isClicked(self);
    }
}

2、实现效果

#define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height
#define kQtRate SCREEN_HEIGHT/SCREEN_WIDTH

#import "ViewController.h"
#import "TangramBaseView.h"
#import "FirstTangramView.h"
#import "SecondTangramView.h"
#import "ThirdTangramView.h"
#import "ForthTangramView.h"
#import "FifthTangramView.h"
#import "SixthTangramView.h"
#import "SeventhTangramView.h"
#import "DetailViewController.h"

@interface ViewController ()
{
    FirstTangramView *firstTangramView;
    SecondTangramView *secondTangramView;
    ThirdTangramView *thirdTangramView;
    ForthTangramView *forthTangramView;
    FifthTangramView *fifthTangramView;
    SixthTangramView *sixthTangramView;
    SeventhTangramView *seventhTangramView;
}

@end

@implementation ViewController

- (void)viewWillAppear:(BOOL)animated
{
    [self.navigationController setNavigationBarHidden:YES];
}

- (void)viewDidDisappear:(BOOL)animated
{
    firstTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    secondTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    thirdTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    forthTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    fifthTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    sixthTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    seventhTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}

- (void)viewDidLoad {
    [super viewDidLoad];

     self.view.backgroundColor = [UIColor whiteColor];

    firstTangramView = [[FirstTangramView alloc] initWithFrame:self.view.bounds];
    secondTangramView = [[SecondTangramView alloc] initWithFrame:self.view.bounds];
    thirdTangramView = [[ThirdTangramView alloc] initWithFrame:self.view.bounds];
    forthTangramView = [[ForthTangramView alloc] initWithFrame:self.view.bounds];
    fifthTangramView = [[FifthTangramView alloc] initWithFrame:self.view.bounds];
    sixthTangramView = [[SixthTangramView alloc] initWithFrame:self.view.bounds];
    seventhTangramView = [[SeventhTangramView alloc] initWithFrame:self.view.bounds];

    [self.view addSubview:firstTangramView];
    [self.view addSubview:secondTangramView];
    [self.view addSubview:thirdTangramView];
    [self.view addSubview:forthTangramView];
    [self.view addSubview:fifthTangramView];
    [self.view addSubview:sixthTangramView];
    [self.view addSubview:seventhTangramView];

    [self linearIn];


    __block ViewController *blockSelf = self;

    firstTangramView.isClicked = ^ (id result){
        [blockSelf linearOutIndex:1 withView:result];
    };

    secondTangramView.isClicked = ^ (id result){
        [blockSelf linearOutIndex:2 withView:result];
    };

    thirdTangramView.isClicked = ^(id result){
        [blockSelf linearOutIndex:3 withView:result];
    };

    forthTangramView.isClicked = ^(id result){
        [blockSelf linearOutIndex:4 withView:result];
    };

    fifthTangramView.isClicked = ^(id result){
        [blockSelf linearOutIndex:5 withView:result];
    };

    sixthTangramView.isClicked = ^(id result){
        [blockSelf linearOutIndex:6 withView:result];
    };

    seventhTangramView.isClicked = ^(id result){
        [blockSelf linearOutIndex:7 withView:result];
    };
}

- (void)linearIn
{
    firstTangramView.frame = CGRectMake(-SCREEN_WIDTH, -SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
    secondTangramView.frame = CGRectMake(0, -SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
    thirdTangramView.frame = CGRectMake(-2*SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    forthTangramView.frame = CGRectMake(-SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    fifthTangramView.frame = CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    sixthTangramView.frame = CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    seventhTangramView.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);

    [UIView animateWithDuration:3.0f
                     animations:^{
                         firstTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         secondTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         thirdTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         forthTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         fifthTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         sixthTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         seventhTangramView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                     }];

}

- (void)linearOutIndex:(NSInteger)index withView:(UIView *)view
{
    self.view.backgroundColor = view.backgroundColor;

    [UIView animateWithDuration:1.0f
                     animations:^{

                         if (index != 1) {
                             firstTangramView.frame = CGRectMake(-SCREEN_WIDTH, -SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
                         }

                         if (index != 2) {
                              secondTangramView.frame = CGRectMake(0, -SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
                         }

                         if (index != 3) {
                             thirdTangramView.frame = CGRectMake(-2*SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         }

                         if (index != 4) {
                             forthTangramView.frame = CGRectMake(-SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         }

                         if (index != 5) {
                             fifthTangramView.frame = CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         }

                         if (index != 6) {
                             sixthTangramView.frame = CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                         }

                         if (index != 7) {
                             seventhTangramView.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
                         }
                     }
                     completion:^(BOOL finished) {

                         DetailViewController *detailVC = [[DetailViewController alloc] init];
                         detailVC.backgroundColor = view.backgroundColor;
                         detailVC.title = [NSString stringWithFormat:@"七巧板%ld",(long)index];
                         [self.navigationController pushViewController:detailVC animated:YES];
                     }];

}

@end

效果图

github下载