核心动画：正确设置动画属性答案

【问题标题】：Core Animation: Setting animated property correctly核心动画：正确设置动画属性
【发布时间】：2013-07-17 22:48:56
【问题描述】：

我目前正在尝试使用 Core Animation 和图层构建条形图视图。为了让它更酷，我试着让每根光束一个接一个地弹出一点。为方便起见，我垂直翻转了视图的坐标系。

代码如下：

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.transform = CGAffineTransformMakeScale(1, -1);
        self.values = @[@12.5f, @4.25f, @23.0f, @3.0f, @17.9f, @7.0f, @15.1f];
    }
    return self;
}

- (void)didMoveToSuperview
{
    self.backgroundColor = [UIColor whiteColor];
    self.beamContainer = [CALayer layer];
    CGRect frame = CGRectInset(self.bounds, 20, 20);
    self.beamContainer.frame = frame;
    self.beamContainer.backgroundColor = [UIColor colorWithWhite:0.98 alpha:1].CGColor;
    float maxValue = [[self.values valueForKeyPath:@"@max.floatValue"] floatValue];
    for (int i = 0; i < self.values.count; i++) {
        CALayer *beam = [CALayer layer];
        CGFloat beamHeight = ([self.values[i] floatValue] * frame.size.height) / maxValue;

        beam.backgroundColor = [UIColor colorWithRed:0.5 green:0.6 blue:1 alpha:1].CGColor;
        beam.anchorPoint = CGPointMake(0, 0);
        beam.position = CGPointMake(frame.size.width * ((float)i/(float)self.values.count), 0);
        CGRect endBounds = CGRectMake(0, 0, frame.size.width /(float)self.values.count, beamHeight);
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
        animation.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, frame.size.width /(float)self.values.count, 5)];
        animation.toValue = [NSValue valueWithCGRect:endBounds];
        animation.duration = .5;
        animation.beginTime = CACurrentMediaTime() + ((float)i * 0.1);
        [beam addAnimation:animation forKey:@"beamAnimation"];

        [self.beamContainer addSublayer:beam];
        beam.bounds = endBounds;
    }
    [self.layer addSublayer:self.beamContainer];
}

这就像一个魅力，唯一的问题是，如果我不写beam.bounds = endBounds;，那么在动画完成之后，光束会迅速回到原来的边界。但是当我这样做时，它甚至会在动画开始之前开始和每个动画的延迟期间使用endBounds。

如何为从边界 A 到 B 并在末端粘在 B 上的光束设置动画？

【问题讨论】：

看看 CATransaction (developer.apple.com/library/ios/ipad/#documentation/…)，也许它会更适合您的需求。另外，请参阅此帖子：oleb.net/blog/2012/11/prevent-caanimation-snap-back
你在使用自动布局吗？

标签： ios animation core-animation calayer cabasicanimation

【解决方案1】：

您可以尝试以下方法：

// Save the original value
CGFloat originalY = layer.position.y;

// Change the model value (this is not animated yet)
layer.position = CGPointMake(layer.position.x, 300.0);

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.y"];

// Now specify the fromValue for the animation because
// the current model value is already the correct toValue
animation.fromValue = @(originalY);
animation.duration = 1.0;

// Use the name of the animated property as key
// to override the implicit animation
[layer addAnimation:animation forKey:@"position"];

虽然它与您尝试的条形图动画不完全匹配，但您可能会从上面的示例中获得模式。 You can read more about it here. 它帮助我解决了前几天遇到的类似问题。

【讨论】：