《Motion Design for iOS》(二十五)
2023-03-15 23:21:29 时间
现在我们已经了解了Core Animation的基础并且使用了优秀的框架JNWSpringAnimation来模仿弹簧系统,是时候来开始写一些真实的示例代码了。
仿制一个iOS AlertView
重现一个熟悉的界面元素是一个很好的熟悉动画开发的方式。首先,让我们创建我们自己的标准iOS警告视图。这是内置的警告视图的样子。
在本指南之前的章节中,我解释了分解一个动画的各个组成部分有多么重要,这样你就可以准确地构建它。仅仅说“警告框动画进入屏幕”是不够的,你需要准确地知道发生了什么。让我们来分解这个动画。
- 屏幕随着渐入的一层半透明灰覆盖变暗。
- 警告框从完全透明以及比1.0倍大的大小开始,并动画至100%不透明和1.0倍大小。
- 消失的时候,它会淡出为完全透明并且比例会动画减小到比1.0要小。
- 阴暗的覆盖层淡出并消失。
在我们进入详细的代码之前,让我们看看我们要完成的警告框是什么样子的。
首先让我们创建一个简单的有白色背景的应用窗口。这是在应用的delegate类中,并且代码会在app完成启动的时候就立即运行。你可以在Alert View 1 Xcode工程中参考代码。
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Construct the main window for this application
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// All additional code in this example will go right here
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
return YES;
}
在这一步,我们有一个UIWindow,其位置和方向可以准确地填充屏幕,并且背景色被设为了白色。如果我们现在立马运行它,它只会在模拟器中(或者你的手机,如果连接了的话)运行一个空的、白色的应用屏幕。现在来创建我们的覆盖层,将其添加到屏幕上,并将透明度设为0.0,因为我们现在不想显示它。
UIView *overlayView = [[UIView alloc] initWithFrame:self.window.bounds];
overlayView.backgroundColor = [UIColor blackColor];
overlayView.alpha = 0.0f;
[self.window addSubview:overlayView];
这个覆盖层是一个简单的UIView
,填充了整个主窗口对象。这意味着它会被放置在窗口的左上角,并且其宽和高会匹配窗口,从而覆盖所有的内容。为了显示我现在有的内容,如果我提高覆盖层的不透明度,这就是看起来的样子。
相关文章
- 盘点五款值得收藏的 Linux 开发板
- 苹果终于发布 iOS 15.4,支持戴口罩面容 Face ID 解锁
- 湖南工程师用中文编写操作系统,还发明了甲、乙、丙语言?
- OpenHarmony中AT模块的代码理解之一
- Hi3861的Micropython移植之Pin
- 尝试 Nitrux 系统的六大理由
- 图解 Kubernetes 中四种应用平滑升级方式
- 美团集群调度系统的云原生实践
- uBlock Origin 成为 Firefox 最受欢迎扩展
- OpenHarmony—系统刷机指导
- HarmonyOS - 手把手教你搭建Artifactory
- Meta 发布开源浏览器扩展,用于验证网页完整性
- 在 Ubuntu 上通过命令行改变 Linux 系统语言
- 35年的 Windows 系统界面设计是如何演变的?
- 系统升级时遇到0x8007012a安装错误?别担心,有六种方法来解决
- 想合理分配电脑硬盘空间,掌握这五种方法,快速打开磁盘管理工具
- 可定制的 select 控件:<selectmenu>
- 报告显示超过三分之一的企业设备无法使用 Windows 11,用户十分困惑
- 鸿蒙轻内核A核源码分析系列之进程管理
- 对于企业而言,Linux 是否比 Windows 更安全?