SwiftUIで作りながら学ぶアニメーション  インジケーター編

by Ryo Tsuzukihashi

Slide 1

Slide 1 text

4XJGU6*㗧Ъ㘊㗪㗌㘉䕎㗶㘕㘾㙔㖽㘪㙚㙦㘗㙦㘫㘤㖽㘲㖽ᇜ QPUBUPUJQT !UTV[VLJ

Slide 2

Slide 2 text

ࣗݾ঺հ w ϠϑʔJ04ΤϯδχΞ w ೥ೖࣾͷ৽ଔ w 1BZ1BZϑϦϚJ04 w #POpSFJ04ӡӦ w झຯݸਓΞϓϦυοτֆ ॳొஃͰۓுத

Slide 3

Slide 3 text

ΰʔϧ

Slide 4

Slide 4 text

࡞Ζ͏ struct ContentView: View { var body: some View { Circle() .trim(from: 0, to: 0.6) .stroke(Color.green, lineWidth: 8) .frame(width: 48, height: 48) } }

Slide 5

Slide 5 text

Slide 6

Slide 6 text

StrokeStyle( lineWidth: CGFloat, lineCap: CGLineCap, lineJoin: CGLineJoin, miterLimit: CGFloat, dash: [CGFloat], dashPhase: CGFloat ) StrokeStyle

Slide 7

Slide 7 text

lineCap . round . square . butt

Slide 8

Slide 8 text

dash [ઢͷ௕͞, ۭനͷ௕͞, 2൪໨ͷઢͷ௕͞, 2൪໨ͷۭനͷ௕͞, ...] ഁઢͷܗঢ়Λ഑ྻͰࢦఆ͠·͢ɻ .stroke(Color.green, style: StrokeStyle( lineWidth: 8, lineCap: .round, dash: [0.1, 16]))

Slide 9

Slide 9 text

rotationEffect(_:anchor:) func rotationEffect( _ angle: Angle, anchor: UnitPoint = .center) -> some View Circle() . . . .rotationEffect( Angle(degrees: self.isAnimation ? 360 : 0) ) @State var isAnimation = false

Slide 10

Slide 10 text

.onAppear() { withAnimation( Animation .linear(duration: 1) .repeatForever(autoreverses: false)) { self.isAnimation.toggle() } } @available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *) public func withAnimation( _ animation: Animation? = .default, _ body: () throws -> Result) rethrows -> Result XJUI"OJNBUJPO @@

Slide 11

Slide 11 text

default linear easeIn easeOut easeInOut

Slide 12

Slide 12 text

άϦϯϐʔεΛଔۀ

Slide 13

Slide 13 text

AngularGradient(gradient: Gradient(colors: [.gray, .white]) άϥσʔγϣϯ Gradient(colors: [.gray, .white]) άϥσʔγϣϯ͍ͤͨ͞৭ͷ഑ྻͭҎ্⭕ w-JOFBS(SBEJFOUઢܗάϥσʔγϣϯ w"OHVMBS(SBEJFOUԁܗάϥσʔγϣϯ w3BEJBM(SBEJFOU์෺ঢ়άϥσʔγϣϯ

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

StrokeStyle( lineWidth: 8, lineCap: .round, dash: [0.1, 16], dashPhase: 8) ) ഁઢͷ։࢝ҐஔΛͣΒ͢ʂ

Slide 16

Slide 16 text

Circle() .trim(from: 0, to: 0.6) .stroke( AngularGradient( gradient: Gradient(colors: [.gray, .white]), center: .center), style: StrokeStyle( lineWidth: 8, lineCap: .round, dash: [0.1, 16], dashPhase: 8)) .frame(width: 48, height: 48) .rotationEffect( Angle(degrees: self.isAnimation ? 360 : 0)) .onAppear() { withAnimation( Animation .linear(duration: 1) .repeatForever(autoreverses: false)) { self.isAnimation.toggle() } }