SwiftUI 使用SwiftUI实现跑马灯效果 Marquee

Posted 2021-09-25 ZH_CQ_iOS

OC类型的demo很多 这里就不提了 

直接上代码吧

public struct MarqueeText : View {

    public var text = ""

    public var font: UIFont

    public var leftFade: CGFloat

    public var rightFade: CGFloat

    public var startDelay: Double

    @State private var animate = false

    public var body : some View {

        let stringWidth = text.getWidthOfString(usingFont: font)

        let stringHeight = text.heightOfString(usingFont: font)

        return ZStack {

            GeometryReader { geometry in

                Group {

                    Text(self.text).lineLimit(1)

                        .font(.init(font))

                        .offset(x: self.animate ? -stringWidth - stringHeight * 2 : 0)

                        .animation(Animation.linear(duration: Double(stringWidth) / 30).delay(startDelay).repeatForever(autoreverses: false)

                        )

                        .onAppear() {

                            if geometry.size.width < stringWidth {

                                self.animate = true

                            }

                        }

                        .fixedSize(horizontal: true, vertical: false)

                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)

                    Text(self.text).lineLimit(1)

                        .font(.init(font))

                        .offset(x: self.animate ? 0 : stringWidth + stringHeight * 2)

                        .animation(Animation.linear(duration: Double(stringWidth) / 30).delay(startDelay).repeatForever(autoreverses: false)

                        )

                        .fixedSize(horizontal: true, vertical: false)

                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)

                }.offset(x: leftFade)

                .mask(

                    HStack(spacing:0) {

                        Rectangle()

                            .frame(width:2)

                            .opacity(0)

                        LinearGradient(gradient: Gradient(colors: [Color.black.opacity(0), Color.black]), startPoint: .leading, endPoint: .trailing)

                            .frame(width:leftFade)

                        LinearGradient(gradient: Gradient(colors: [Color.black, Color.black]), startPoint: .leading, endPoint: .trailing)

                        LinearGradient(gradient: Gradient(colors: [Color.black, Color.black.opacity(0)]), startPoint: .leading, endPoint: .trailing)

                            .frame(width:rightFade)

                        Rectangle()

                            .frame(width:2)

                            .opacity(0)

                    }).frame(width: geometry.size.width + leftFade).offset(x: leftFade * -1)

            }

        }.frame(height: stringHeight)

    }

    public init(text: String, font: UIFont, leftFade: CGFloat, rightFade: CGFloat, startDelay: Double) {

        self.text = text

        self.font = font

        self.leftFade = leftFade

        self.rightFade = rightFade

        self.startDelay = startDelay

    }

}

extension String {

    func getWidthOfString(usingFont font: UIFont) -> CGFloat {

        let fontAttributes = [NSAttributedString.Key.font: font]

        let size = self.size(withAttributes: fontAttributes)

        return size.width

    }

    func heightOfString(usingFont font: UIFont) -> CGFloat {

        let fontAttributes = [NSAttributedString.Key.font: font]

        let size = self.size(withAttributes: fontAttributes)

        return size.height

    }

}

调用的时候

//跑马灯

                    MarqueeText(

                         text: "文字文字文字文字文字文字文字文字文字文字文字文字文字文字",

                         font: UIFont.preferredFont(forTextStyle: .subheadline),

                         leftFade: 15,

                         rightFade: 15,

                         startDelay: 1)

                        .padding(.leading,100)

                        .padding(.trailing,100)