Swiftで一連の画像ビューを順番にアニメーション化するにはどうすればよいですか?

Messi10

私はこれをしばらくの間理解しようとしていたが役に立たなかった。基本的に、1行1列でアニメーション化するUIImageViewの配列があります。現在、それらはすべて正しく、しかし同時にアニメートします。さらに、現在は同時に実行されているように見えるので、下部のコードはすべてのアニメーションが完了した後にのみ実行するようにします。私はswiftにかなり慣れていないので、forループがどのよう機能するか完全には理解していないと思いますか?私の考えでは、このコード配列内のすべての画像ビューをループする必要があり、それが完了した後にのみ、下部のコードを実行する必要があります。ループの各反復でhighlightCardsメソッドを呼び出す必要がありますが、それも発生していないようです。正しい画像が移動されると、アレイが正しく開始されることを知っています。

コードは次のとおりです。

PlayedCardsは、カードインデックスを持つintの配列です。

game.boardは、カードオブジェクトの配列です(UIImageView)

ハイライトカード()は、現在再生可能なカードを強調表示するだけです

完了ブロックのコードはロジスティクス専用であり、正しく機能していることがわかります

「新しいゲームをセットアップする」コメントの下のコードは、すべてのアニメーションが完了した後にのみ実行する必要があるものです

for i in 0..<game.playedCards.count {
    // update highlights
    self.highlightCards()

    // animate cards off screen
    let endPoint: CGPoint = CGPoint(x: 1000, y: 250 )

    UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 3, delay: 2, options: UIView.AnimationOptions.curveEaseInOut, animations: {
        () -> Void in
        self.game.board[self.game.playedCards[i]].center = endPoint
    }, completion: {
        (Bool) -> Void in
        self.game.board[self.game.playedCards[i]].removed = true
        self.game.board[self.game.playedCards[i]].removeFromSuperview()
        self.currentCardCount = self.currentCardCount - 1
    })
}

// set up next turn
game.blueTurn = !game.blueTurn
self.setBackground()
self.setSuitIndicators()
self.highlightCards()
schrismartin

あなたは正しい方向に進んでいます!ここでの唯一の問題は、アニメーション関数が非同期で実行されることです。つまり、次のループに進む前に、前のものがアニメーション化を終了するまで待機しません。

あなたはすでにcompletionクロージャーを使用する方法の一部ですただし、前のアイテムの完了後に次のアイテムをアニメーション化するのを待ちたい場合は、基本的に、完了ブロック内からプロパティアニメーターを再度実行する方法を見つける必要があります。

これを行う最良の方法は、関数へのプロパティアニメーション呼び出しを抽出することです。その後、これが簡単になります!

// This is a function that contains what you've included in your code snippet.
func animateCards() {

    // update highlights
    highlightCards()

    // animate cards off screen
    let endPoint: CGPoint = CGPoint(x: 1000, y: 250)
    recursivelyAnimateCard(at: game.playedCards.startIndex, to: endPoint) {

        //set up next turn
        self.game.blueTurn = !self.game.blueTurn
        self.setBackground()
        self.setSuitIndicators()
        self.highlightCards()
    }
}

// This function replicates your for-loop that animates everything.
func recursivelyAnimateCard(at index: Int, to endPoint: CGPoint, completion: () -> Void) {

    // If this triggers, we've iterated through all of the cards. We can exit early and fire off the completion handler.
    guard game.playedCards.indices.contains(index) else {
        completion()
        return 
    }

    UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 3, delay: 2, options: UIView.AnimationOptions.curveEaseInOut, 
    animations: {
        self.game.board[self.game.playedCards[index]].center = endPoint
    }, 
    completion: { _ in
        self.game.board[self.game.playedCards[index]].removed = true
        self.game.board[self.game.playedCards[index]].removeFromSuperview()
        self.currentCardCount = self.currentCardCount - 1

        // Call this function again on completion, but for the next card.
        self.recursivelyAnimateCard(at: index + 1, to: endPoint, completion: completion)
    })
}

編集:すべてが完了した「次のターン」コードを実行する必要があるとは思いませんでした上記のコードを更新して、すべてのカードが画面から削除された後に起動する完了ハンドラーを含めました。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

SwiftUIを使用して一連の画像をアニメーション化するにはどうすればよいですか?

分類Dev

SwiftUIを使用して一連の画像をアニメーション化するにはどうすればよいですか?

分類Dev

同じ軌道経路上の複数の要素を順番にアニメーション化するにはどうすればよいですか?

分類Dev

画像のぼやけをアニメーション化するにはどうすればよいですか?

分類Dev

アニメーション化された他のビューの下にビューを配置するにはどうすればよいですか?

分類Dev

パターンアイテムを順番にアニメーション化するにはどうすればよいですか?

分類Dev

