博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
这样的 StackView 动画,你想到了吗?
阅读量:6093 次
发布时间:2019-06-20

本文共 1189 字,大约阅读时间需要 3 分钟。

作者:Natasha The Robot,,原文日期:2016-07-24

译者:;校对:;定稿:

上周,我作为嘉宾参加了 ,有幸听到 关于 StackView 的精彩演讲。我了解 StackView 的基本原理,但它居然还可以如此简单地制作出炫酷的动画,真是毫无防备。

下面是 @atomicbird 演示的例子,我在博客中模仿了这种效果。这个 app 中有一个设置按钮,用户可以通过它来选择一个表情表示当前状态。

初始设置

初始设置很简单,把 StackView 加到 View 上,添加相关约束,然后用按钮来组成这个可爱的表情菜单。

Stackview 非常简单,而且容易上手,所以即使你没接触过,这部分也会很有趣。?

下一步是对表情按钮进行操作(除设置按钮外),给这些需要做动画的按钮创建一个 Outlet Collection

正如你所看到的那样,创建一个 Outlet Collection 与创建一个 Outlet 的方式是一样的,只不过 Outlet Collection 是子控件组成的数组。所以按住 Control 键,并拖动鼠标去创建一个新的 Outlet Collection 即可。

动画 ?

我们将通过控制表情按钮的 hidden 属性来达到动画的效果。首先,需要确认这些表情按钮默认是被隐藏的。遍历所有的表情按钮,使之隐藏。

@IBOutlet var emojiButtons: [UIButton]! {didSet {    emojiButtons.forEach {        $0.isHidden = true    }}}

下面将进行有“难度”的操作,你准备好了吗?

当设置按钮被点击时,执行一个动画去遍历所有的表情按钮,并切换它们的 hidden 状态。

@IBAction func onSettingsButtonTap(_ sender: AnyObject) {    UIView.animate(withDuration: 0.3) {        self.emojiButtons.forEach {            $0.isHidden = !$0.isHidden        }    }}

总结

这些精练的技巧,使得 StackView 超乎想象的强大。我也因此受到了很大的鼓舞,相信可以通过 StackView 做出更有创意的东西。非常感谢 @atomicbird

你可以在看到我的示例代码,同时可以与使用 Autolayout 的情况做个比较。

有兴趣学习更多技巧吗?那就来 9 月 1,2 日在纽约举行的 Swift 社区狂欢吧。你可以通过 NATASHATHEROBOT 获得 $100 的折扣。

本文由 SwiftGG 翻译组翻译,已经获得作者翻译授权,最新文章请访问 。

转载地址:http://eiwza.baihongyu.com/

你可能感兴趣的文章
Scroll Depth – 衡量页面滚动的 Google 分析插件
查看>>
Windows 8.1 应用再出发 - 视图状态的更新
查看>>
自己制作交叉编译工具链
查看>>
Qt Style Sheet实践(四):行文本编辑框QLineEdit及自动补全
查看>>
[物理学与PDEs]第3章习题1 只有一个非零分量的磁场
查看>>
深入浅出NodeJS——数据通信,NET模块运行机制
查看>>
onInterceptTouchEvent和onTouchEvent调用时序
查看>>
android防止内存溢出浅析
查看>>
4.3.3版本之引擎bug
查看>>
SQL Server表分区详解
查看>>
使用FMDB最新v2.3版本教程
查看>>
SSIS从理论到实战,再到应用(3)----SSIS包的变量,约束,常用容器
查看>>
STM32启动过程--启动文件--分析
查看>>
垂死挣扎还是涅槃重生 -- Delphi XE5 公布会归来感想
查看>>
淘宝的几个架构图
查看>>
Android扩展 - 拍照篇(Camera)
查看>>
JAVA数组的定义及用法
查看>>
充分利用HTML标签元素 – 简单的xtyle前端框架
查看>>
设计模式(十一):FACADE外观模式 -- 结构型模式
查看>>
iOS xcodebuile 自动编译打包ipa
查看>>