IOSで部分的なフェードインを適用するには？

Question

私は2枚の画像を持っています。一方は他方の裏にあります。私は左端から上の画像をフェードアウトしたい。これどうやってするの？

グラデーションマスクを使用する必要がありますか？

Answer 1

CALayerの中にあるものを、左上から右下に向かってフェードアウトさせ、CALayerの下にあるものをすべて明かす技術です。

self.fadeViewという名前のUIImageViewのレイヤーをフェードアウトさせてみましょう。

CAGradientLayerを作成し、self.fadeView.layer.maskとして使用します。勾配は、0、0、1、1の4つのストップを使用して、アルファ= 0（透明）からアルファ= 1（不透明）になります。はい、2つの零点、次に2つの零点です。 fadeViewを不透明にしたい場合は、停止位置を-1、-.5、0、1に設定します。このようにして、2つのアルファ= 0のストップは完全にレイヤ境界の外側にあります。 fadeViewを透明にしたいときは、停止位置を0,1,1.5,2に設定します。つまり、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

独自のCALayerサブクラスを定義し、contentsのactionForKeyアニメーションで定義します。あなたはCustomLayerオブジェクトのcontentsプロパティを設定するたび

このようにすること

@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* layer = [CustomLayer layer]; 
layer.contents = <FIRST_CGIMAGEREF_HERE>; 
... 
layer.contents = <SECOND_CGIMAGEREF_HERE>; 

を、あなたは、トランザクションにプロパティの割り当てをラップすることができます。

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

移行の期間をさらに制御したい場合は、いずれの場合も移行が適用されます。

EDIT：あなたが持っているしたいトランジションの種類については

、あなたはthis sample on GitHubを見てすることができます。 ShutterTransitionを探します。それは正確にあなたが探しているものではありませんが、それは正しい道に沿ってあなたを導くことができます。