ios - 如何在 IOS 中应用部分淡入淡出？

Question

我有 2 张图片。一个在另一个的后面。我想从左上角开始淡出顶部图像。我怎样才能做到这一点？

我应该使用渐变 mask 吗？

Answer 1

这是一种技术，可以淡出 CALayer 中的所有内容，从左上角到右下角，显示 CALayer 下方的内容。

假设我们要淡出名为 self.fadeView 的 UIImageView 层。

我们将创建一个 CAGradientLayer并将其用作 self.fadeView.layer.mask。渐变将从 alpha=0(透明)变为 alpha=1(不透明)，使用四个停止点:0、0、1、1。是的，两个零，然后是两个一。当我们希望 fadeView 不透明时，我们将停止位置设置为 -1、-.5、0、1。这样两个 alpha=0 停止点就完全在层边界之外。当我们希望 fadeView 透明时，我们将停止位置设置为 0、1、1.5、2。这样两个 alpha=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