我开始的样子是这样的:
当用户点击任何一个表情时,它必须动画到屏幕中央,然后出现一些按钮,就像这样:
问题是我不知道我该如何做到这一点,所以我请求您给予一些建议并告诉我您推荐我应该如何做。
我开始的样子是这样的:
当用户点击任何一个表情时,它必须动画到屏幕中央,然后出现一些按钮,就像这样:
问题是我不知道我该如何做到这一点,所以我请求您给予一些建议并告诉我您推荐我应该如何做。
无需使用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分钟内匆匆编写,可能会有错别字和小错误。但它确实可以编译和运行,并展示了我认为您想要的效果。
如果您想扩展此代码,请继续。您可以做很多事情来改善它(例如,在显示选项时略微弹跳!),尽管其中一些改进可能需要从核心动画开始重写代码。
以下是算法部分:
selectedPictureView
移动到屏幕中心。backgroundView
),在所有图片的顶部使用透明背景。selectedPictureView
插入backgroundView
。UIImage+ImageEffects.h
模糊它来生成当前视图的blurredBackground
。blurredBackground
添加为backgroundView
的背景图像yourControl.center = selectedPictureView.center
将您想要显示的每个控件隐藏在selectedPictureView
后面。selectedPictureView
对它们进行动画处理。对于每个步骤,以下是算法动画部分:
[UIView animateWithDuration:.3 animations:^{ selectedPictureView.center = self.view.center; }];
一旦添加完成,请进行漂亮的淡入动画
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://dev59.com/kHzaa4cB1Zd3GeqPMSlV#21589989
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!");
}];
}
[UIView animateWithDuration:.3 animations:^{ face.frame = newFrame; }];