Pro Yearly is on sale from $80 to $50! »

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

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

SwiftUIで作りながら学ぶアニメーション 
インジケーター編
Qiitaに詳しい記事あげます。

D4f04ef104c8fbfc9caa3c80e41692fd?s=128

Ryo Tsuzukihashi

February 12, 2020
Tweet

Transcript

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

  2. ࣗݾ঺հ w ϠϑʔJ04ΤϯδχΞ w ೥ೖࣾͷ৽ଔ w 1BZ1BZϑϦϚJ04 w #POpSFJ04ӡӦ w

    झຯݸਓΞϓϦυοτֆ ॳొஃͰۓுத
  3. ΰʔϧ

  4. ࡞Ζ͏ struct ContentView: View { var body: some View {

    Circle() .trim(from: 0, to: 0.6) .stroke(Color.green, lineWidth: 8) .frame(width: 48, height: 48) } }
  5. ʁ

  6. StrokeStyle( lineWidth: CGFloat, lineCap: CGLineCap, lineJoin: CGLineJoin, miterLimit: CGFloat, dash:

    [CGFloat], dashPhase: CGFloat ) StrokeStyle
  7. lineCap . round . square . butt

  8. dash [ઢͷ௕͞, ۭനͷ௕͞, 2൪໨ͷઢͷ௕͞, 2൪໨ͷۭനͷ௕͞, ...] ഁઢͷܗঢ়Λ഑ྻͰࢦఆ͠·͢ɻ .stroke(Color.green, style: StrokeStyle(

    lineWidth: 8, lineCap: .round, dash: [0.1, 16]))
  9. rotationEffect(_:anchor:) func rotationEffect( _ angle: Angle, anchor: UnitPoint = .center)

    -> some View Circle() . . . .rotationEffect( Angle(degrees: self.isAnimation ? 360 : 0) ) @State var isAnimation = false
  10. .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<Result>( _ animation: Animation? = .default, _ body: () throws -> Result) rethrows -> Result XJUI"OJNBUJPO @@
  11. default linear easeIn easeOut easeInOut

  12. άϦϯϐʔεΛଔۀ

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

    w"OHVMBS(SBEJFOUԁܗάϥσʔγϣϯ w3BEJBM(SBEJFOU์෺ঢ়άϥσʔγϣϯ
  14. None
  15. StrokeStyle( lineWidth: 8, lineCap: .round, dash: [0.1, 16], dashPhase: 8)

    ) ഁઢͷ։࢝ҐஔΛͣΒ͢ʂ
  16. 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() } }
  17. None
  18. None
  19. 4XJGU6*ͰΦϦδφϧΞχϝʔγϣϯΛ࢖ͬͯ ΞϓϦΛϦονʹʂ