在简单的动画链中闪烁

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的completementBlock在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。