Question

我有一个屏幕，其中必须实现以下类型的动画。 enter image description here

圆圈从绽放中展开，然后展开成为单个按钮。第一次动画时（1秒）略微慢一点，第二次（.75秒）稍快一点，然后在所有后续时间（.5秒）更快。

但我无法弄清楚要实现什么样的动画。任何帮助将不胜感激。

Answer 1

你描述的是一个复杂的动画。你应该做的就是把它分解成它的组成部分：

创建圆形按钮，例如：

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.backgroundColor = [UIColor ...];
button.frame = CGRectMake(...); // probably define this to be square, just off screen to the bottom
button.layer.cornerRadius = button.frame.size.height / 2.0;
button.layer.borderColor = [UIColor ...].CGColor;  // white or black as appropriate
button.layer.borderWidth = 2.0;
[self.view insertSubview:button atIndex:0];
[buttons addObject:button];

使用animateWithDuration通过将屏幕外的每个按钮设置为适当的垂直位置，为屏幕上的外观设置动画。您可以将它们全部移动到一起，或者您可能会将它们错开，以便它们看起来很合适，使用包含delay的再现，这样您就可以延迟每个按钮。也许是这样的事情：

for (NSInteger idx = 0; idx < count; idx++) {
    [UIView animateWithDuration:duration * (count - idx) / count
                          delay:duration * idx / count
                        options:0
                     animations:^{
                         UIButton *button = buttons[idx];
                         button.center = CGPointMake(button.center.x, idx * 50.0 + 100.0);
                     }
                     completion:^(BOOL finished) {
                         //do next step
                     }];
}

通过将按钮的frame设置为该行最终将占据的全宽度来取消按钮。同样，您可以使用animateWithDuration。

为角落的周围设置动画，使它们像最后一个按钮一样正方形。这是您使用animateWithDuration无法轻松完成的动画，但您可以使用CAKeyFrameAnimation：

[buttons enumerateObjectsUsingBlock:^(UIView *button, NSUInteger idx, BOOL *stop) {
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"cornerRadius"];
    animation.values               = @[@(button.layer.cornerRadius), @(0.0)];
    animation.duration             = duration;
    animation.fillMode             = kCAFillModeForwards;
    animation.removedOnCompletion  = NO;
    if (idx == 0)
        animation.delegate         = self;
    [button.layer addAnimation:animation forKey:nil];
}];

您的代理人animationDidStop可以启动动画的下一步。

将宽按钮替换为分为该行的正确数量的单个按钮的宽按钮。您可能希望将这些边缘对齐。
对按钮进行最后的帧调整，使它们最终在它们之间留出一点空间。同样，您可以使用animateWithDuration。
使用最终文本字符串替换按钮上以前的空白标签。请注意，按钮上的标签通常不是可动画的属性，因此如果您希望它很好地淡入，则应使用transitionWithView，为所有这些按钮指定公共超视图并使用{ {1}} options的值。

如果你看一下这些步骤中的每一个，就会发现没有一个非常复杂。只需将复杂的动画分解为单独的步骤，为每个动画编写一个方法，然后分别触发动画的下一步。

Answer 2

UIButtons在iOS 7中不再有圆角矩形了。您打算创建UIButton的自定义子类吗？

如果是这样，我建议使用CAAnimation。您应该能够将CALayer附加到每个按钮并设置它的borderColor，backgroundColor，borderWidth和cornerRadius。如果要为图层设置动画，只需更改图层的边界，它就会设置为更大的动画。

要更改动画的持续时间或时间，您可以将更改包含在CATransaction中。像这样：

[CATransaction begin];
[CATransaction setAnimationDuration: 1.0];
CAMediaTimingFunction *linearTiming = 
  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear];
[CATransaction setAnimationTimingFunction: linearTiming]
myButton1Layer.bounds = newButton1ounds;
myButton2Layer.bounds = newButton2ounds;
[CATransaction commit];

动画对于图像的顺序

2 个答案: