iOS：最佳的动画物品并模糊其他物品的方法是什么？

Question

我从这里开始：

我开始的样子是这样的：

当用户点击任何一个表情时，它必须动画到屏幕中央，然后出现一些按钮，就像这样：

问题是我不知道我该如何做到这一点，所以我请求您给予一些建议并告诉我您推荐我应该如何做。

- alexclp

---

隐式动画 + 读一本书 = 胜利。只需在 UIView animateWithDuration:animations: 块中更改视图的某个属性（在您的情况下是视图的中心），核心动画就会插值这些值。 - Jano

我可能很快就有答案了，这比简单的动画复杂得多。 - WDUK

Answer 1

可以在以下链接中找到示例实现： https://github.com/WDUK/ButtonAnimationStackOverflow（大部分处理都在WDViewController.m中完成，因此请集中精力处理此处）

简要概述如下，这是开发示例所需的内容：

• 无需使用CoreAnimation，我们可以通过UIKit动画包装器和对center和alpha属性的操作来实现所需的动画。

• 动画分为两个阶段，首先将选定的按钮移到中心，然后展开可用选项。还包括反转这些动画的操作。

• 通过使用苹果提供的WWDC 2013示例代码中提供的类别，并使用两个图像视图进行简单的淡入/淡出效果来实现模糊背景。这种方法非常不错。

关键计算：

• To animate the image to the centre, set .center of the image to the same as self.view.center within an animation block

• To calculate the positioning of the options surrounding the image, use the formula

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

• The angle of the option (in degrees) can be calculated as

  indexOfOption * (360.0 / numberOfOptions)
  

• To convert degrees to radians

  (angleInDegrees / 180.0) * M_PI
  

• To animate the image back to its original position, either store the original position and use that (could be messy with 15 options on screen), or calculate the original position (like in my example). To do this, you need to do

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

我认为这些是您需要记住的关键计算，各种图像和视图的alpha值很直观。

如在GitHub中所述，如果用于生产环境，我不保证代码的质量和准确性。我只是在40分钟内匆匆编写，可能会有错别字和小错误。但它确实可以编译和运行，并展示了我认为您想要的效果。

如果您想扩展此代码，请继续。您可以做很多事情来改善它（例如，在显示选项时略微弹跳！），尽管其中一些改进可能需要从核心动画开始重写代码。

- WDUK

Answer 2

你需要进行几次计算，但实现起来可能并不难。

---

步骤

以下是算法部分：

1. 将selectedPictureView移动到屏幕中心。
2. 将其从其父视图中移除。
3. 添加一个新视图（我们称之为backgroundView），在所有图片的顶部使用透明背景。
4. 将selectedPictureView插入backgroundView。
5. 通过创建截图并使用UIImage+ImageEffects.h模糊它来生成当前视图的blurredBackground。
6. 将blurredBackground添加为backgroundView的背景图像
7. 使用yourControl.center = selectedPictureView.center将您想要显示的每个控件隐藏在selectedPictureView后面。
8. 围绕selectedPictureView对它们进行动画处理。

---

动画

对于每个步骤，以下是算法动画部分：

1. 动画移动到屏幕中央[UIView animateWithDuration:.3 animations:^{ selectedPictureView.center = self.view.center; }];
2. 没有动画
3. 没有动画
4. 没有动画
5. 没有动画

6. 一旦添加完成，请进行漂亮的淡入动画 blurredBackground.opacity = 0; [UIView animateWithDuration:.3 animations:^{ blurredBackground.opacity = 1; }];

7. 没有动画

8. 将它们动画到新位置

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

---

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

希望对你有所帮助！

编辑：你可以使用@WDUK的答案计算控件的位置。https://dev59.com/kHzaa4cB1Zd3GeqPMSlV#21589989

- jbouaziz

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!");
                 }];
}

- Gago

Answer 4

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

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

- brussell