【SwiftUI】絵文字が下からいっぱい出てくるアニメーション

はじめに

ストーリーに絵文字を送ると下から絵文字が出てくるのをイメージして作ってみました

こんな感じ

実装

import SwiftUI

struct ContentView: View {
    @State private var rotation: Double = 0.0

    @State private var isAnimation = false

    var body: some View {
        GeometryReader { geometryProxy in
            ZStack {
                ForEach(0..<50) { _ in
                    emojiView(emoji: "❤️")
                        .scaleEffect(isAnimation ? .random(in: 1...1.5) : 0)
                        .offset(y: isAnimation ? -geometryProxy.size.height : 0)
                        .opacity(isAnimation ? 0 : 1)
                        .rotationEffect(.degrees(isAnimation ? .random(in: -40...40) : 0))
                        .animation(.easeOut(duration: .random(in: 3...6)).delay(.random(in: 0...10)).repeatForever(autoreverses: false), value: isAnimation)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
            .onAppear {
                isAnimation.toggle()
            }
        }
    }
    
    private func emojiView(emoji: String) -> some View {
        Text(emoji)
            .rotation3DEffect(.degrees(rotation), axis: (x: 0, y: 1, z: 0))
            .font(.system(size: 130))
            .animation(.easeOut(duration: .random(in: 1...2)).repeatForever(autoreverses: false), value: rotation)
            .onAppear { rotation = 360.0 }
    }
}

おわり

インスタの見ながらやったわけじゃなくて完全にイメージだから違うかもw