आईओएस में आंशिक फीका इन-आउट कैसे लागू करें?

Question

मेरे पास 2 छवियां हैं। एक दूसरे के पीछे है। मैं बाएं कोने से शुरू होने वाली शीर्ष छवि को फीका करना चाहता हूं। मैं यह कैसे कर सकता हूँ?

क्या मुझे ढाल मास्क का उपयोग करना चाहिए?

Answer 1

यहां एक ऐसी तकनीक है जो कैलियर के नीचे जो कुछ भी है, उसे ऊपर से बाएं से दाएं-दाएं से, कैलियर में जो भी हो, उसे फीका कर देगी।

मान लें कि हम UIImageView की परत को फीका कर रहे हैं जिसे self.fadeView कहा जाता है।

हम CAGradientLayer बनाएंगे और इसे self.fadeView.layer.mask के रूप में उपयोग करेंगे। ढाल अल्फा = 0 (पारदर्शी) से अल्फा = 1 (अपारदर्शी) से चार स्टॉप का उपयोग कर जाएगा: 0, 0, 1, 1. हां, दो शून्य और फिर दो। जब हम fadeView अपारदर्शी होने के लिए चाहते हैं, तो हम स्टॉप स्थानों को -1, -.5, 0, 1 पर सेट करेंगे। इस तरह दो अल्फा = 0 स्टॉप पूरी तरह से परत सीमाओं के बाहर हैं। जब हम पारदर्शी होने के लिए fadeView चाहते हैं, तो हम स्टॉप स्थानों को 0, 1, 1.5, 2 पर सेट कर देंगे। इस तरह दो अल्फा = 1 स्टॉप पूरी तरह से परत सीमाओं के बाहर हैं। CAGradientLayer क्रॉस-फीड प्रभाव बनाने, स्वचालित रूप से अपने स्टॉप स्थानों में परिवर्तनों को एनिमेट कर देगा।

#import "ViewController.h" 

@implementation ViewController 

@synthesize fadeView = _fadeView; 

static NSArray *locations(float a, float b, float c, float d) 
{ 
    return [NSArray arrayWithObjects: 
     [NSNumber numberWithFloat:a], 
     [NSNumber numberWithFloat:b], 
     [NSNumber numberWithFloat:c], 
     [NSNumber numberWithFloat:d], 
     nil]; 
} 

// In my test project, I put a swipe gesture recognizer on fadeView in my XIB 
// with direction = Up and connected it to this action. 
- (IBAction)fadeIn 
{ 
    [CATransaction begin]; 
    [CATransaction setValue:[NSNumber numberWithDouble:2.0] forKey:kCATransactionAnimationDuration]; 
    ((CAGradientLayer *)self.fadeView.layer.mask).locations = locations(-1, -.5, 0, 1); 
    [CATransaction commit]; 
} 

// In my test project, I put a swipe gesture recognizer on fadeView in my XIB 
// with direction = Down and connected it to this action. 
- (IBAction)fadeOut 
{ 
    [CATransaction begin]; 
    [CATransaction setValue:[NSNumber numberWithDouble:2.0] forKey:kCATransactionAnimationDuration]; 
    ((CAGradientLayer *)self.fadeView.layer.mask).locations = locations(0, 1, 1.5, 2); 
    [CATransaction commit]; 
} 

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    CAGradientLayer *mask = [CAGradientLayer layer]; 
    mask.frame = self.fadeView.bounds; 
    mask.colors = [NSArray arrayWithObjects: 
     (__bridge id)[UIColor clearColor].CGColor, 
     (__bridge id)[UIColor clearColor].CGColor, 
     (__bridge id)[UIColor whiteColor].CGColor, 
     (__bridge id)[UIColor whiteColor].CGColor, 
     nil]; 
    mask.startPoint = CGPointZero; // top left corner 
    mask.endPoint = CGPointMake(1, 1); // bottom right corner 
    self.fadeView.layer.mask = mask; 
    [self fadeIn]; // initialize mask.locations 
} 

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation 
{ 
    // Return YES for supported orientations 
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown); 
} 

@end 

Answer 2

कुंजी contents कुंजी के लिए अपने actionForKey एनीमेशन के साथ अपने स्वयं के CALayer सबक्लास को परिभाषित करें।

@interface CustomLayer: CALayer 

@end 

@implementation CustomLayer 


+ (id<CAAction>)actionForKey:(NSString*)event { 

if ([event isEqualToString:@"contents"]) { 
    CATransition* basicAnimation = [CATransition animation]; 
    basicAnimation.type = kCATransitionMoveIn; 
    basicAnimation.subtype = kCATransitionFromLeft; 
    return basicAnimation; 
} else { 
    return nil; 
} 
} 

@end 

इस तरह करने से, जब भी आप अपने CustomLayer वस्तु की contents गुण सेट, संक्रमण दिखाया जाएगा:

CustomLayer* layer = [CustomLayer layer]; 
layer.contents = <FIRST_CGIMAGEREF_HERE>; 
... 
layer.contents = <SECOND_CGIMAGEREF_HERE>; 

हमेशा की तरह, आप एक सौदे में संपत्ति काम लपेट कर सकते हैं:

[CATransaction begin]; 
    .... 
[CATransaction end]; 

यदि आप संक्रमण की अवधि पर अधिक नियंत्रण चाहते हैं, लेकिन किसी भी मामले में संक्रमण लागू किया जाएगा।

संपादित करें:

संक्रमण आप चाहते हैं की तरह के लिए, आप this sample on GitHub पर एक नज़र हो सकता है। शटर ट्रांजिशन की तलाश करें। यह वही नहीं है जो आप खोज रहे हैं, लेकिन यह आपको सही रास्ते पर ले जा सकता है।