swiftui 轨迹_SwiftUI 动画控制运行轨迹之Curve（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

QQ:3365059189 SwiftUI技术交流QQ群:518696470