SwiftUI 点滅

5911 ワード
アニメーション Swift modifier view SwiftUI view テキストリンク

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

使い方

点滅させたい 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を出し分ける

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