SwiftUIで、アニメーションを試してみた

7765 ワード
SwiftUI animation animation テキストリンク

アプリ開発の経歴

・住宅関連の組み込み機器のデータを見える化したアプリの請負案件に携わりXcodeとSwift/Objective-Cに初めて触れる

・列車の設備点検を行うipad専用のアプリ案件に携わり、テストコードの書いたりRealmBrowserの使い方を学ぶ

・オンライン飲み会を開催してお酒を勧める仕組みのアプリ開発案件に携わり、TypeScriptとVue.js/Nuxt.jsを業務を遂行しながら学び、作成したSPAをアプリから見れるようにするiOSアプリを一から作成

今回のテーマ

2019年に新たに登場したSwiftUIのアニメーションを書籍で学習したので、使い方などをアウトプット

環境

Xcode Ver.12.3
MacBookPro 16インチ

バネのアニメーション

バネのアニメーションとして、「interpolatingSpring」というものがあり、学習している書籍によると
減衰スプリングモデルという計算方法でアニメーションを設定できるものみたいです。
小難しい話は、専門書に委ねるとして、早速試していきましょう！

剛性が高くなると、振動数が増え、
減衰値が大きくなると、振動が早く弱まる(0にすると動きが止まりません)

下記に、コード貼っておくので遊んでみてください。

sampleCode.swift
struct ContentView: View {
    バネに取り付けられたオブジェクトの質量
    @State var massp:Double = 1.0
    バネの剛性
    @State var stiffness:Double = 0.0
    バネの減衰値
    @State var damping:Double = 0.0
    バネの初期速度
    @State var initialVelocity:Double = 0.0
    回転角度
    @State var angle:Double = 0.0
    var body: some View {
        VStack{

            Text("バネアニメーション")
                .padding()
                .rotationEffect(.degrees(angle))
                .animation(.interpolatingSpring(mass: massp, stiffness: stiffness, damping: damping, initialVelocity: initialVelocity))

            Button(action:{self.angle += 45}){
                Text("回転")
            }
            .frame(width:300,height:50)
            .cornerRadius(8.0)
            .border(Color.black)
            .background(Color.red)
            .padding()

            VStack{
                Text("質量:\(massp)")
                Slider(value: $massp, in: 0...1000,step:0.1)
            }
            VStack{
                Text("剛性:\(stiffness)")
                Slider(value: $stiffness, in: 0...1000,step:0.1)
            }
            VStack{
                Text("減衰値:\(damping)")
                Slider(value: $damping, in: 0...1000,step:0.1)
            }
            VStack{
                Text("初期速度:\(initialVelocity)")
                Slider(value: $initialVelocity, in: 0...1,step:0.1)
            }

        }

    }
}