欢迎订阅专栏《SwiftUI 2020教程》
QQ:3365059189
SwiftUI技术交流QQ群:518696470
动画曲线是一种在整个动画过程中表达速度的方式。在前面的示例中,您看到了“ easeInOut”效果。目前苹果内置了四个运动曲线
为了显示效果,我们通过下面等例子来体验一下
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:3365059189
SwiftUI技术交流QQ群:518696470
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。