How to animate collapsing for a Text in SwiftUI - ios

Question

I need help with SwiftUI animation/transition behavior. I have to implement collapsing/expanding Text during changing lineLimit from nil to 5 and vice versa.
At the moment I have a working code, you can see it below.
import SwiftUI
public struct ContentView: View {
private let description: String
#State private var isCollapsed: Bool = true
#State private var isExpandeButtonShow: Bool = false
public init(description: String) {
self.description = description
}
// MARK: - Body
public var body: some View {
VStack(alignment: .leading, spacing: 0) {
text.padding(.top, 26)
.font(Font.system(size: 12))
if isExpandeButtonShow {
collapseButton.padding(.top, 9)
}
Spacer()
}
.padding(.horizontal, 16)
}
// MARK: - Private
private var text: some View {
Text(description)
.lineLimit(isCollapsed ? 5 : nil)
.background(
GeometryReader { geometry in
Color.clear.onAppear {
truncateIfNeeded(withGeometry: geometry)
}
}
)
.animation(.linear(duration: 4))
.transition(.opacity)
}
private func truncateIfNeeded(withGeometry geometry: GeometryProxy) {
let total = description.boundingRect(
with: CGSize(
width: geometry.size.width,
height: .greatestFiniteMagnitude
),
options: .usesLineFragmentOrigin,
attributes: [.font: UIFont.systemFont(ofSize: 12)],
context: nil
)
if total.size.height > geometry.size.height {
isExpandeButtonShow = true
}
}
private var collapseButton: some View {
button(title: collapseButtonTitle()) {
isCollapsed.toggle()
}
}
private func button(title: String, handler: #escaping () -> Void) -> some View {
Button(action: handler) {
Text(title)
.foregroundColor(Color.blue)
.contentShape(Rectangle())
}
.buttonStyle(PlainButtonStyle())
}
private func collapseButtonTitle() -> String {
isCollapsed ? "Collapse" : "Expand"
}
}
It almost does what I want. But there are two points of my pain from this behavior.
First, when I try to collapse text, no animation/transition starts. It just collapses immediately. Secondly, I want to have a line appearing by line with animating each one from 0 opacity to 1. How can I do it?
Any thoughts can be helpful. Regards.

Answer 1

Is something like this what you're trying to do?
struct RandomView: View {
#State var isCollapsed: Bool = false
#State var lineCount: Int = 1
#State var isAnimating: Bool = false
var body: some View {
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
.font(.largeTitle)
.lineLimit(lineCount)
.animation(.linear(duration: 1.0))
.onTapGesture {
animateLines()
}
}
func animateLines() {
guard !isAnimating else { return } // Check not currently animating
isCollapsed.toggle()
isAnimating = true
let timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { (timer) in
if isCollapsed {
//Expand
lineCount += 1
if lineCount >= 10 { // max lines
timer.invalidate()
isAnimating = false
}
} else {
//Collapse
lineCount -= 1
if lineCount <= 1 { // max lines
timer.invalidate()
isAnimating = false
}
}
}
timer.fire()
}
}
EDIT: If you want to animate opacity line by line, you need to break the String into different Text items, which each have individual opacities. Like this:
var body: some View {
VStack {
Text("Line 1")
.opacity(lineCount >= 1 ? 1 : 0)
Text("Line 2")
.opacity(lineCount >= 2 ? 1 : 0)
Text("Line 3")
.opacity(lineCount >= 3 ? 1 : 0)
Text("Line 4")
.opacity(lineCount >= 4 ? 1 : 0)
Text("Line 5")
.opacity(lineCount >= 5 ? 1 : 0)
}
.font(.largeTitle)
.animation(Animation.linear(duration: 1.0))
.onTapGesture {
animateLines()
}
}