Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftUIで作りながら学ぶアニメーション インジケーター編
Search
Ryo Tsuzukihashi
February 12, 2020
Programming
0
610
SwiftUIで作りながら学ぶアニメーション インジケーター編
SwiftUIで作りながら学ぶアニメーション インジケーター編
Qiitaに詳しい記事あげます。
Ryo Tsuzukihashi
February 12, 2020
Tweet
Share
More Decks by Ryo Tsuzukihashi
See All by Ryo Tsuzukihashi
SwiftUI Transaction を徹底活用!ZOZOTOWN UI開発での活用事例
tsuzuki817
1
1.1k
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
3
1.1k
二次元コードを読み取りやすくするために 画面を強制的に明るくするのは もうやめにしませんか?👀
tsuzuki817
0
430
動画だけじゃない!iOS 15のピクチャ・イン・ピクチャを使って好きなUIを表示させよう!
tsuzuki817
3
4.9k
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
2
1.1k
Complications and widgets: Reloadedの要約
tsuzuki817
1
1.2k
Speech framework tips
tsuzuki817
1
2.7k
Build complication in SwiftUI の要約
tsuzuki817
0
710
SwiftUI で Neumorphism!!!
tsuzuki817
2
1.9k
Other Decks in Programming
See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
45
30k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
470
GoのGenericsによるslice操作との付き合い方
syumai
3
680
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
技術同人誌をMCP Serverにしてみた
74th
0
270
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
ReadMoreTextView
fornewid
1
460
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
C++20 射影変換
faithandbrave
0
520
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
650
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Designing for Performance
lara
609
69k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
RailsConf 2023
tenderlove
30
1.1k
We Have a Design System, Now What?
morganepeng
53
7.7k
Writing Fast Ruby
sferik
628
61k
Rails Girls Zürich Keynote
gr2m
94
14k
Designing Experiences People Love
moore
142
24k
Transcript
4XJGU6*㗧Ъ㘊㗪㗌㘉䕎㗶㘕㘾㙔㖽㘪㙚㙦 㘗㙦㘫㘤㖽㘲㖽ᇜ QPUBUPUJQT !UTV[VLJ
ࣗݾհ w ϠϑʔJ04ΤϯδχΞ w ೖࣾͷ৽ଔ w 1BZ1BZϑϦϚJ04 w #POpSFJ04ӡӦ w
झຯݸਓΞϓϦυοτֆ ॳొஃͰۓுத
ΰʔϧ
࡞Ζ͏ struct ContentView: View { var body: some View {
Circle() .trim(from: 0, to: 0.6) .stroke(Color.green, lineWidth: 8) .frame(width: 48, height: 48) } }
ʁ
StrokeStyle( lineWidth: CGFloat, lineCap: CGLineCap, lineJoin: CGLineJoin, miterLimit: CGFloat, dash:
[CGFloat], dashPhase: CGFloat ) StrokeStyle
lineCap . round . square . butt
dash [ઢͷ͞, ۭനͷ͞, 2൪ͷઢͷ͞, 2൪ͷۭനͷ͞, ...] ഁઢͷܗঢ়ΛྻͰࢦఆ͠·͢ɻ .stroke(Color.green, style: StrokeStyle(
lineWidth: 8, lineCap: .round, dash: [0.1, 16]))
rotationEffect(_:anchor:) func rotationEffect( _ angle: Angle, anchor: UnitPoint = .center)
-> some View Circle() . . . .rotationEffect( Angle(degrees: self.isAnimation ? 360 : 0) ) @State var isAnimation = false
.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 @@
default linear easeIn easeOut easeInOut
άϦϯϐʔεΛଔۀ
AngularGradient(gradient: Gradient(colors: [.gray, .white]) άϥσʔγϣϯ Gradient(colors: [.gray, .white]) άϥσʔγϣϯ͍ͤͨ͞৭ͷྻͭҎ্⭕ w-JOFBS(SBEJFOUઢܗάϥσʔγϣϯ
w"OHVMBS(SBEJFOUԁܗάϥσʔγϣϯ w3BEJBM(SBEJFOU์ঢ়άϥσʔγϣϯ
None
StrokeStyle( lineWidth: 8, lineCap: .round, dash: [0.1, 16], dashPhase: 8)
) ഁઢͷ։࢝ҐஔΛͣΒ͢ʂ
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() } }
None
None
4XJGU6*ͰΦϦδφϧΞχϝʔγϣϯΛͬͯ ΞϓϦΛϦονʹʂ