I made this little animation and it works great except that the "grey background" of the main VStack
is already at his maximum height
.
我制作了这个小动画,效果很好,只是主VStack的“灰色背景”已经达到了他的最大高度。
Do you think it's possible to make the image
appears/exists instead of working on the opacity so the "grey background" can expand when the image
is showed?
你认为有没有可能使图像出现/存在,而不是对不透明度的工作,使“灰色背景”可以扩大时,图像显示?
import SwiftUI
struct ExampleView: View {
@State private var isSowing = false
var body: some View {
VStack() {
HStack() {
Image("photo")
.onAppear { animateImage() }
VStack() {
Text("Name")
Text("Company")
}
Spacer()
}
Image("image")
.opacity(isSowing ? 1 : 0)
.offset(y: isSowing ? 0 : 80)
}
.background(Color.grey)
}
private func animateImage() {
withAnimation(.easeInOut.delay(1)) {
isSowing = true
}
}
}
更多回答
优秀答案推荐
Wrap the image with an if
.
用if将图像包起来。
VStack {
HStack() {
...
}
if isSowing {
Image("my_image")
.transition(.push(from: .bottom))
}
}
.background(Color.gray)
I assumed you added the .offset
modifier to achieve a "push from bottom" effect when the image appears. You can instead do this with a transition
instead.
我假设您添加了.Offset修改器,以在图像显示时实现“从底部推送”的效果。相反,您可以通过转换来实现这一点。
(IMHO .push(from: .top)
looks better)
(IMHO.PUSH(发件人:.TOP)看起来更好)
If I understand correctly, you want "image" to appear at the same time as the background, perhaps dropping down from behind the initial content? This is possible with the following changes:
如果我理解正确的话,你想让“图像”和背景同时出现,也许是从最初的内容后面掉下来?这可以通过以下更改来实现:
- make the image an overlay over the background
- add bottom padding to allow space for the image
- reveal the image + background by using a masking layer that is animated.
This approach reserves all the space needed when the view first appears, so the size of the VStack
doesn't change when the animation happens. Any content that follows the VStack
will not move when the image is revealed.
此方法保留了第一次显示视图时所需的所有空间,因此VStack的大小不会在动画发生时更改。当图像显示时,VStack后面的任何内容都不会移动。
Here you go, hope it's what you wanted:
给你,希望这是你想要的:
struct ExampleView: View {
@State private var isShowing = false
var body: some View {
VStack() {
HStack() {
Image(systemName: "person.fill") // "photo"
.resizable()
.scaledToFit()
.padding()
.frame(width: 70, height: 70)
.onAppear { animateImage() }
VStack(alignment: .leading) {
Text("Name")
Text("Company")
}
Spacer()
}
.padding(.bottom, 80)
}
.background {
Color.gray
.overlay(alignment: .bottom) {
Image(systemName: "fossil.shell.fill") // "image"
.resizable()
.scaledToFit()
.padding()
.frame(width: 80, height: 80)
}
.overlay(alignment: .bottom) {
Color(UIColor.systemBackground)
.frame(height: isShowing ? 0 : 80)
}
}
}
private func animateImage() {
withAnimation(.easeInOut.delay(1)) {
isShowing = true
}
}
}
更多回答
Thanks, I didn't know about push
. Actually, the effect of bottom
is really beautiful. But only available on iOS 16 or higher!
谢谢,我不知道推送的事。事实上,底部的效果真的很漂亮。但仅在iOS 16或更高版本上可用!
Thanks for this. The benefit is it's working with iOS 15 but it's more lines of code.
谢谢你给我这个。好处是它可以在iOS 15上运行,但它的代码行更多。
我是一名优秀的程序员,十分优秀!