iOS 内容从水平到垂直动画，反之亦然
iOS Content from horizontal to vertical with animation and vice-versa
我们能否通过 UIStackView 实现这一点，因为最初它的 垂直轴 然后最终它将是 水平轴 并且副-反过来？
如果使用 NSAutoLayout，如何实现？
如果有人可以向我提供示例来源或此处的任何提示都会有所帮助，则需要帮助。
更新答案
感谢@Fogmeister
首先我制作了两个 StackView
一个是 namelable 和 profileImage
和 bigStackView 持有第一个 stackView 和 followButton
这样的约束
BigStackView:
我之所以在左边和右边加 20 个点，是因为如果我把它设为 0，跟随按钮将靠近屏幕边缘！
堆栈视图：
您不需要在此 stackView
上添加约束
个人资料图片:
NameLable:
关注图片：
然后我在向下滚动时让它们的间距相等，间距为 5
但是向上滚动时，StackView 的间距将为 15，因此个人资料图像将远离 nameLable（这就是我添加两个 stackView 以便控制间距的原因）
同时给 stackView 添加 160 点的高度约束
向上滚动时将其更改为100点
代码会变成这样
import UIKit
class ViewController: UIViewController , UITableViewDelegate , UITableViewDataSource {
@IBOutlet weak var bigStackView: UIStackView!
@IBOutlet weak var StackView: UIStackView!
@IBOutlet weak var StackViewHight: NSLayoutConstraint!
@IBOutlet weak var progileHight: NSLayoutConstraint!
@IBOutlet weak var profileWidth: NSLayoutConstraint!
var rowsNames = ["Row 0", "Row 1", "Row 2", "Row 3", "Row 4", "Row 5",
"Row 6", "Row 7", "Row 8", "Row 9", "Row 10", "Row 11",
"Row 12", "Row 13", "Row 14", "Row 15", "Row 16", "Row 17",
"Row 18", "Row 19", "Row 20", "Row 21", "Row 22", "Row 23",
"Row 24", "Row 25", "Row 26", "Row 27", "Row 28", "Row 29", "Row 20"]
// we set a variable to hold the contentOffSet before scroll view scrolls
var lastContentOffset: CGFloat = 0
override func viewDidLoad() {
super.viewDidLoad()
}
// MARK: - UITableViewDataSource
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return rowsNames.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = rowsNames[indexPath.row]
return cell
}
// this delegate is called when the scrollView (i.e your UITableView) will start scrolling
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.lastContentOffset = scrollView.contentOffset.y
}
// while scrolling this delegate is being called so you may now check which direction your scrollView is being scrolled to
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (self.lastContentOffset < scrollView.contentOffset.y) {
// moved to top
UIView.animate(withDuration: 0.5,
animations: {
// Change Hight and Witdh of profileImage (make it smaller)
self.progileHight.constant = 50
self.profileWidth.constant = 50
self.bigStackView.axis = .horizontal
self.StackView.axis = .horizontal
// Change spacing between profileImage and nameLable
self.StackView.spacing = 15
// Make BigStackView Smaller
self.StackViewHight.constant = 100
self.view.layoutIfNeeded()
})
} else if (self.lastContentOffset > scrollView.contentOffset.y) {
// moved to bottom
UIView.animate(withDuration: 0.5,
animations: {
// return Hight and Witdh of profileImage to its orginal size
self.progileHight.constant = 100
self.profileWidth.constant = 100
self.bigStackView.axis = .vertical
self.StackView.axis = .vertical
// return spacing between profileImage and nameLable to the orginal space
self.StackView.spacing = 5
// return BigStackView to its orginal size
self.StackViewHight.constant = 160
self.view.layoutIfNeeded()
})
} else {
// didn't move
}
}
}
结果将是：
旧答案：
我不认为你可以通过 UIStackView 实现这个
但是用 UIView 做起来很容易
首先像这样制作你的 StoryBoard
然后添加约束
用户界面视图:
个人资料图片:
nameLable:
关注按钮：
我确实在每个 iPhone 设备上进行了测试，使用 iPad 时，约束没有被破坏
那么你只需要使用UIView.animate
并四处移动项目
代码会是这样
import UIKit
class ViewController: UIViewController , UITableViewDelegate , UITableViewDataSource {
var rowsNames = ["Row 0", "Row 1", "Row 2", "Row 3", "Row 4", "Row 5",
"Row 6", "Row 7", "Row 8", "Row 9", "Row 10", "Row 11",
"Row 12", "Row 13", "Row 14", "Row 15", "Row 16", "Row 17",
"Row 18", "Row 19", "Row 20", "Row 21", "Row 22", "Row 23",
"Row 24", "Row 25", "Row 26", "Row 27", "Row 28", "Row 29", "Row 20"]
@IBOutlet weak var squareView: UIView!
@IBOutlet weak var hightView: NSLayoutConstraint!
@IBOutlet weak var profileImage: UIImageView!
@IBOutlet weak var followButton: UIButton!
@IBOutlet weak var nameLable: UILabel!
// we set a variable to hold the contentOffSet before scroll view scrolls
var lastContentOffset: CGFloat = 0
override func viewDidLoad() {
super.viewDidLoad()
}
// MARK: - UITableViewDataSource
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return rowsNames.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = rowsNames[indexPath.row]
return cell
}
// this delegate is called when the scrollView (i.e your UITableView) will start scrolling
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.lastContentOffset = scrollView.contentOffset.y
}
// while scrolling this delegate is being called so you may now check which direction your scrollView is being scrolled to
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (self.lastContentOffset < scrollView.contentOffset.y) {
// moved to top
self.hightView.constant = 100
UIView.animate(withDuration: 0.5,
animations: {
self.profileImage.transform = CGAffineTransform(translationX:-150, y: -15).scaledBy(x: 0.5, y: 0.5)
self.followButton.transform = CGAffineTransform(translationX:130, y: -110)
self.nameLable.transform = CGAffineTransform(translationX:-95, y: -80)
self.view.layoutIfNeeded()
})
} else if (self.lastContentOffset > scrollView.contentOffset.y) {
// moved to bottom
UIView.animate(withDuration: 0.5,
animations: {
self.hightView.constant = 206
self.profileImage.transform = CGAffineTransform.identity
self.followButton.transform = CGAffineTransform.identity
self.nameLable.transform = CGAffineTransform.identity
self.view.layoutIfNeeded()
})
} else {
// didn't move
}
}
}
我所做的是检测用户是否向上或向下滚动
向上滚动时
我更改了 UIView 的高度，还
更改 ProfileImage 的位置并使其缩小一半
然后更改 namaLable 和 followButton
当它向下滚动时
我 return 高度尺寸为原始尺寸
和 return 其余视图使用
显示为原始大小
CGAffineTransform.identity
结果是
我希望这个解决方案对你来说很常见
我想我会使用 UIStackView 添加一个答案，因为你似乎没有尝试就忽略了它。
我在这里添加了一个包含所有代码的要点。代码有点狡猾，因为 95% 的代码都在设置 Playground 页面和视图等...
https://gist.github.com/oliver-foggin/7ef9e2b7f77b733ea0afb782d7c7d7e0
我总共花了大约 10 分钟。
看着你的动画，我注意到只有三件事发生了变化。圆视图的大小，圆视图的角半径，布局的轴(vertical/horizontal).
这反映在我的示例中使用的动画代码中...
UIView.animate(withDuration: 0.5) {
stackView.axis = .horizontal
roundViewHeightConstraint.constant = 60
roundView.layer.cornerRadius = 30
}
这会产生以下动画（可以对其进行调整以改进它，但我没有太多时间来编写它）...
稍微更新了代码以尝试改进动画...
stackView.axis = .horizontal
roundViewHeightConstraint.constant = 60
UIView.animate(withDuration: 0.5) {
containerView.layoutIfNeeded()
}
新动画...
圆角半径在图层上的动画效果不正确。那是因为我使用的是 UIView 而不是像您原来那样的 UIImageView 。使用 UIImageView 你不会像我一样费心改变角半径。只需使用圆形图像即可。
我们能否通过 UIStackView 实现这一点，因为最初它的 垂直轴 然后最终它将是 水平轴 并且副-反过来？
如果使用 NSAutoLayout，如何实现？
如果有人可以向我提供示例来源或此处的任何提示都会有所帮助，则需要帮助。
更新答案
感谢@Fogmeister
首先我制作了两个 StackView 一个是 namelable 和 profileImage
和 bigStackView 持有第一个 stackView 和 followButton
这样的约束
BigStackView:
我之所以在左边和右边加 20 个点，是因为如果我把它设为 0，跟随按钮将靠近屏幕边缘！
堆栈视图： 您不需要在此 stackView
上添加约束个人资料图片:
NameLable:
关注图片：
然后我在向下滚动时让它们的间距相等，间距为 5
但是向上滚动时，StackView 的间距将为 15，因此个人资料图像将远离 nameLable（这就是我添加两个 stackView 以便控制间距的原因）
同时给 stackView 添加 160 点的高度约束 向上滚动时将其更改为100点
代码会变成这样
import UIKit
class ViewController: UIViewController , UITableViewDelegate , UITableViewDataSource {
@IBOutlet weak var bigStackView: UIStackView!
@IBOutlet weak var StackView: UIStackView!
@IBOutlet weak var StackViewHight: NSLayoutConstraint!
@IBOutlet weak var progileHight: NSLayoutConstraint!
@IBOutlet weak var profileWidth: NSLayoutConstraint!
var rowsNames = ["Row 0", "Row 1", "Row 2", "Row 3", "Row 4", "Row 5",
"Row 6", "Row 7", "Row 8", "Row 9", "Row 10", "Row 11",
"Row 12", "Row 13", "Row 14", "Row 15", "Row 16", "Row 17",
"Row 18", "Row 19", "Row 20", "Row 21", "Row 22", "Row 23",
"Row 24", "Row 25", "Row 26", "Row 27", "Row 28", "Row 29", "Row 20"]
// we set a variable to hold the contentOffSet before scroll view scrolls
var lastContentOffset: CGFloat = 0
override func viewDidLoad() {
super.viewDidLoad()
}
// MARK: - UITableViewDataSource
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return rowsNames.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = rowsNames[indexPath.row]
return cell
}
// this delegate is called when the scrollView (i.e your UITableView) will start scrolling
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.lastContentOffset = scrollView.contentOffset.y
}
// while scrolling this delegate is being called so you may now check which direction your scrollView is being scrolled to
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (self.lastContentOffset < scrollView.contentOffset.y) {
// moved to top
UIView.animate(withDuration: 0.5,
animations: {
// Change Hight and Witdh of profileImage (make it smaller)
self.progileHight.constant = 50
self.profileWidth.constant = 50
self.bigStackView.axis = .horizontal
self.StackView.axis = .horizontal
// Change spacing between profileImage and nameLable
self.StackView.spacing = 15
// Make BigStackView Smaller
self.StackViewHight.constant = 100
self.view.layoutIfNeeded()
})
} else if (self.lastContentOffset > scrollView.contentOffset.y) {
// moved to bottom
UIView.animate(withDuration: 0.5,
animations: {
// return Hight and Witdh of profileImage to its orginal size
self.progileHight.constant = 100
self.profileWidth.constant = 100
self.bigStackView.axis = .vertical
self.StackView.axis = .vertical
// return spacing between profileImage and nameLable to the orginal space
self.StackView.spacing = 5
// return BigStackView to its orginal size
self.StackViewHight.constant = 160
self.view.layoutIfNeeded()
})
} else {
// didn't move
}
}
}
结果将是：
旧答案：
我不认为你可以通过 UIStackView 实现这个
但是用 UIView 做起来很容易
首先像这样制作你的 StoryBoard
然后添加约束
用户界面视图:
个人资料图片:
nameLable:
关注按钮：
我确实在每个 iPhone 设备上进行了测试，使用 iPad 时，约束没有被破坏
那么你只需要使用UIView.animate
并四处移动项目
代码会是这样
import UIKit
class ViewController: UIViewController , UITableViewDelegate , UITableViewDataSource {
var rowsNames = ["Row 0", "Row 1", "Row 2", "Row 3", "Row 4", "Row 5",
"Row 6", "Row 7", "Row 8", "Row 9", "Row 10", "Row 11",
"Row 12", "Row 13", "Row 14", "Row 15", "Row 16", "Row 17",
"Row 18", "Row 19", "Row 20", "Row 21", "Row 22", "Row 23",
"Row 24", "Row 25", "Row 26", "Row 27", "Row 28", "Row 29", "Row 20"]
@IBOutlet weak var squareView: UIView!
@IBOutlet weak var hightView: NSLayoutConstraint!
@IBOutlet weak var profileImage: UIImageView!
@IBOutlet weak var followButton: UIButton!
@IBOutlet weak var nameLable: UILabel!
// we set a variable to hold the contentOffSet before scroll view scrolls
var lastContentOffset: CGFloat = 0
override func viewDidLoad() {
super.viewDidLoad()
}
// MARK: - UITableViewDataSource
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return rowsNames.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = rowsNames[indexPath.row]
return cell
}
// this delegate is called when the scrollView (i.e your UITableView) will start scrolling
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.lastContentOffset = scrollView.contentOffset.y
}
// while scrolling this delegate is being called so you may now check which direction your scrollView is being scrolled to
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (self.lastContentOffset < scrollView.contentOffset.y) {
// moved to top
self.hightView.constant = 100
UIView.animate(withDuration: 0.5,
animations: {
self.profileImage.transform = CGAffineTransform(translationX:-150, y: -15).scaledBy(x: 0.5, y: 0.5)
self.followButton.transform = CGAffineTransform(translationX:130, y: -110)
self.nameLable.transform = CGAffineTransform(translationX:-95, y: -80)
self.view.layoutIfNeeded()
})
} else if (self.lastContentOffset > scrollView.contentOffset.y) {
// moved to bottom
UIView.animate(withDuration: 0.5,
animations: {
self.hightView.constant = 206
self.profileImage.transform = CGAffineTransform.identity
self.followButton.transform = CGAffineTransform.identity
self.nameLable.transform = CGAffineTransform.identity
self.view.layoutIfNeeded()
})
} else {
// didn't move
}
}
}
我所做的是检测用户是否向上或向下滚动
向上滚动时
我更改了 UIView 的高度，还 更改 ProfileImage 的位置并使其缩小一半 然后更改 namaLable 和 followButton
当它向下滚动时 我 return 高度尺寸为原始尺寸 和 return 其余视图使用
显示为原始大小CGAffineTransform.identity
结果是
我希望这个解决方案对你来说很常见
我想我会使用 UIStackView 添加一个答案，因为你似乎没有尝试就忽略了它。
我在这里添加了一个包含所有代码的要点。代码有点狡猾，因为 95% 的代码都在设置 Playground 页面和视图等...
https://gist.github.com/oliver-foggin/7ef9e2b7f77b733ea0afb782d7c7d7e0
我总共花了大约 10 分钟。
看着你的动画，我注意到只有三件事发生了变化。圆视图的大小，圆视图的角半径，布局的轴(vertical/horizontal).
这反映在我的示例中使用的动画代码中...
UIView.animate(withDuration: 0.5) {
stackView.axis = .horizontal
roundViewHeightConstraint.constant = 60
roundView.layer.cornerRadius = 30
}
这会产生以下动画（可以对其进行调整以改进它，但我没有太多时间来编写它）...
稍微更新了代码以尝试改进动画...
stackView.axis = .horizontal
roundViewHeightConstraint.constant = 60
UIView.animate(withDuration: 0.5) {
containerView.layoutIfNeeded()
}
新动画...
圆角半径在图层上的动画效果不正确。那是因为我使用的是 UIView 而不是像您原来那样的 UIImageView 。使用 UIImageView 你不会像我一样费心改变角半径。只需使用圆形图像即可。