SwiftUI中动画Animation（四）手势+动画

效果

2020-05-30 23.56.34.gif

代码

struct GesturesAnimation: View {
    @State private var offfSet:CGSize = .zero
    var body: some View {
        LinearGradient(
            gradient: Gradient(colors: [.red,.purple]), startPoint: .topLeading, endPoint: .bottomTrailing
        )//线性渐变
            .frame(width:300,height: 300)
        .clipShape(RoundedRectangle(cornerRadius: 20))
        .offset(offfSet)//设置偏移量
        .gesture(//手势
            DragGesture()//拖拽手势
                .onChanged{//如果使用到内部参数可以直接通过{}方式书写
                    self.offfSet = $0.translation
                }
                .onEnded({ (gesture) in
                //如果没有用到内部参数  则需要正常书写 或者 在内部调用下_ in如：
                    //.onEnded{
                        //_ in
                    //}
                    // 在数据改变的是有应用动画效果
                    withAnimation(.spring()){
                        self.offfSet = .zero //取消拖拽返回原来位置
                    }
                    
                })
                
                
        )
        
    }
}

文字添加拖拽组合动画效果

效果：

2020-05-31 15.40.22.gif

代码：

@State private var letters = Array("数组文字动画效果")
@State private var offfSet2:CGSize = .zero
@State private var enabled = false

HStack(spacing:0){
                ForEach(letters.indices,id:\.self){
                    index in
                    Text(String(self.letters[index]))
                        .font(.title)
                        .background(self.enabled ? Color.red : Color.purple)
                        .foregroundColor(.white)
                        .offset(self.offfSet2)
                        .animation(Animation.default.delay(Double(index)/20))
                }
                
            }
            .gesture(
                DragGesture()
                    .onChanged{self.offfSet2 = $0.translation}
                    .onEnded{_ in
                        self.offfSet2 = .zero
                        self.enabled.toggle()
                    }
            )