iOS SwiftUI 动画控制运行轨迹之Curve（2020教程）

欢迎订阅专栏《SwiftUI 2020教程》

本文价值与收获

看完本文后，您将能够作出下面的动画

四种内置曲线运动效果

四种内置曲线运动效果

看完本文您将掌握的技能

• 掌握4种内置动画曲线使用
• 实现移动
• 实现颜色变换
• 欣赏远古壁画

QQ:3365059189

SwiftUI技术交流QQ群:518696470

动画曲线是一种在整个动画过程中表达速度的方式。在前面的示例中，您看到了“ easeInOut”效果。目前苹果内置了四个运动曲线

• easeInout
• default
• easeIn
• easeOut

Curve 例子

为了显示效果，我们通过下面等例子来体验一下

1、 做个照片struct，方便配置效果

代码语言：txt复制

struct ImageBox: View {
    @State var name = "1"
    var body:some View {
        Image(name)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width:100)
            .cornerRadius(10)
            .shadow(color: .white, radius: 10, x: 0, y: 0)
            .padding()
    }
}

2、 配置图片移动动画

代码语言：txt复制

 GeometryReader { gr in
                    ImageBox(name: "1")
                        .position(x: self.move ? (gr.size.width - 40) : 40, y: 40)
                        .animation(.easeInOut(duration: 2))
                    
                }
                

3、完整效果

代码语言：txt复制

import SwiftUI
struct ImageBox: View {
    @State var name = "1"
    var body:some View {
        Image(name)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width:100)
            .cornerRadius(10)
            .shadow(color: .white, radius: 10, x: 0, y: 0)
            .padding()
    }
}
struct CurveView: View {
    @State private var move = false
    var body: some View {
        VStack{
            Text("QQ:3365059189")
                .padding()
            Text(" SwiftUI技术交流QQ群:518696470 ")
                
                .font(.largeTitle)
                .padding()
                .foregroundColor(.white)
                .background(self.move ? Color.orange : Color.purple)
                .cornerRadius(10)
                .shadow(color: .white, radius: 4, x: 0, y: 0)
               .animation(.easeInOut(duration: 2))
            // Spacer()
            
            
            Group{
                
                GeometryReader { gr in
                    ImageBox(name: "1")
                        .position(x: self.move ? (gr.size.width - 40) : 40, y: 40)
                        .animation(.easeInOut(duration: 2))
                    
                }
                
                Text("easeInOut: 慢,快,慢")
                    .font(.title)
                    .foregroundColor(.white)
                
                GeometryReader { gr in
                    ImageBox(name: "2")
                        .position(x: self.move ? (gr.size.width - 40) : 40, y: 40)
                        .animation(.easeIn(duration: 2))
                }
                Text("easeIn: 慢")
                    .font(.title)
                    .foregroundColor(.white)
                
                
                GeometryReader { gr in
                    ImageBox(name: "3")
                        .position(x: self.move ? (gr.size.width - 40) : 40, y: 40)
                        .animation(.easeOut(duration: 2))
                }
                
                Text("easeOut: 快")
                    .font(.title)
                    .foregroundColor(.white)
                GeometryReader { gr in
                    ImageBox(name: "4")
                        .position(x: self.move ? (gr.size.width - 40) : 40, y: 40)
                        .animation(.linear(duration: 2))
                }
                Text("easeIn: 匀速")
                    .font(.title)
                    .foregroundColor(.white)
                
                //ImageBox(name: "2")
                //ImageBox(name: "3")
                //ImageBox(name: "4")
                
                
            }
            // group end
            Spacer()
            
            
            
            Button(action:{
                self.move.toggle()
                //print("here")
            }) {
                Text(" 启动 ")
                    .font(.title)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.orange)
                    .cornerRadius(20)
                    .shadow(radius: 10)
            }.padding()
            
            
            
        }.background(
            Image("3yue")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
        )
    }
}

如需源码可以加入我QQ

QQ:3365059189

SwiftUI技术交流QQ群:518696470

• 请关注我的专栏icloudend, SwiftUI教程与源码 https://www.jianshu.com/c/7b3e3b671970

swift ios

0 人点赞