0

タイマーで0.01秒ごとに数字を1増やし、その数字をキーとして辞書から取り出した値をUILabelに表示するというアプリを作りました。が、ラベルにアニメーションをつけたところ、それも0.01秒ごとに実行されてしまい、ラベルが点滅したりしてしまいます。

override func viewDidLoad() {
    super.viewDidLoad()
    timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(labelUpdate), userInfo: nil, repeats: true)
}

func labelUpdate() {
    testInt += 1
    if let label = testDict[testInt] {
        let anime = CATransition()
        anime.type = kCATransitionMoveIn
        anime.subtype = kCATransitionFromBottom
        anime.duration = 0.2
        testLabel.layer.add(anime, forKey: nil)
        testLabel.text = label
    }
}

辞書のキーは毎回異なるのでこのように、キーがnilでないときにラベルを更新という処理にしたのですが、nilのときにもanimeが実行されているようです・・・
変更するときのみ、アニメーションしてくれればそれでいいのですが・・・

 
  
追記
辞書は例えばvar testDict = [1: "りんご", 200:"バナナ", 470:"卵"]のようなものです。
testIntは任意のタイミングでUIButtonでリセットします。

理想は上記の例で言えば"りんご"から"バナナ"に変更されるときに1度だけアニメーションするというものです。

今のままで実行すると、"りんご"や"バナナ"と表示されたUILabelが点滅したあとに突然指定したアニメーションをしたり、"りんご"という文字が点滅した文字の下にもう一つ現れてそこに点滅している文字に重なったりと、正しい動きではないと思われる動きになってしまいます。

 
  
さらに追記
再度、確認させてもらったところ、
点滅したり文字が重なったりということは起こらず、ただアニメーションに関するコードが全くないかのように普通に文字が入れ替わるという動作になってしまいました。

 
  
コード追加

var testDict = ["00:01": "りんご", "00:05":"バナナ", "00:07":"卵"]
func labelUpdate() {
    let min = Int(player.currentPlaybackTime) / 60
    let sec = Int(player.currentPlaybackTime.truncatingRemainder(dividingBy: 60))
    timeKey = String(format: "%02d:%02d", min, sec)
    //この部分が問題でした。大変申し訳ございません
    if let label = testDict[timeKey] {
        let anime = CATransition()
        anime.type = kCATransitionMoveIn
        anime.subtype = kCATransitionFromBottom
        anime.duration = 0.2
        testLabel.layer.add(anime, forKey: nil)
        testLabel.text = label
    }
}

timerを0.01秒ごとにしたのはmm:ssが実際の再生中の曲の再生時間と同期するためです。
currentPlaybackTimeが1秒増えるタイミングとtimerで更新しているmm:ssの値がずれてしまうとコンマ数秒単位でずれてしまうので・・・

しかしこのせいで、testDict[timeKey]がnilでないときの処理が0.01x100回実行されてしまうようです。

点滅するのは100回MoveInが実行されるため。
重なって表示されるのは次の秒数になった瞬間、testLabel.text = labelが保持されたまま0.2秒かけてアニメーションも実行されたためでした。

本当に申し訳ない話ですが、ここまで気がつきませんでした。

見た目では問題なかった(気がつかなかった)のですが、こうなるとtestLabel.text = labelも100回繰り返されていることになっていますよね・・・。
その場合、どうしたらいいのでしょうか。
今は辞書キーがnilじゃなかったら更新を1秒に100回繰り返していますが、
1度変わってしまえば残り99回は必要ありませんし、そうすればアニメーションも正常に機能すると思うのです・・・。

つまり、辞書キーがnilじゃないとき、1度のみUILabelの表示を更新してそのときアニメーションを実行、また別のキーと値が取り出せたらそれも一回のみUILabelの表示の更新とアニメーションという処理をしたいということでした。

