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

欢迎订阅专栏《SwiftUI 2020教程》
本文价值与收获看完本文后，您将能够作出下面的动画
文章图片
四种内置曲线运动效果四种内置曲线运动效果看完本文您将掌握的技能

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

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

easeInout
default
easeIn
easeOut

Curve 例子为了显示效果，我们通过下面等例子来体验一下
1、做个照片struct，方便配置效果

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、配置图片移动动画

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

3、完整效果

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 【SwiftUI|SwiftUI 动画控制运行轨迹之Curve（2020教程）】QQ:3365059189
SwiftUI技术交流QQ群:518696470