gpt4 book ai didi

iOS 内容从水平到垂直动画,反之亦然

转载 作者:搜寻专家 更新时间:2023-11-01 05:52:19 24 4
gpt4 key购买 nike

我们能否通过 UIStackView 实现这一点,最初将其作为垂直轴,然后最终将成为水平轴,反之亦然?

如果使用 NSAutoLayout,如何实现?

如果有人可以向我提供示例来源或此处的任何提示都会有所帮助,则需要帮助。

I found this Android library

Need animation like this

最佳答案

更新答案

感谢@Fogmeister

首先我制作了两个 StackView一个保持可命名和 profileImage

bigStackView持有第一个stackView和followButton

enter image description here

这样的约束

BigStackView:

enter image description here

我之所以在左侧和右侧添加 20 个点,是因为如果我将其设置为 0,则跟随按钮将靠近屏幕边缘!

堆栈 View :你不需要在这个 stackView 上添加约束

个人资料图片:

enter image description here

NameLable:

enter image description here

关注图片:

enter image description here

然后我在向下滚动时使它们的间距相等,间距为 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
}
}







}

结果将是:

enter image description here

旧答案:

我不认为你可以通过 UIStackView 实现这一点

但用 UIView 做起来很容易

首先像这样制作你的 StoryBoard

enter image description here

enter image description here

然后添加约束

界面 View :

enter image description here

个人资料图片:

enter image description here

名称标签:

enter image description here

跟随按钮:

enter image description here

我确实在每台 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

当它向下滚动时我将高尺寸恢复为原始尺寸并使用

将其余 View 返回到其原始大小
CGAffineTransform.identity

结果是

enter image description here

我希望这个解决方案对你来说很常见

关于iOS 内容从水平到垂直动画,反之亦然,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46300415/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com