Animate text on and off screen in SwiftUI

Question

I am trying to animate text to make it scroll across the screen, (using it to make a stock app), I am unable to get it to go completely off the screen can someone please help...

This is what I have so far

let text = "Some text to animate" private var is = true var body: some View { VStack { Text(text) .fixedSize() .frame(width: 100, alignment: is ? .trailing : .leading) .animation(Animation.linear(duration: 5).repeatForever()) }

This is SwiftUI code. You should use the SwiftUI tag, not Swift. (or at least also add the SwiftUI tag.) — Duncan C
– Duncan C, Commented Jun 22, 2022 at 13:30
Please try out my code example: stackoverflow.com/a/77397865/3013992 — Peter Kreinz
– Peter Kreinz, Commented Oct 31, 2023 at 17:10

Asperi · Accepted Answer · 2022-06-22 17:43:59Z

A possible solution is to use single Text with .move asymmetric transition.

Here is a simplified demo. Tested with Xcode 13.4 / iOS 15.5

Main part:

var body: some View { GeometryReader { gp in VStack { Text(text) .fixedSize() .frame(width: gp.size.width + textWidth, alignment: .trailing) .id(go) .transition(transition) .onAppear{ go.toggle() } .animation(animation, value: go) } }.fixedSize(horizontal: false, vertical: true) }

Test module on GitHub

Yes, toggle go back and switch animation to .default, like in stackoverflow.com/a/62080312/12299030.
It seems that just stops the animation whereas I am trying to make it pause so that if resumed it continues from where it left off

ChrisR · Accepted Answer · 2022-06-22 13:52:47Z

like this? It shifts the text using .offset if go is true.

 let text = "Some text to animate" @State private var go = false var body: some View { VStack { Text(text) .fixedSize() .frame(width: 100) .offset(x: go ? 300 : 0, y: 0) .animation(Animation.linear(duration: 3).repeatForever(), value: go) .onAppear{self.go.toggle()} } }

Collectives™ on Stack Overflow

Animate text on and off screen in SwiftUI

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related