LoginSignup
3
1

More than 3 years have passed since last update.

SwiftUI 点滅

Last updated at Posted at 2021-05-18

え、自分で作るしかないの?!
Appleさん公式に追加してくれてもええんやで。 6月のWWDC楽しみにしとるわ。

kira.gif

使い方

点滅させたい View に対して .blinkEffect() を付加します。

  • デフォルト: .blinkEffect()
  • 透明さの範囲を指定: .blinkEffect(opacity: 0.2...1)
  • 点滅の間隔(秒)を指定: .blinkEffect(interval: 0.5)
Sample.swift
// 点滅する文字 "きらきら"
Text("きらきら")
    .blinkEffect()

コピペ用コード

丸々コピペして、プロジェクト内のどこかにおいて下さい。

BlinkEffect.swift
import SwiftUI
struct BlinkEffect: ViewModifier {
    @State var isOn: Bool = false
    let opacityRange: ClosedRange<Double>
    let interval: Double

    init(opacity: ClosedRange<Double>, interval: Double) {
        self.opacityRange = opacity
        self.interval = interval
    }

    func body(content: Content) -> some View {
        content
            .opacity(self.isOn ? self.opacityRange.lowerBound : self.opacityRange.upperBound)
            .animation(Animation.linear(duration: self.interval).repeatForever())
            .onAppear(perform: {
                self.isOn = true
            })
    }
}

extension View {
    func blinkEffect(opacity: ClosedRange<Double> = 0.1...1, interval: Double = 0.6) -> some View {
        self.modifier(BlinkEffect(opacity: opacity, interval: interval))
    }
}

さいごに

もしも点滅したり止めたりしたい時は、

  1. 同じViewを2つ用意
  2. .blinkEffect() を付けたのと付けてないのに分ける
  3. if文で条件によってViewを出し分ける

みたいな方法でも良ければこのコードでも出来ます。

3
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1