面试题：Swift中如何在SwiftUI里实现一个简单的淡入动画效果

Question

请用Swift编写SwiftUI代码，实现一个视图从透明到不透明的淡入动画效果，要求指定动画时长为2秒。解释关键的动画修饰符及其作用。

Answer 1

import SwiftUI

struct FadeInView: View {
    @State private var isVisible = false
    
    var body: some View {
        VStack {
            Text("淡入动画示例")
               .opacity(isVisible ? 1 : 0)
               .animation(.easeInOut(duration: 2), value: isVisible)
        }
       .onAppear {
            isVisible = true
        }
    }
}

struct FadeInView_Previews: PreviewProvider {
    static var previews: some View {
        FadeInView()
    }
}

• 关键动画修饰符及其作用：
  • opacity(_:)：用于设置视图的不透明度，参数取值范围从0（完全透明）到1（完全不透明）。在上述代码中，通过@State变量isVisible来控制Text视图的不透明度，从而实现淡入效果。
  • animation(_:value:)：该修饰符用于指定应用于视图的动画。animation(.easeInOut(duration: 2), value: isVisible)表示应用一个时长为2秒、缓动效果为easeInOut的动画，并且该动画会在isVisible变量发生变化时触发。easeInOut会使动画开始和结束时速度较慢，中间速度较快，使动画效果更加自然。
  • onAppear：这是一个视图修饰符，在视图出现时执行其闭包中的代码。这里在视图出现时将isVisible设置为true，从而触发淡入动画。