Irregular Mask animation and mask Animation

Irregular Mask animation and mask Animation

Irregular Mask Animation

 

Effect

 

Source code

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 = 1000, kDownJsView,} EMaskShapeViewControllerValue; @ interface MaskShapeViewController () <JSAnimatedImagesViewDataSour Ce> @ property (nonatomic, strong) JSAnimatedImagesView * upJsView; @ property (nonatomic, strong) NSArray * upDataSource; @ property (nonatomic, strong) implements * downJsView; @ property (nonatomic, strong) NSArray * downDataSource; @ end @ implementation MaskShapeViewController-(void) setup {[super setup]; self. backgroundView. backgroundColor = [UIColor blackColor]; CGFloat gap = 4.f; CGFloat offset = 50.f; {CutOutClearView * areaView = [[CutOutClearView alloc] initWithFrame: CGRectMake (0, 0, Width, self. contentView. height/2.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) * 2-gap)]; [path closePath]; areaView. paths = @ [path]; self. upDataSource = @ [[UIImage imageNamed: @ "1"], [UIImage imageNamed: @ "2"], [UIImage imageNamed: @ "3"], [UIImage imageNamed: @ "4"], [UIImage imageNamed: @ "5"]; self. upJsView = [[JSAnimatedImagesView alloc] initWithFrame: CGRectMake (0, 0, Width, self. contentView. height/2.f + offset-gap)]; self. upJsView. transitionDuration = 2.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 (0, 0, Width, self. contentView. h Eight/2.f + (offset-gap)]; areaView. fillColor = [UIColor clearColor]; areaView. areaColor = [UIColor blackColor]; UIBezierPath * path = [UIBezierPath bezierPath]; [path moveToPoint: CGPointMake (gap, 0)]; [path addLineToPoint: CGPointMake (gap, areaView. height-gap)]; [path addLineToPoint: CGPointMake (Width-gap, areaView. height-gap)]; [path addLineToPoint: CGPointMake (Width-gap, (offset-gap) * 2 + 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 (0, 0, Width, self. contentView. height/2.f + offset-gap)]; self. downJsView. transitionDuration = 2.f; self. downJsView. t Ag = 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 = 0; animatedImage SView. 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: effecf]; 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 = 1.f; [self. titleView addSubview: shimmeringView]; shimmeringView. contentView = headlinelabel; // Line. UIView * line = [[UIView alloc] initWithFrame: CGRectMake (0, 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 (0, 0,100, 64)]; backButton. center = CGPointMake (20, 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

 

Details

/// 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 = 0; I <self. paths. count; I ++) {I = 0? Path = self. paths [I]: [path appendPath: self. paths [I];} CGFloat red = 0; CGFloat green = 0; CGFloat blue = 0; CGFloat alpha = 0; [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