Как применить частичное исчезновение в IOS? - PullRequest
Новая
       5

Как применить частичное исчезновение в IOS?

7 голосов
/ 01 декабря 2011

У меня 2 изображения.Один в задней части другого.Я хочу затемнить верхнее изображение, начиная с левого угла.Как я могу это сделать?

Должен ли я использовать градиентную маску?

Ответы [ 2 ]

11 голосов
/ 02 декабря 2011

Вот техника, которая затухает все, что находится в слое CAL, от верхнего левого до нижнего правого, показывая все, что находится под слоем CALayer.

Допустим, мы собираемся исчезнуть слой 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
2 голосов
/ 01 декабря 2011

Определите свой собственный CALayer подкласс со своей собственной actionForKey анимацией для ключа 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

Делайте так, когда вы устанавливаете свойство contents вашего CustomLayerобъект, переход будет показан: 

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

Как обычно, вы можете обернуть присвоение свойства в транзакции: 

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

, если вы хотите больше контроля над продолжительностью перехода, но в любом случае переход будет применен.

РЕДАКТИРОВАТЬ:

Для типа перехода, который вы хотели бы иметь, вы можете посмотреть этот пример на GitHub .Ищите ShutterTransition.Это не совсем то, что вы ищете, но оно может привести вас на правильный путь.

...