Question

我从这开始：

start screen

当用户点击这些面孔中的任何一个时，它必须设置为屏幕中心的动画，然后显示它周围的一些按钮，有点像这样

what it needs to look like at the end of the animation

问题是我不知道我该怎么做，所以我问你一些建议，你怎么建议我应该这样做。

Answer 1

可以在以下位置找到示例实现： https://github.com/WDUK/ButtonAnimationStackOverflow（大多数，如果不是所有的处理都是在WDViewController.m中完成的，那么请集中精力）

作为简要概述，这是该示例的开发内容：

不需要CoreAnimation，我们只需通过UIKit动画包装器和center和alpha属性的操作即可实现所需的动画。
动画分2个阶段完成，首先将所选按钮移至中心，然后展开可用选项。还包括了扭转此动画的动画。
模糊的背景是通过使用作为WWDC 2013的示例代码提供的Category Apple实现的，并使用两个图像视图进行简单的淡入/淡出。这很有效。

关键计算：

要将图像设置为中心动画，请将图像的.center设置为与动画块中的self.view.center相同

要计算图像周围选项的位置，请使用公式

newX = oldX + distance * cos(angleInRadians);
newX = oldY + distance * sin(angleInRadians);

选项的角度（以度为单位）可以计算为
```
indexOfOption * (360.0 / numberOfOptions)
```
将度数转换为弧度
```
(angleInDegrees / 180.0) * M_PI
```

要将图像设置回原始位置，请将原始位置存储起来并使用它（可能会在屏幕上显示15个选项），或计算原始位置（如我的示例所示）。要做到这一点，你需要做

image.origin.x = edgePadding + (imageSize * (i%imageCountPerRow) + (i%imageCountPerRow) * edgePadding);
image.origin.y = topPadding + edgePadding + (imageSize * (i/imageCountPerRow) + (i/imageCountPerRow) * edgePadding);

我会说他们是你需要记住的关键计算，各种图像和视图的alpha值都很直接。

如GitHub所述，如果在生产中使用，我不保证代码的质量和准确性。我只是在40分钟内鞭打它，可能会有错别字和小错误。但它确实编译并运行，并展示了我认为你所追求的效果。

如果您想扩展此代码，请继续。您可以做很多事情来改善这一点（例如，当显示选项时，轻微的速度反弹！），尽管其中一些改进可能需要使用Core Animation重写代码。

Answer 2

您需要进行一些计算，但实施起来可能并不困难。

步骤

以下是算法部分：

将selectedPictureView移至屏幕中央。
从它的超级视图中删除它。
在所有图片的顶部添加一个清晰背景的新视图（我们称之为backgroundView）。
将selectedPictureView插入backgroundView。
通过创建当前视图的屏幕截图并使用blurredBackground进行模糊处理来生成当前视图的UIImage+ImageEffects.h。
添加blurredBackground作为backgroundView
使用selectedPictureView

yourControl.center = selectedPictureView.center

围绕selectedPictureView

动画

对于每一步，这里是算法动画部分：

动画显示屏幕中心 [UIView animateWithDuration:.3 animations:^{ selectedPictureView.center = self.view.center; }];
没有动画
没有动画
没有动画
没有动画
一旦你添加了它，做一个漂亮的fadeIn动画 blurredBackground.opacity = 0; [UIView animateWithDuration:.3 animations:^{ blurredBackground.opacity = 1; }];
无动画
将他们设置为新职位

[UIView animateWithDuration:.3 animations:^{ yourControl.frame = newFrame; }];

你最终可以看https://www.cocoacontrols.com/controls/alradial。它复制了Path应用程序行为，我相信它可以帮助您创建这些动画。

希望有所帮助！

编辑：您可以使用@WDUK答案来计算您的控件位置。 https://stackoverflow.com/a/21589989/1835155

Answer 3

您可以使用UIView动画：

// Create your new views if you need 
[UIView animateWithDuration:0.5
                      delay:1.0
                    options: UIViewAnimationCurveEaseOut // you can try another options here
                 animations:^{
                     //change frames for views here
                 } 
                 completion:^(BOOL finished){
                     // 
                     NSLog(@"Done!");
                 }];
}

Answer 4

将您想要动画的代码放在动画块中。它将从当前值动画到块中的值。 animateWithDuration还有其他变体，它们提供了更多选项并允许将它们链接在一起。

[UIView animateWithDuration:.3 animations:^{
        face.frame = newFrame;
    }];

iOS：为项目制作动画并模糊其他内容的最佳方式？

4 个答案:

步骤

动画