Swift UI: カウントダウンタイマーに合わせて円形のプログレスバーを動かしたい

前提・実現したいこと

プログラミング初学者です。初めての個人的なアプリ開発として、プレゼン用のシンプルなカウントダウンタイマーを作ろうとしています。SwiftのSwift UIフレームワークを利用して、Xcodeで作業してます。

タイマーの数字を囲むような形で、円形のプログレスバーを配置したのですが、タイマーの数字がカウントダウンされていても、プログレスバーが変化せず、カウントが0になった瞬間にプログレスバーが急に非表示のカウント完了の状態になります。

いろいろ情報を調べ、カウントダウンのController部分を記述するファイルと、UIとして画面に表示するView部分を記述するファイルを分ております。カウントダウンされる数値の同期については、仕組みのファイルでクラスに@ObservableObjectを、プロパティであるカウントダウン数値の変数に@Publishedのキーワードをつけました。さらに、画面表示のファイル側で、仕組み側のクラスをインスタンス化して、@ObservedObjectのキーワードをつけました。結果的に、数字はUI上でもきちんとカウントダウンされ、コンソールにprintコマンドで出力しても問題ありませんが、プログレスバーは変化しません。

自分では間違いが見つけ出せなかったため、ご相談させていただきます。

発生している問題・エラーメッセージ

エラーはありません。

該当のソースコード

Controllerファイルのコード

swift
1import SwiftUI
2
3class CountDownTimer: ObservableObject {
4    // この変数の変化に同期する形でカウントダウンの数字、プログレスバーの表示に動きをつける
5    @Published var counter: CGFloat = 10
6    
7    let interval = 1.0
8    
9    var timer: Timer?
10    
11    func start() {
12        timer = Timer.scheduledTimer(withTimeInterval: interval, repeats: true, block: { _ in
13            self.counter -= 1
14            print(self.counter)
15          
16            if self.counter <= 0 {
17            self.timer?.invalidate()
18            self.timer = nil
19          }
20        })
21    }
22    
23    func stop() {
24        self.timer?.invalidate()
25    }
26}

Viewファイルのコード

Swift
1import SwiftUI
2
3struct PresentationView: View {
4    
5    @ObservedObject var countDownTimer = CountDownTimer()
6        
7    var body: some View {
8        NavigationView {
9            VStack {
10                
11                Spacer()
12                
13                // カウントダウンタイマー
14                VStack {
15                    ZStack {
16                        Text(String(format: "%.0f", countDownTimer.counter))
17                            .font(Font.largeTitle.monospacedDigit())
18                            .fontWeight(.light)
19                            .padding()
20                        
21                        Circle()
22                            .stroke(Color(.systemIndigo), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel))
23                            .aspectRatio(contentMode: .fit)
24                            .padding()
25                        
26                        Circle().trim(from: 0, to: countDownTimer.counter)
27                            .stroke(Color(.systemTeal), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel))
28                            .aspectRatio(contentMode: .fit)
29                            .rotationEffect(Angle(degrees: -90))
30                            .padding()
31                    }
32
33                    Spacer()
34
35                    // スタートボタンとストップボタン
36                    HStack {
37                        Button(action: {self.countDownTimer.stop()}) {
38                            Text("STOP")
39                                .fontWeight(.light)
40                                .foregroundColor(.white)
41                        }.frame(maxWidth: 75, maxHeight: 75)
42                            .padding()
43                            .background(Color(.systemIndigo))
44                            .cornerRadius(100)
45                            .padding()
46
47                        Button(action: {self.countDownTimer.start()}) {
48                            Text("START")
49                                .fontWeight(.light)
50                                .foregroundColor(.white)
51                        }.frame(maxWidth: 75, maxHeight: 75)
52                            .padding()
53                            .background(Color(.systemTeal))
54                            .cornerRadius(100)
55                            .padding()
56
57                    }
58
59                }
60            }
61        }
62    }
63}

補足情報（FW/ツールのバージョンなど）

Xcode Version 11.5 (11E608c)
Swift 5.2

行動規範の内容に同意します

回答1件

ベストアンサー

trim の値は 0 〜 1 の値を指定する必要がありますので、CountDownTimer の最大値で割りましょう。
(できれば最大値も CountDownTimer のプロパティにしたほうが綺麗ですね。)

diff
1-                        Circle().trim(from: 0, to: countDownTimer.counter)
2+                        Circle().trim(from: 0, to: countDownTimer.counter / 10)

ちなみに、trim を選んで副ボタンクリックして Show Quick Help するとこんなのが出てきて、from と to のデフォルト値がそれぞれ 0, 1 なのできっと 0 〜 1 で指定するんだろうと判断しましたが、はっきりとは書いてないですね。また、Web 上のリファレンスは情報が少なすぎ…。