CAAnimation 隐藏了一半的视图

Posted 2023-03-13

【中文标题】CAAnimation 隐藏了一半的视图

【英文标题】：CAAnimation hides half of view

【发布时间】：2014-03-31 09:00:08

【问题描述】：

我正在制作一个纸牌游戏，我需要卡片“翻转”。先面朝下再翻转，所以面朝上。我制作了一个不错的动画，效果很好，只是在动画期间有一半的视图隐藏在后面的图层后面（见屏幕截图）。

动画完成后，卡片视图很好地堆叠在其他视图之上。

任何关于为什么在动画期间隐藏一半视图的提示？

截图：

代码：

- (void)setFaceDirection:(BOOL)up
    if(up && !self.faceUp)
        self.faceUp = up;
        [self flip:@"in"];
    else if(!up && self.faceUp)
        self.faceUp = up;
        [self flip:@"out"];
    


- (void)flip:(NSString *)direction
    NSLog(@"flip");
    [NSTimer scheduledTimerWithTimeInterval:0.0 target:self selector:@selector(firstFlip) userInfo:nil repeats:NO];
    [NSTimer scheduledTimerWithTimeInterval:1.2 target:self selector:@selector(secondFlip) userInfo:nil repeats:NO];


- (void)firstFlip
    [CATransaction begin];
    CAAnimation* anim1 = [self createAnimDirection:@"in"];
    [CATransaction commit];

    //add perspective
    CATransform3D mt = CATransform3DIdentity;
    mt.m34 = 1.0/1000;
    mt = CATransform3DTranslate(mt, 0.0f, 0.0f, 0.01f);

    CALayer* lr = [self layer];
    lr.transform = mt;

    NSPoint ap = 0.5,0.0; // Begin from OS X Mountain Lion ancorPoint by default at 0,0;
    lr.anchorPoint = ap;

    // animation delegate to this class to handle message on its completion
    anim1.delegate = self; 

    CGPoint center = CGPointMake(CGRectGetMidX(self.frame), self.frame.origin.y);
    // lr.position = center;  

    [CATransaction begin];
    [lr addAnimation:anim1 forKey:@"flip"];
    [CATransaction commit];


- (void)secondFlip
    [CATransaction begin];
    CAAnimation* anim1 = [self createAnimDirection:@"out"];
    [CATransaction commit];

    //add perspective
    CATransform3D mt = CATransform3DIdentity;
    mt.m34 = 1.0/1000;
    mt = CATransform3DTranslate(mt, 0.0f, 0.0f, 0.01f);

    CALayer* lr = [self layer];
    lr.transform = mt;

    NSPoint ap = 0.5,0; // Begin from OS X Mountain Lion ancorPoint by default at 0,0;
    lr.anchorPoint = ap;

    // animation delegate to this class to handle message on its completion
    anim1.delegate = self; 

    CGPoint center = CGPointMake(CGRectGetMidX(self.frame), self.frame.origin.y);
    lr.position = center;  

    [CATransaction begin];
    [lr addAnimation:anim1 forKey:@"flip"];
    [CATransaction commit];


- (CAAnimation*) createAnimDirection:(NSString *) direction

    double from = 0.0;
    double to = M_PI/2;
    if ([direction isEqualToString:@"in"])
        [self setImage:[NSImage imageNamed:@"Card_Background"]];
    else
        from = -M_PI/2;
        to = 0.0;
        [self setImage:self.faceImage];
    

    NSString* sRotation;
    sRotation = @"transform.rotation.y";
    CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:sRotation];
    ba.fromValue = [NSNumber numberWithFloat:from];
    ba.toValue = [NSNumber numberWithFloat:to];

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.animations = [NSArray arrayWithObjects:ba, nil];
     animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animationGroup.duration = 1.2;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.removedOnCompletion = NO;

    return animationGroup;


- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
    if(flag)
        if (self.faceUp)
            [self setImage:self.faceImage];
        else
            [self setImage:[NSImage imageNamed:@"Card_Background"]];
        
    

【问题讨论】：

你设置了卡片的zIndex吗？

您是否考虑过在卡片宽度的一半处添加ztranslation？

没有。当谈到 CAAnimations 时，我仍然很菜鸟。 @DavidRönnqvist 如何设置卡片的 z-index？为什么只有一半的牌被隐藏了？什么是 z 平移？

【参考方案1】：

我最终弄乱了卡片的 xIndex，所以现在它可以工作了。

我已经更改了很多代码，但我无法在此处发布。