周期的に画像をアニメーション化するにはどうすればよいですか? `

分類Dev

異なるポイントで同時に複数のビューをアニメーション化するにはどうすればよいですか?

分類Dev

SwiftでNSLayoutConstraintをアニメーション化するにはどうすればよいですか?

分類Dev

アニメーションを使用してビューを右から左に連続的に移動するにはどうすればよいですか?

分類Dev

展開/折りたたみビューのアイコンをアニメーション化するにはどうすればよいですか?

分類Dev

XAMLでリストビューをアニメーション化しないようにするにはどうすればよいですか?

分類Dev

ナビゲーション(画像の上にある)をアニメーションで移動するにはどうすればよいですか?

分類Dev

matplotlibを使用して一連のポイントをアニメーション化するにはどうすればよいですか?

分類Dev

SwiftUIで、公開ビューの変更をアニメーション化するにはどうすればよいですか?

分類Dev

react-springを使用して2つのアニメーションを順番に実行するにはどうすればよいですか?

分類Dev

Canvas - 複数の画像を一度にアニメーション化するにはどうすればよいですか?

分類Dev

最初のアニメーションの後に2番目のアニメーションを実行するにはどうすればよいですか?

分類Dev

Androidでビューを同時にアニメーション化、スケーリング、変換するにはどうすればよいですか?

分類Dev

別の画像に触れたときに画像をアニメーション化するにはどうすればよいですか?

分類Dev

この方法でナビゲーションバーをアニメーション化するにはどうすればよいですか?

分類Dev

アニメーション化されるビューにonClickListenerを設定するにはどうすればよいですか?

分類Dev

@ObservedObjectへの変更をアニメーション化するにはどうすればよいですか?

分類Dev

PagerTransformアニメーションの後にViewPagerのアイテムをアニメーション化するにはどうすればよいですか?

分類Dev

点滅する画像アニメーションを作成するにはどうすればよいですか?

分類Dev

PowerPointアニメーション中に画像を表示するにはどうすればよいですか?

分類Dev

Flutterでアニメーション画像を表示するにはどうすればよいですか?

分類Dev

Swiftで描画をアニメーション化するだけでなく、UIImageViewの縮尺を変更するにはどうすればよいですか?

分類Dev

NSViewをカーブでアニメーション化するにはどうすればよいですか

Related 関連記事

  1. 1

    SwiftUIを使用して一連の画像をアニメーション化するにはどうすればよいですか?

  2. 2

    SwiftUIを使用して一連の画像をアニメーション化するにはどうすればよいですか?

  3. 3

    同じ軌道経路上の複数の要素を順番にアニメーション化するにはどうすればよいですか?

  4. 4

    画像のぼやけをアニメーション化するにはどうすればよいですか?

  5. 5

    アニメーション化された他のビューの下にビューを配置するにはどうすればよいですか?

  6. 6

    パターンアイテムを順番にアニメーション化するにはどうすればよいですか?

  7. 7

    周期的に画像をアニメーション化するにはどうすればよいですか? `

  8. 8

    異なるポイントで同時に複数のビューをアニメーション化するにはどうすればよいですか?

  9. 9

    SwiftでNSLayoutConstraintをアニメーション化するにはどうすればよいですか?

  10. 10

    アニメーションを使用してビューを右から左に連続的に移動するにはどうすればよいですか?

  11. 11

    展開/折りたたみビューのアイコンをアニメーション化するにはどうすればよいですか?

  12. 12

    XAMLでリストビューをアニメーション化しないようにするにはどうすればよいですか?

  13. 13

    ナビゲーション(画像の上にある)をアニメーションで移動するにはどうすればよいですか?

  14. 14

    matplotlibを使用して一連のポイントをアニメーション化するにはどうすればよいですか?

  15. 15

    SwiftUIで、公開ビューの変更をアニメーション化するにはどうすればよいですか?

  16. 16

    react-springを使用して2つのアニメーションを順番に実行するにはどうすればよいですか?

  17. 17

    Canvas - 複数の画像を一度にアニメーション化するにはどうすればよいですか?

  18. 18

    最初のアニメーションの後に2番目のアニメーションを実行するにはどうすればよいですか?

  19. 19

    Androidでビューを同時にアニメーション化、スケーリング、変換するにはどうすればよいですか?

  20. 20

    別の画像に触れたときに画像をアニメーション化するにはどうすればよいですか?

  21. 21

    この方法でナビゲーションバーをアニメーション化するにはどうすればよいですか?

  22. 22

    アニメーション化されるビューにonClickListenerを設定するにはどうすればよいですか?

  23. 23

    @ObservedObjectへの変更をアニメーション化するにはどうすればよいですか?

  24. 24

    PagerTransformアニメーションの後にViewPagerのアイテムをアニメーション化するにはどうすればよいですか?

  25. 25

    点滅する画像アニメーションを作成するにはどうすればよいですか?

  26. 26

    PowerPointアニメーション中に画像を表示するにはどうすればよいですか?

  27. 27

    Flutterでアニメーション画像を表示するにはどうすればよいですか?

  28. 28

    Swiftで描画をアニメーション化するだけでなく、UIImageViewの縮尺を変更するにはどうすればよいですか?

  29. 29

    NSViewをカーブでアニメーション化するにはどうすればよいですか

ホットタグ

アーカイブ