尝试根据设备类型 iPhone vs iPad 设置图像动画的开始位置

Question

我正在尝试将图像从右向左移动以制作动画，但可以弄清楚如何根据设备类型（iPad 与 iPhone）更改开始和结束位置。 我无法为视图内的起始位置设置 xpos 和 ypos，否则我会收到“Type () 无法符合 View”错误，因此我将代码移至 .onAppear，它根据设备类型设置 xpos 和 ypos，但此代码在起始位置之后执行已设置。 代码如下

import Foundation
import SwiftUI

struct Home1View: View {

    @State var xpos: CGFloat = 350
    @State var ypos: CGFloat = 450

    @State var opac: Double = 1.0
    @State var dHeight: Int = 0
    let layoutProperties:LayoutProperties
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                ResponsiveView {properties in
                    VStack{
                        Text("XXXX")
                        
                
                Image("number-one")
                    .resizable()
                    .frame(width: layoutProperties.dimensValues.frameSz, height: layoutProperties.dimensValues.frameSz)
                    .position(x: xpos, y: ypos)
                    .opacity(opac)
                 
                    .onAppear {
                        //ipad 13in width = 1032 height 870
                        print("display height on appear = ", geometry.size.height)
                        print("display width on appear = ", geometry.size.width)
                        xpos = geometry.size.width - 100
                        ypos = geometry.size.height - 150
                        
                        withAnimation(Animation.easeInOut(duration: 3).repeatCount(2, autoreverses: false)) {
                            xpos = 100
                            //.position(x: layoutProperties.dimensValues.xpos, y: layoutProperties.dimensValues.ypos-250)
                        } completion: {
                            opac = 0.0
                        }
                    }
            } //end ZStack
        } //end geometry
    }
}

Answer 1

我建议以不同的方式执行动画，而不是尝试设置初始

.position

然后修改此位置：

• 对于相对于底部尾随角的初始位置，在图像上设置

  .bottom

  和

  .trailing

  填充，然后使用

  .frame

   设置最大尺寸的 

  alignment: .bottomTrailing

• 通过对图像应用 x 和 y 偏移来执行动画。

下面的更新版本从距离底部 100 点和距离后缘 50 点的图像开始。动画将其移动到距顶部 100 点和距前缘 50 点的位置（换句话说，移动到对角，与安全区域边缘具有相同的间隙）。这适用于所有屏幕尺寸。

@State var xOffset = CGFloat.zero
@State var yOffset = CGFloat.zero

Image("number-one")
    .resizable()
    .frame(width: layoutProperties.dimensValues.frameSz, height: layoutProperties.dimensValues.frameSz)
    .padding(.bottom, 100)
    .padding(.trailing, 50)
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
    .offset(x: xOffset, y: yOffset)
    .opacity(opac)
    .onAppear {
        withAnimation(Animation.easeInOut(duration: 3).repeatCount(2, autoreverses: false)) {
            xOffset = (2 * 50) + layoutProperties.dimensValues.frameSz - geometry.size.width
            yOffset = (2 * 100) + layoutProperties.dimensValues.frameSz - geometry.size.height
        } completion: {
            opac = 0.0
        }
    }