カテゴリー【Swift、iPhone/iPad、MacOS】
【Swift UI】Hello Worldをフェードイン・アウトさせる
POSTED BY
2023-09-18
2023-09-18
![](images/category/swift.png)
![](images/category/ios.png)
![](images/category/macos.png)
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
MatLab
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
☆お仲間ブログ↓
一人社長の不動産業務日誌
【キーワード検索】
【最近の記事】【全部の記事】
【Python】Spacyを使用して文章から出発地と目的地を抜き出すHomeBrewでApache2を入れて自動起動つきで動かしPHPモジュールと連携する
macOSに標準付属のApacheを自動起動つきで動かす
HomeBrewでPostgreSQLを入れて自動起動つきで動かす
Windows11でSSHポートフォワードでSamba(139)ポートをbindできないエラー
システムで予約済みのパーティションを更新できませんでした このPCは現在Windows11のシステム要件を満たしていません
ソースからインストールしたPHPにPDO版MySQLとPostgreSQLを組み込む
apt upgradeしたあとnvidia-smiがダメになった場合
PoA(Proof of Authority)=Clique(クリーク)=を使用してGethのプライベートネットワークを複数ノードで組む
Fatal: Failed to register the Ethereum service: ethash is only supported as a historical component of already merged networks
【人気の記事】【全部の記事】
進研ゼミチャレンジタッチをAndroid端末化するWindows版Google Driveが使用中と言われアンインストールできない場合
【Windows10】リモートデスクトップ間のコピー&ペーストができなくなった場合の対処法
Windows11+WSL2でUbuntuを使う【2】ブリッジ接続+固定IPの設定
【C/C++】小数点以下の切り捨て・切り上げ・四捨五入
Googleスプレッドシートを編集したら自動で更新日時を入れる
【Apache】サーバーに同時接続可能なクライアント数を調整する
【Linux】iconv/libiconvをソースコードからインストール
GitLabにHTTPS経由でリポジトリをクローン&読み書きを行う
Googleファミリーリンクで子供の端末の現在地がエラーで取得できない場合
【カテゴリーリンク】
Android
iPhone/iPad
Flutter
MacOS
Windows
Debian
Ubuntu
CentOS
FreeBSD
RaspberryPI
HTML/CSS
C/C++
PHP
Java
JavaScript
Node.js
Swift
Python
MatLab
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
ウマ娘
将棋
ドラレコ