10
  • 0.01秒に1回と言うのはかなり慌しいタイマーの使い方ですし、testIntが増えっぱなしでいつリセットするんだろうとか色々ツッコミどころがあるのですが、「変更するときのみ、testDictに値が入っている」と言う状態を作れば、「変更するときのみ、アニメーション」と言う動作になると思うのですが。典型的な場合のtestDictの中身と、その中身の時にどんな動作を期待しているのかご質問に追記していただけますでしょうか。(ご自身の質問に対しては「編集」リンクが有効になっているはずです。)ちなみにコードをよく読まないとiOS用のコードであることがわかりません。SwiftはiOSのほか、macOSやLinuxでのプログラミングにも使われていますので、タグでプラットフォームを示すようにお願いします。
    – OOPer
    Commented 2017年9月3日 7:39
  • ご指摘ありがとうございます。タグ追加と追記をさせていただきました。
    – mitci
    Commented 2017年9月3日 8:06
  • 更新ありがとうございます。んが、こちらでご質問に記載のコード(testDictも)で、試してみたところ、viewDidLoad()から0.01秒目に実行される"りんご"のアニメーションが遅いマシンでカクつくことがあるだけで、ご記載のような動きにはなりませんでした。コードの問題ではなく、testDictの問題で、中身がご質問内容のような状態にはなっていない可能性があると思うのですが、その点はチェックされましたでしょうか?
    – OOPer
    Commented 2017年9月3日 8:17
  • わざわざありがとうございます。カクつくだけで、アニメーションは"りんご"が代入されたとき1回のみ実行されたということでしょうか?
    – mitci
    Commented 2017年9月3日 10:10
  • 説明が短くて申し訳ありません。testDictにデータを入れた0.01秒後の"りんご", 2秒後の"バナナ", 4.7秒後の"卵"の3回アニメーションが実行された、と言うのがこちらで観察された内容です。
    – OOPer
    Commented 2017年9月3日 10:13

1 件の回答 1

0

すでにご質問の中で根本的な原因が記載されていますが、秒部分までをキーとして0.01秒ごとに一致するキーがあるかどうかをチェックしているので、時間が一致している間の1秒間、およそ100回アニメーションを実施している、という状態になっています。

アニメーションの開始タイミングをplayerの現在再生時間(currentPlaybackTime)に同期させたいという要求があるようですので、適当な時間でポーリングを行うのは仕方ないところでしょうから、単純に「1回アニメーションを始めたら、時間が変わるまで次のアニメーションは始めない」と言うチェックを入れるのが、簡単で確実だろうと思います。

(ちなみにポーリングの間隔は0.1秒程度でもほとんどの普通の人には違和感がないと思いますが。)

//最後にアニメーションしたタイミング
var lastTimeKey = "--:--"

func labelUpdate() {
    let min = Int(player.currentPlaybackTime) / 60
    let sec = Int(player.currentPlaybackTime.truncatingRemainder(dividingBy: 60))
    let timeKey = String(format: "%02d:%02d", min, sec)
    //タイミングが変わった時だけアニメーションすべきかどうかチェックを入れる
    if timeKey != lastTimeKey, let label = testDict[timeKey] {
        let anime = CATransition()
        anime.type = kCATransitionMoveIn
        anime.subtype = kCATransitionFromBottom
        anime.duration = 0.2
        testLabel.layer.add(anime, forKey: nil)
        testLabel.text = label

        //最後にアニメーションしたタイミングを覚えておく
        lastTimeKey = timeKey
    }
}

もちろんlastTimeKeyの値はplayer.currentPlaybackTimeがリセットされるような操作をした場合には、再度初期値に戻しておく必要があります。

他にももっと良い方法があるかもしれません。ご自身でより良い方法を見つけられた場合には、遠慮なさらず是非とも回答の形で投稿していただければと思います。

2
  • 完璧なご回答ありがとうございます!実機でテストした結果、理想どうりのものになりました。わたしひとりでは、if lastTimeKey != timeKeyの発想がなく、もっと複雑なコードを組まなくてはならないと考えてしまっていました。なにしろアニメーションを実装するまで.textの代入が100回も行われていることにも気がつかなかったほどなので・・・。また、ご丁寧にコメント、ご回答までいただき、大変ありがとうございました!ご回答いただくだけでなく、行き詰まった際の考え方や発想の違いなど、とても参考になりました!   ちなみにですが、0.01秒にしたのはおそらく100回の繰り返しにかなりの負荷がかかった実機上で秒数がずれることに悩み、とりあえず数を小さくすればぴったり合うかと思って(少々ムキになって)実装してしまった数字でした。
    – mitci
    Commented 2017年9月4日 9:44
  • 何やらご謙遜が過ぎるような気もするのですが、コメントのお言葉はありがたく受け取っておきます。私としては、質問者と回答者(いつか立場が入れ替わるかもしれないので、区別にはあまり意味はありませんが)の間でうまく情報共有できれば、より良い解決策により早く近づけると言うお手本と言う意味でも、私の参加が解決に役立てたというご報告をいただけるのは大変嬉しいことです。「0.01秒」の問題についても、実際にご自分のアプリについてあれこれ悩んで調整された経験と、頭の中の想像だけで「理屈の上では問題ないはず」なんて書くのとは、最終的に同じ結論にたどり着いたとしても、全く重みが違うだろうと思います。開発の仕事は何かと大変でしょうが、折に触れ当サイトを覗いていただいて、そういった経験を活かしていただけることを期待しております。
    – OOPer
    Commented 2017年9月4日 11:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。