不规则形状的Mask动画

效果

源码

https://github.com/YouXianMing/Animations

//
// MaskShapeViewController.m
// Animations
//
// Created by YouXianMing on 16/7/10.
// Copyright © 2016年 YouXianMing. All rights reserved.
// #import "MaskShapeViewController.h"
#import "AppleSystemService.h"
#import "JSAnimatedImagesView.h"
#import "CutOutClearView.h"
#import "UIView+SetRect.h"
#import "UIFont+Fonts.h"
#import "FBShimmeringView.h" typedef enum : NSUInteger { kUpJsView = ,
kDownJsView, } EMaskShapeViewControllerValue; @interface MaskShapeViewController () <JSAnimatedImagesViewDataSource> @property (nonatomic, strong) JSAnimatedImagesView *upJsView;
@property (nonatomic, strong) NSArray *upDataSource; @property (nonatomic, strong) JSAnimatedImagesView *downJsView;
@property (nonatomic, strong) NSArray *downDataSource; @end @implementation MaskShapeViewController - (void)setup { [super setup]; self.backgroundView.backgroundColor = [UIColor blackColor]; CGFloat gap = .f;
CGFloat offset = .f; {
CutOutClearView *areaView = [[CutOutClearView alloc] initWithFrame:CGRectMake(, , Width, self.contentView.height / .f + offset - gap)];
areaView.fillColor = [UIColor clearColor];
areaView.areaColor = [UIColor blackColor]; UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(gap, gap)];
[path addLineToPoint:CGPointMake(Width - gap, gap)];
[path addLineToPoint:CGPointMake(Width - gap, areaView.height)];
[path addLineToPoint:CGPointMake(gap, areaView.height - (offset - gap) * - gap)];
[path closePath];
areaView.paths = @[path]; self.upDataSource = @[[UIImage imageNamed:@""],
[UIImage imageNamed:@""],
[UIImage imageNamed:@""],
[UIImage imageNamed:@""],
[UIImage imageNamed:@""]]; self.upJsView = [[JSAnimatedImagesView alloc] initWithFrame:CGRectMake(, , Width, self.contentView.height / .f + offset - gap)];
self.upJsView.transitionDuration = .f;
self.upJsView.tag = kUpJsView;
self.upJsView.dataSource = self;
self.upJsView.layer.masksToBounds = YES;
self.upJsView.maskView = areaView;
[self.contentView addSubview:self.upJsView];
} {
CutOutClearView *areaView = [[CutOutClearView alloc] initWithFrame:CGRectMake(, , Width, self.contentView.height / .f + (offset - gap))];
areaView.fillColor = [UIColor clearColor];
areaView.areaColor = [UIColor blackColor]; UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(gap, )];
[path addLineToPoint:CGPointMake(gap, areaView.height - gap)];
[path addLineToPoint:CGPointMake(Width - gap, areaView.height - gap)];
[path addLineToPoint:CGPointMake(Width - gap, (offset - gap) * + gap)];
[path closePath];
areaView.paths = @[path]; self.downDataSource = @[[UIImage imageNamed:@"pic_1"],
[UIImage imageNamed:@"pic_2"],
[UIImage imageNamed:@"pic_3"],
[UIImage imageNamed:@"pic_4"]]; self.downJsView = [[JSAnimatedImagesView alloc] initWithFrame:CGRectMake(, , Width, self.contentView.height / .f + offset - gap)];
self.downJsView.transitionDuration = .f;
self.downJsView.tag = kDownJsView;
self.downJsView.dataSource = self;
self.downJsView.layer.masksToBounds = YES;
self.downJsView.maskView = areaView; self.downJsView.bottom = self.contentView.height;
[self.contentView addSubview:self.downJsView];
}
} #pragma mark - JSAnimatedImagesViewDataSource - (NSUInteger)animatedImagesNumberOfImages:(JSAnimatedImagesView *)animatedImagesView { NSUInteger count = ;
animatedImagesView.tag == kUpJsView ? (count = self.upDataSource.count) : (count = self.downDataSource.count); return count;
} - (UIImage *)animatedImagesView:(JSAnimatedImagesView *)animatedImagesView imageAtIndex:(NSUInteger)index { UIImage *image = nil;
animatedImagesView.tag == kUpJsView ? (image = self.upDataSource[index]) : (image = self.downDataSource[index]); return image;
} #pragma mark - Overwrite methods. - (void)buildTitleView { [super buildTitleView]; // Title label.
UILabel *headlinelabel = [UILabel new];
headlinelabel.font = [UIFont HeitiSCWithFontSize:.f];
headlinelabel.textAlignment = NSTextAlignmentCenter;
headlinelabel.textColor = [UIColor cyanColor];
headlinelabel.text = self.title;
[headlinelabel sizeToFit]; headlinelabel.center = self.titleView.middlePoint; FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:self.titleView.bounds];
shimmeringView.shimmering = YES;
shimmeringView.shimmeringBeginFadeDuration = 0.3;
shimmeringView.shimmeringOpacity = 0.1f;
shimmeringView.shimmeringAnimationOpacity = .f;
[self.titleView addSubview:shimmeringView]; shimmeringView.contentView = headlinelabel; // Line.
UIView *line = [[UIView alloc] initWithFrame:CGRectMake(, 63.5, self.view.width, 0.5f)];
line.backgroundColor = [[UIColor grayColor] colorWithAlphaComponent:0.25f];
[self.titleView addSubview:line];
[self.titleView addSubview:headlinelabel]; // Back button.
UIImage *image = [UIImage imageNamed:@"backIconVer2"];
UIButton *backButton = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
backButton.center = CGPointMake(, self.titleView.middleY);
[backButton setImage:image forState:UIControlStateNormal];
[backButton addTarget:self action:@selector(popSelf) forControlEvents:UIControlEventTouchUpInside];
[backButton.imageView setContentMode:UIViewContentModeCenter];
[self.titleView addSubview:backButton];
} - (void)popSelf { [self popViewControllerAnimated:YES];
} @end

