如何在IOS中应用部分淡入淡出？ [英] How to apply partial fade in-out in IOS?

问题描述

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

I have 2 images. One is in the back of the other. I want to fade-out the top image starting from the left corner. How can I do this?

我应该使用渐变掩码吗？

Should I use gradient mask?

推荐答案

这是一种技术将从左上角到右下角淡出CALayer中的任何内容，揭示CALayer下面的任何内容。

Here's a technique that will fade out whatever's in a CALayer, from top-left to bottom-right, revealing whatever is underneath the CALayer.

假设我们将淡出图层一个 UIImageView 名为 self.fadeView 。

Let's say we're going to fade out the layer of a UIImageView called self.fadeView.

我们'll创建一个 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 会自动为其停止位置设置动画，从而产生交叉渐变效果。

We'll create a CAGradientLayer and use it as self.fadeView.layer.mask. The gradient will go from alpha=0 (transparent) to alpha=1 (opaque) using four stops: 0, 0, 1, 1. Yes, two zeros and then two ones. When we want fadeView to be opaque, we'll set the stop locations to -1, -.5, 0, 1. That way the two alpha=0 stops are completely outside of the layer bounds. When we want fadeView to be transparent, we'll set the stop locations to 0, 1, 1.5, 2. That way the two alpha=1 stops are completely outside of the layer bounds. The CAGradientLayer will automatically animate changes to its stop locations, creating a cross-fade effect.

以下是代码：

#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

这篇关于如何在IOS中应用部分淡入淡出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！