カテゴリー【Swift、iPhone/iPad、MacOS】
【Swift UI】Hello Worldをフェードイン・アウトさせる
POSTED BY
2023-09-18
2023-09-18
Xcodeで新規Swift UIプロジェクトを作成すると以下のようなサンプルが作成されると思う。
Swift | ContentView.swift | GitHub Source |
// // ContentView.swift // MyUITest // // Created by ServerNote.NET on 2023/09/17. // import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text("Hello, world!") } .padding() } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }
これを以下のように変えることで、フェードイン・アウトを繰り返し、点滅するHello World VStackになる。
Swift | ContentViewFadeInOut.swift | GitHub Source |
// // ContentViewFadeInOut.swift // MyUITest // // Created by ServerNote.NET on 2023/09/18. // import SwiftUI struct ContentViewFadeInOut: View { @State private var fadeInOut = true var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text("Hello, world!") } .onAppear() { withAnimation(Animation.linear(duration:0.5) .repeatForever(autoreverses: true)) { fadeInOut.toggle() } }.opacity(fadeInOut ? 0:1) .padding() } } struct ContentViewFadeInOut_Previews: PreviewProvider { static var previews: some View { ContentViewFadeInOut() } }
フェードインで1回だけ登場させたい場合は以下。easeInOutをeaseInにして、durationが速いとわかりにくいので、5にしてスロー登場させている。リピートを切って、最初のfadeInOutフラグをtrueな状態にするのがポイント。
Swift | ContentViewFadeIn.swift | GitHub Source |
// // ContentViewFadeIn.swift // MyUITest // // Created by ServerNote.NET on 2023/09/18. // import SwiftUI struct ContentViewFadeIn: View { @State private var fadeInOut = true var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text("Hello, world!") } .onAppear() { withAnimation(Animation.easeIn(duration:5)) { // .repeatForever(autoreverses: true)) { fadeInOut.toggle() } }.opacity(fadeInOut ? 0:1) .padding() } } struct ContentViewFadeIn_Previews: PreviewProvider { static var previews: some View { ContentViewFadeIn() } }
逆に、フェードアウトだけさせたい場合は以下のようにすればよい。easeInOutをeaseOutにしている。
Swift | ContentViewFadeOut.swift | GitHub Source |
// // ContentViewFadeOut.swift // MyUITest // // Created by ServerNote.NET on 2023/09/18. // import SwiftUI struct ContentViewFadeOut: View { @State private var fadeInOut = false var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text("Hello, world!") } .onAppear() { withAnimation(Animation.easeOut(duration:2)) { // .repeatForever(autoreverses: true)) { fadeInOut.toggle() } }.opacity(fadeInOut ? 0:1) .padding() } } struct ContentViewFadeOut_Previews: PreviewProvider { static var previews: some View { ContentViewFadeOut() } }
【前の記事】UbuntuにMariaDBを導入するメモ
Android
iPhone/iPad
Flutter
MacOS
Windows
Debian
Ubuntu
CentOS
FreeBSD
RaspberryPI
HTML/CSS
C/C++
PHP
Java
JavaScript
Node.js
Swift
Python
Amazon/AWS
CORESERVER
Google
仮想通貨
LINE
OpenAI/ChatGPT
IBM Watson
Microsoft Azure
Xcode
VMware
MySQL
PostgreSQL
Redis
Groonga
Git/GitHub
Apache
nginx
Postfix
SendGrid
Hackintosh
Hardware
Fate/Grand Order
ウマ娘
将棋
ドラレコ
※本記事は当サイト管理人の個人的な備忘録です。本記事の参照又は付随ソースコード利用後にいかなる損害が発生しても当サイト及び管理人は一切責任を負いません。
※本記事内容の無断転載を禁じます。
※本記事内容の無断転載を禁じます。
【WEBMASTER/管理人】
自営業プログラマーです。お仕事ください!ご連絡は以下アドレスまでお願いします★
☆ServerNote.NETショッピング↓
ShoppingNote / Amazon.co.jp
☆お仲間ブログ↓
一人社長の不動産業務日誌
【キーワード検索】
【最近の記事】【全部の記事】
アプリにPrivacyInfoを追加しITMS-91053: Missing API declarationに対応するnvidia-smiを1秒ごとに実行してGPU使用率をモニタリング
TSUKUMOのマルチGPUパソコンWA9J-X211/XTのUbuntu Server 22.04でMYCOEIROINK作成コードを実行し音声合成モデルをトレーニングする
TSUKUMOのマルチGPUパソコンWA9J-X211/XTにUbuntu Server 22.04とCOEIROINK Engineを導入する
Python venv(仮想環境作成)でError: Command returned non-zero exit status 1のエラー対処法
【Ubuntu】プロジェクトごとに複数のPythonバージョンを使い分ける
【PHP】フォーム入力を受け取り出力する
【Ubuntu】aptでインストールしたapache2にソースコンパイルしたphpをマルチスレッドモードで組み込む
【PHP】HTMLファイルを読み込んで文字列変換して出力する
TSUKUMOのマルチGPUパソコンWA9J-X211/XTにUbuntu Server 22.04とVOICEVOX Engineを導入する
【人気の記事】【全部の記事】
Googleファミリーリンクで子供の端末の現在地がエラーで取得できない場合進研ゼミチャレンジタッチをAndroid端末化する
【Windows10】リモートデスクトップ間のコピー&ペーストができなくなった場合の対処法
Windows版Google Driveが使用中と言われアンインストールできない場合
【Apache】サーバーに同時接続可能なクライアント数を調整する
【C/C++】小数点以下の切り捨て・切り上げ・四捨五入
Windows11+WSL2でUbuntuを使う【2】ブリッジ接続+固定IPの設定
Androidホームで左にスワイプすると出てくるニュース共を一切表示させない方法
Googleスプレッドシートを編集したら自動で更新日時を入れる
size_tとssize_tを使い分けてSegmentation Faultを予防する
【カテゴリーリンク】
Android
iPhone/iPad
Flutter
MacOS
Windows
Debian
Ubuntu
CentOS
FreeBSD
RaspberryPI
HTML/CSS
C/C++
PHP
Java
JavaScript
Node.js
Swift
Python
Amazon/AWS
CORESERVER
Google
仮想通貨
LINE
OpenAI/ChatGPT
IBM Watson
Microsoft Azure
Xcode
VMware
MySQL
PostgreSQL
Redis
Groonga
Git/GitHub
Apache
nginx
Postfix
SendGrid
Hackintosh
Hardware
Fate/Grand Order
ウマ娘
将棋
ドラレコ