细节

//
// CutOutClearView.h
// Animations
//
// Created by YouXianMing on 16/7/10.
// Copyright © 2016年 YouXianMing. All rights reserved.
// #import <UIKit/UIKit.h> @interface CutOutClearView : UIView /**
* The total fill color, you can used it as the view's background color.
*/
@property (nonatomic, strong) UIColor *fillColor; /**
* The paths area color.
*/
@property (nonatomic, strong) UIColor *areaColor; /**
* Path array.
*/
@property (nonatomic, strong) NSArray <UIBezierPath *> *paths; @end
//
// CutOutClearView.m
// Animations
//
// Created by YouXianMing on 16/7/10.
// Copyright © 2016年 YouXianMing. All rights reserved.
// #import "CutOutClearView.h" @implementation CutOutClearView - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { self.fillColor = [UIColor whiteColor];
self.backgroundColor = [UIColor clearColor];
self.opaque = NO;
} return self;
} - (void)drawRect:(CGRect)rect { [super drawRect:rect]; [self.fillColor setFill];
UIRectFill(rect); CGContextRef context = UIGraphicsGetCurrentContext(); if (self.areaColor && self.paths.count) { UIBezierPath *path = nil; for (int i = ; i < self.paths.count; i++) { i == ? path = self.paths[i] : [path appendPath:self.paths[i]];
} CGFloat red = ;
CGFloat green = ;
CGFloat blue = ;
CGFloat alpha = ;
[self.areaColor getRed:&red green:&green blue:&blue alpha:&alpha]; CGContextAddPath(context, path.CGPath);
CGContextSetRGBFillColor(context, red, green, blue, alpha);
CGContextFillPath(context); } else { for (UIBezierPath *path in self.paths) { CGContextAddPath(context, path.CGPath);
CGContextSetBlendMode(context, kCGBlendModeClear);
CGContextFillPath(context);
}
}
} @end

