ios - 简单动画链中的闪烁

Question

我正在尝试为一个脉动的圆圈制作动画。但是在向下缩放之后，会有一些闪烁的效果。为什么会这样？到目前为止，这是我的代码:

- (instancetype)init
{
    self = [super init];
    if (self) {
        if (!self.path) {
            self.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:7 startAngle:0.0*(M_PI/180.0)  endAngle:360.0*(M_PI/180.0) clockwise:YES].CGPath;
        }

        [self animateCircleUpward];
    }
    return self;
}

-(void)animateCircleUpward {

    [CATransaction begin];
        [CATransaction setCompletionBlock:^{[self animateCircleDownward];}];

        CABasicAnimation * scaleUpwardAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
        scaleUpwardAnimation.fromValue = @(0.7);
        scaleUpwardAnimation.toValue = @(1.0);


        CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
        opacityAnimation.fromValue = @(1.0);
        opacityAnimation.toValue = @(0.6);
        self.fillColor = [UIColor greenColor].CGColor;

        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
        NSArray *animations = @[scaleUpwardAnimation, opacityAnimation];
        animationGroup.duration = 0.4;

        animationGroup.animations = animations;
        [self addAnimation:animationGroup forKey:@"pulse"];

    [CATransaction commit];
}

-(void)animateCircleDownward {

    [CATransaction begin];
    [CATransaction setCompletionBlock:^{[self animateCircleUpward];}];

    CABasicAnimation * scaleDownwardAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
    scaleDownwardAnimation.fromValue = @(1.0);
    scaleDownwardAnimation.toValue = @(0.7);


    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.fromValue = @(0.6);
    opacityAnimation.toValue = @(1.0);
    self.fillColor = [UIColor greenColor].CGColor;

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    NSArray *animations = @[scaleDownwardAnimation, opacityAnimation];
    animationGroup.duration = 0.4;

    animationGroup.animations = animations;
    [self addAnimation:animationGroup forKey:@"pulse"];

    [CATransaction commit];
}

@end

提前致谢!

Answer 1

关于您的实际问题，您可能需要将 CAAnimationGroup 的 fillMode 属性设置为 kCAFillModeForward。默认值为 kCAFillModeRemoved，因此您可能会瞥见 Down 和 Up 方法来回调用之间的非表示层。

也就是说，看起来您要创建的是一个循环动画，通过 CATransaction 的 completionBlock 在您的 Up 和 Down 方法之间来回调用。这似乎是一种极其低效的方法；为什么不尝试更像:

-(void)scaleAndOpacityAnimations
{
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy”];
    scaleAnimation.fromValue = @(0.7f);
    scaleAnimation.toValue = @(1.0f);

    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@“opacity”];
    opacityAnimation.fromValue = @(1.0f);
    opacityAnimation.toValue = @(0.6f);

    CAAnimationGroup *scaleAndOpacity = [CAAnimationGroup animation];
    scaleAndOpacity.animations = @[scaleAnimation, opacityAnimation];
    scaleAndOpacity.autoReverses = YES;
    scaleAndOpacity.repeatCount = HUGE_VALF;
    //OP had no value indicated for the duration in posted code, I’m including it here for completion
    scaleAndOpacity.duration = 0.5f;

    [self addAnimation:scaleAndOpacity forKey:@“pulse”];
}

这将简单地重复无限多次，而无需在每个周期实例化新的 CAAnimations。