Use Maskview to design animation effects

Learn a little bit about how to use Maskview to design animation effects at Geek College

Mainly through cagradientlayer or images with Alpha.

    Mark:1.        Maskview (Masklayer) Basic principle cgfloat width = 120.f;    Basemap Self.baseimageview = [[Uiimageview alloc]initwithframe:cgrectmake (+, width, width)];    [_baseimageview setimage:[uiimage imagenamed:@ "base"];        [Self.view Addsubview:_baseimageview];    Mask is transparent self.maskimageview = [[Uiimageview alloc]initwithframe:cgrectmake (+ + width + +, width, width)];    [_maskimageview setimage:[uiimage imagenamed:@ "Mask"];        [Self.view Addsubview:_maskimageview]; Case of using Maskview Self.addimageview = [[Uiimageview alloc]initwithframe:cgrectmake (+ + (width +) * 2, Width, wid    TH)];    [_addimageview setimage:[uiimage imagenamed:@ "base"];    Uiimageview *mask = [[Uiimageview alloc]initwithframe:cgrectmake (0, 0, Width, width)];        [Mask setimage:[uiimage imagenamed:@ "Mask"];        [_addimageview setmaskview:mask];//ios8.0 only after Maskview cannot add masks in addsubview way!!! /*ios 8 ago//Calayer *layer = [Calayer layer];//[Layer SETFRAME:CGREctmake (0, 0, Width, width)];//[layer setcontents: (ID) [UIImage imagenamed:@ "Mask"].    cgimage];//[_addimageview.layer Setmask:layer];                    */[Self.view Addsubview:_addimageview]; Mark:2. Maskview with Cagradientlayer use//First step loading picture Uiimageview *imageview = [[Uiimageview alloc] Initwithframe:cgrectmake (    Width + 40, 20, 200, 200)];    [ImageView setimage:[uiimage imagenamed:@ "base"];    [Self.view Addsubview:imageview];    The second step is to create the cagradientlayer cagradientlayer *gradientlayer = [Cagradientlayer layer]; [Gradientlayer setframe:imageview.bounds];//mask Layer area [Gradientlayer setcolors:@[(__bridge id) [UIColor clearColor]. Cgcolor, (__bridge id) [Uicolor blackcolor]. Cgcolor, (__bridge id) [Uicolor clearcolor].    cgcolor]];//the color array of the gradient __bridge ID type [gradientlayer setlocations:@[@ (0.25), @ (0.5), @ (0.75)]];//the area of the gradient is 1 0.25 is 1/4, etc.    [Gradientlayer setstartpoint:cgpointmake (0, 0)]; [GradientlAyer Setendpoint:cgpointmake (1, 0)];//the direction of the gradient (1,0) is the horizontal (first) is from the upper left corner to the lower right corner and so on//The third step creates a container view for loading the created Cagradientlayer U    IView *containerview = [[UIView alloc]initwithframe:imageview.bounds];    [Containerview.layer Addsublayer:gradientlayer];        Finally set Maskview Imageview.maskview = Containerview; Extended to Maskview Animation in addition to modifying the Fram value of the container view can also dynamically modify the location StartPoint endpoint, etc. to achieve a very beautiful animation cgrect frame = Containerv    Iew.frame;    Frame.origin.x-= 200;//Here 200 is the width of the picture is to let the most right side of the container view and the bottom image of the leftmost coincident containerview.frame = frame; [UIView animatewithduration:4.0f animations:^{cgrect frame = containerview.frame;//Change Displacement frame.origin.x +                    = 400;//moved from left to right containerview.frame = frame;//re-assigned}]; Mark:3. Maskview with alpha channel Pictures//Add background image uiimageview *backgroundview = [[Uiimageview alloc]initwithframe:cgrectmake (width + 4    0, 200 + 40, 200, 200)];    [Backgroundview setimage:[uiimage imagenamed:@ "background"]; [Self.view Addsubview:Backgroundview];    To switch the diagram uiimageview *baseview = [[Uiimageview alloc]initwithframe:backgroundview.frame];    [Baseview setimage:[uiimage imagenamed:@ "base"];            [Self.view Addsubview:baseview];    Create Maskview as container UIView *maskview = [[UIView alloc]initwithframe:baseview.bounds];            Baseview.maskview = Maskview; Maskview subView1 Uiimageview *picone = [[Uiimageview alloc]initwithframe:cgrectmake (0, 0, 100, 400)];//100 background width half, 400    The upper half of the background height twice times 1 is Alpha 0 [Picone setimage:[uiimage imagenamed:@ "1"]];        [Maskview Addsubview:picone]; Maskview subView2 Uiimageview *pictwo = [[Uiimageview alloc]initwithframe:cgrectmake (100,-200, 100, 400)];//2 the lower half of Al    PHA is 0 [pictwo setimage:[uiimage imagenamed:@ "2"];            [Maskview Addsubview:pictwo];        Do the animation of switching pictures [UIView animatewithduration:2.0f animations:^{cgrect oneframe = picone.frame;        ONEFRAME.ORIGIN.Y-= 400;                Picone.frame = Oneframe; CGRect TwofRame = Pictwo.frame;        TWOFRAME.ORIGIN.Y + = 400;    Pictwo.frame = Twoframe;                    }]; Mark:4.        Design a control that disappears from a horizontal gradient of text [Self.view Setbackgroundcolor:[uicolor Graycolor];    Create fadestring fadestring *fadestring = [[Fadestring alloc]initwithframe:cgrectmake (0, 400+40, 300, 40)];    [Fadestring Setcenter:cgpointmake (Self.view.center.x, fadestring.center.y)];    Fadestring.text = @ "This effect looks good";            [Self.view addsubview:fadestring]; Perform animation effects [fadestring faderight];

Custom FadeString.h

The input text @property (nonatomic, Strong) NSString *text;//the right gradient disappears method-(void) faderight;

Fadestring.m

#import "FadeString.h" @interface fadestring () @property (nonatomic, strong) UILabel *label;  Display the text of the Label@property (Nonatomic, strong) UIView *mask; Mask@end@implementation fadestring-(Instancetype) as a mask initWithFrame: (CGRect) frame {self = [super INITWITHFRAME:FR    AME];        if (self) {//creates a label [self createLabel:self.bounds];    Create a mask [self createMask:self.bounds]; } return self;}    -(void) Createlabel: (CGRect) Frame {Self.label = [[UILabel alloc]initwithframe:frame];    [_label Setfont:[uifont systemfontofsize:25.0f];    [_label Settextalignment:nstextalignmentcenter];        [_label Settextcolor:[uicolor Whitecolor]; [Self Addsubview:_label];}    -(void) Createmask: (CGRect) frame {//Create a gradient layer cagradientlayer *gradientlayer = [Cagradientlayer layer];    [Gradientlayer Setframe:frame]; [Gradientlayer setcolors:@[(__bridge id) [Uicolor clearcolor]. Cgcolor, (__bridge id) [Uicolor blackcolor].    Cgcolor,                           (__bridge ID) [Uicolor Blackcolor]. Cgcolor, (__bridge id) [Uicolor clearcolor].    Cgcolor]];    [Gradientlayer setlocations:@[@ (0.01), @ (0.1), @ (0.9), @ (0.99)];    [Gradientlayer setstartpoint:cgpointmake (0, 0)];        [Gradientlayer setendpoint:cgpointmake (1, 0)];    Create and take over mask self.mask = [[UIView alloc]initwithframe:frame];    Mask gets the gradient layer [Self.mask.layer addsublayer:gradientlayer]; Self.maskview = _mask;} -(void) Faderight {//The current design is defective preferably plus two parameters an animation time one performs animation [UIView animatewithduration:3.f animations:^{C        Grect maskframe = _mask.frame;        Maskframe.origin.x + = _mask.frame.size.width;    _mask.frame = Maskframe; }];}    MARK: Overriding the Set,get method @synthesize text = _text;-(void) SetText: (NSString *) Text {_text = text; Self.label.text = text;} -(NSString *) text {return _text;} /*//Only override Drawrect:if perform custom drawing. An empty implementationAdversely affects performance during animation. -(void) DrawRect: (cgrect) Rect {//Drawing code} */@end

Geek's College video address: http://www.jikexueyuan.com/course/1257.html

Where: __bridge only do the type conversion, but do not modify the object (memory) management rights;
__bridge_retained (You can also use Cfbridgingretain) to convert objects from Objective-c to core foundation objects while handing over the management of the object (memory) to us, Subsequent use of cfrelease or related methods to release objects;
__bridge_transfer (You can also use cfbridgingrelease) to convert a core foundation object to an Objective-c object while handing over the management of the object (memory) to arc.

Explanations on this https:developer.apple.com/library/ios/#releasenotes/objectivec/rn-transitioningtoarc/introduction/ Introduction.html

Use Maskview to design animation effects