不规则形状的Mask动画的更多相关文章

  1. 使用Win32 API创建不规则形状&amp;带透明色的窗口

    前一阵突然想起了9月份电面某公司实习时的二面题,大概就是说怎么用Win32 API实现一个透明的窗口,估计当时我的脑残答案肯定让面试官哭笑不得吧.所以本人决定好好研究下这个问题.经过一下午的摸索,基本 ...

  2. cocos2d-x 不规则形状按钮的点击判定

    cocos2d-x 不规则形状按钮的点击判定 原理: 1.OpeGL ES提供了glReadPixels[^footnote]函数,来获取当前framebuffer上的像素数据 2.cocos2d-x ...

  3. 图片碎片化mask动画

    图片碎片化mask动画 效果 源码 https://github.com/YouXianMing/Animations // // TransformFadeViewController.m // A ...

  4. Unity---动画系统学习(6)---Avatar Mask动画融合、Layers动画分层、IK反向动力学

    1. 介绍 Avatar Mask(动画融合) 前面我们一直介绍的都是动画混合,一般用于解决边跑边转弯的问题.而动画融合一般用于解决例如边跑边挥手的问题. 简单说就是让跑步去控制腿的骨骼,挥手控制手的 ...

  5. html5 svg实现不规则形状图片触发事件

    html5 svg实现不规则形状图片触发事件<pre><!DOCTYPE html><html lang="en"> <head> ...

  6. 不规则形状的Ifc构件顶点坐标获取

    不规则形状的Ifc构件顶点坐标获取 今天有人问我,ifc构件的顶点坐标怎么获取,自己前年的时候写过类似的程序,但有点记不清了,最近一直用C++解析ifc,慎重起见,还是重新再写一次,java版本的获取 ...

  7. Unity 制作不规则形状button

    在游戏开发中,我们有时需要制作不规则形状的按键. Unity3d中使用UGUI的Button控件只能实现规则的长方形按钮.而通过给Button的Image组件添加对应的贴图(sprite)我们可以实现 ...

  8. 动效解析工厂:Mask 动画

    转载自:http://www.cocoachina.com/ios/20160214/15250.html 前言:很多动效都是多种动画的组合,有时候你可能只是需要其中某个动画,但面对庞杂的代码库或是教 ...

  9. pyqt 不规则形状窗口显示

    #coding=utf- import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QWidget, QApplicatio ...

随机推荐

  1. SwipeRefreshLayout + RecyclerView 实现 上拉刷新 和 下拉刷新

    下拉刷新和上拉刷新都用SwipeRefreshLayout 自带的进度条 布局 <?xml version="1.0" encoding="utf-8"? ...

  2. Linux 指令。

    从16年11月21号开始吧,加班变得特别频繁,基本上一周加5天,周六也会加,下班也很晚,一般都是10点9点,回家之后很疲惫,已经很久没有给自己充过电了,自己的学习计划和健身计划也打乱了,对工作的压力也 ...

  3. 关于window.onload

    window.onload是当文档加载完成后执行. <script>之间的代码会在代码加载到此处执行.function内的代码是调用时才执行. 但window.onload有个坏处,它非要 ...

  4. python or not python

    python or not python 我挺喜欢 python 这种编程语言,它本身的丰富的动态特性让这种语言的表达能力很强,基本上 python 上写的一行代码,可实现 java 上 1.5 到 ...

  5. weblogic下 微信公众平台获取token报错

    问题描述: 开发微信公众平台,本地tomcat可以正常获取token并发送模板消息,部署在weblogic后报错,异常信息如下: java.security.InvalidKeyException: ...

  6. 创建组合索引SQL从1个多小时到1S的案例

    select aa.acct_org, aa.loan_acct_no, aa.FUNCTIONARY, aa.cust_no, sum(dwm.pkg_tools.currcdtran(bb.INT ...

  7. Oracle的分页查询语句优化

    Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. (一)   分页查询格式: SELECT * FROM  ( SELECT A.*, ROWNUM RN  FROM (SELECT ...

  8. &lt;p&gt;&lt;/p&gt;标签为什么不能包含块级标签?还有哪些特殊的HTML标签?

    最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...

  9. jmeter远程分布执行遇到的网卡坑(A Test is currently running,stop or ....)

    周末加班做一个项目app的性能测试,单机负载时由于公司给每个人的网络带宽上传下载流量就1M,300个用户并发就已经网络IO饱和了,虽然和相关部门协调过资源问题,但是收效甚微,因此打算先用分布部署压力机 ...

  10. SSRS2008中控件ID冲突问题

    [BC30179] class"textbox21_TextBoxExprHost"和 class"Textbox21_TextBoxExprHost"在 cl ...