SwiftUIによるアニメーションサンプル

アニメーション動画1

SwiftUIコード1

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var isRotatedSq = true
    @State private var isRotatedSq2 = true
    @State private var isRotatedSq3 = true
    
    
    var body: some View {
        VStack{
        Button("Start1", action: {
            self.isRotatedSq.toggle()
        })
            HStack{
                Rectangle()
                    .frame(width:100, height: 100)
                    .foregroundColor(.blue)
                    .rotationEffect(Angle.degrees(isRotatedSq ? 180 : 0))
                    .animation(Animation.easeInOut(duration: 2.0), value: isRotatedSq)
                Rectangle()
                    .frame(width:100, height: 100)
                    .foregroundColor(.red)
                    .rotationEffect(Angle.degrees(isRotatedSq ? 180 : 0))
                    .animation(Animation.easeIn(duration: 2.0), value: isRotatedSq)
                Rectangle()
                    .frame(width:100, height: 100)
                    .foregroundColor(.yellow)
                    .rotationEffect(Angle.degrees(isRotatedSq ? 180 : 0))
                    .animation(Animation.easeOut(duration: 2.0), value: isRotatedSq)
        }
        Button("Start2", action: {
            self.isRotatedSq2.toggle()
        })
            HStack{
                Rectangle()
                    .frame(width:100, height: 100)
                    .foregroundColor(.blue)
                    .rotationEffect(Angle.degrees(isRotatedSq2 ? 90 : 0))
                    .animation(Animation.linear(duration: 2.0), value: isRotatedSq2)
                Rectangle()
                    .frame(width:100, height: 100)
                    .foregroundColor(.red)
                    .scaleEffect(isRotatedSq2 ? 1.0 : 0.5)
                    .animation(Animation.linear(duration: 2.0), value: isRotatedSq2)

                Rectangle()
                    .frame(width:100, height: 100)
                    .foregroundColor(.yellow)
                    .opacity(isRotatedSq2 ? 1.0 : 0.2)
                    .animation(Animation.linear(duration: 2.0), value: isRotatedSq2)
        }
        Button("Start3", action: {
            self.isRotatedSq3.toggle()
        })
            HStack{
                Rectangle()
                    .frame(width:100, height: 100)
                    .foregroundColor(.blue)
                    .rotation3DEffect(Angle(degrees:isRotatedSq3 ? 90:0), axis: (x:10.0, y:0.0, z:0.0))
                    .animation(Animation.linear(duration: 2.0), value: isRotatedSq3)
                
                Rectangle()
                    .frame(width:100, height: 100)
                    .foregroundColor(.red)
                    .rotation3DEffect(Angle(degrees:isRotatedSq3 ? 90:0), axis: (x:0.0, y:10.0, z:0.0))
                    .animation(Animation.linear(duration: 2.0), value: isRotatedSq3)

                Rectangle()
                    .frame(width:100, height: 100)
                    .foregroundColor(.yellow)
                    .rotation3DEffect(Angle(degrees:isRotatedSq3 ? 90:0), axis: (x:0.0, y:0.0, z:10.0))
                    .animation(Animation.linear(duration: 2.0), value: isRotatedSq3)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

説明

上段

正方形が回転する時の動きの比較

中段

正方形自体へのエフェクトの比較

下段

正方形の3Dエフェクトの比較

アニメーション動画2

###SwiftUIコード2

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var isRotatedSq = false
    let colors:[Color] = [.purple, .blue, .green, .yellow, .orange, .red]
    
    
    var body: some View {
        VStack{
        Button("Start", action:{
            self.isRotatedSq.toggle()
        })
            ZStack{
                ForEach(0..<colors.count){
                    Rectangle()
                        .frame(width:100, height:100)
                        .foregroundColor(colors[$0])
                        .rotationEffect(Angle.degrees(isRotatedSq ? 90:0))
                        .animation(Animation.linear(duration: 2.0),value: isRotatedSq)
                        .offset(x: CGFloat($0) * 5.0, y:CGFloat($0) * 5.0)
                }
            }.frame(width: 250.0, height: 200.0)
        
            ZStack{
                ForEach(0..<colors.count){
                    Rectangle()
                        .frame(width:100, height:100)
                        .foregroundColor(colors[$0])
                        .rotationEffect(Angle.degrees(isRotatedSq ? 90:0))
                        .animation(Animation.linear(duration: 2.0).delay(CGFloat($0) * 1.0),value: isRotatedSq)
                        .offset(x: CGFloat($0) * 5.0, y:CGFloat($0) * 5.0)
                }
            }.frame(width: 250.0, height: 200.0)
        
            ZStack{
                ForEach(0..<colors.count){
                    Rectangle()
                        .frame(width:100 - CGFloat($0) * 10.0, height:100 - CGFloat($0) * 10.0 )
                        .foregroundColor(colors[$0])
                        .rotationEffect(Angle.degrees(isRotatedSq ? 90:0))
                        .animation(Animation.linear(duration: 2.0).delay(CGFloat($0) * 1.0),value: isRotatedSq)
                }
            }.frame(width: 250.0, height: 200.0)

        
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

説明

上段

全体を回転する

中段

各々を遅らせて回転する

下段

各々を小さくしつつ、各々を遅らせて回転する

SwiftUIによるサウスパーク風顔画像(おまけ)

SwiftUIコード3

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var isRotatedSq = false

    
    
    var body: some View {
        VStack{
        Button("Start", action:{
            self.isRotatedSq.toggle()
        })
            ZStack{
                Circle()
                    .frame(width:200, height:200)
                    .foregroundColor(.yellow)
                HStack{
                    ZStack{
                        Circle()
                            .frame(width:60, height:60)
                            .foregroundColor(.white)
                        Circle()
                            .frame(width:10, height:10)
                            .foregroundColor(.black)
                            .offset(x:20)
                    }
                    ZStack{
                        Circle()
                            .frame(width:60, height:60)
                            .foregroundColor(.white)
                        Circle()
                            .frame(width:10, height:10)
                            .foregroundColor(.black)
                            .offset(x:-20)
                    }
                }.offset(y:-50)
                Rectangle()
                    .frame(width:130, height:10)
                    .foregroundColor(.black)
                    .offset(y:50)
            }.frame(width: 250.0, height: 250.0)
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

説明

特に要らないと思っています。。。

Image Generator(ChatGPT)におまけ画像を加工してもらったら、凄い事になった

おまけ画像

プロンプト

Will you redesign this picture to be as written by Van Gogh?（この画像をゴッホ風に書き直してくれませんか？）

結果

プロンプト

Will you redesign this picture to be as written by Hokusai Katsusika?（この画像を葛飾北斎風に書き直してくれませんか？）

結果

プロンプト

Will you redesign this picture to be as written by combination of Van Gogh and Hokusai Katsusika?（この画像をゴッホと葛飾北斎を組み合わせしたように書き直してくれませんか？）

結果

感想

AIは既に人間の想像力を超えていますわ。。。