How can I animate count of array in SwiftUI?
I have a test code here and I am trying to animate the count of my array, It is not working as I wanted, but I think I am close, here is my code:
It is about single TextEditor view animation in chain, not all together, let say we have 20 TextEditor, I want TextEditors from down number 20 start moving and after some move of 20 number 19 and 18, In fact all would start moving but a delay effeckt, same when they are coimg to view first TextEditor number 1 comes then with small delay number 2, chain animation, the most important factor is array count, because of that TextEditors would start moving inside view or outside. from right to left coming inside, from left to right going out.
import SwiftUI
struct ContentView: View {
@State private var arrayOfCustomType: [MyCustomType] = [MyCustomType]()
var body: some View {
VStack {
if (!arrayOfCustomType.isEmpty) {
ScrollView {
AnimatableForEach(arrayOfCustomType: $arrayOfCustomType)
}
.scrollIndicators(.visible)
} else {
Text("Please run the function!")
}
}
.frame(height: 500.0)
.padding()
.animation(.easeInOut(duration: 1), value: CGFloat(arrayOfCustomType.count))
Button("run") {
if (!arrayOfCustomType.isEmpty) {
arrayOfCustomType.removeAll()
}
else {
arrayOfCustomType = myFunc(string: myString, separatedBy: " ")
}
}
.padding()
}
}
func myFunc(string: String, separatedBy: String) -> [MyCustomType] {
let stringComponents: [String] = string.components(separatedBy: separatedBy)
var arrayOfCustomType: [MyCustomType] = [MyCustomType]()
for index in stringComponents.indices {
arrayOfCustomType.append(MyCustomType(intValue: index, stringValue: stringComponents[index]))
}
return arrayOfCustomType
}
let myString: String = """
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.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
"""
struct AnimatableForEach: View, Animatable {
@Binding var arrayOfCustomType: [MyCustomType]
var animatableData: CGFloat {
get { return CGFloat(arrayOfCustomType.count) }
set { }
}
var body: some View {
ForEach(arrayOfCustomType) { element in
TextEditor(text: Binding(
get: { arrayOfCustomType[element.intValue].stringValue },
set: { newValue in
arrayOfCustomType[element.intValue].stringValue = newValue
}
))
.font(.title)
.fontDesign(.monospaced)
.cornerRadius(5.0)
.padding(.trailing)
.transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
}
}
}
struct MyCustomType: Identifiable, Animatable {
let id: UUID = UUID()
var intValue: Int
var stringValue: String
var animatableData: CGFloat {
get { CGFloat(intValue) }
set { intValue = Int(newValue) }
}
}
extension Array {
var animatableData: CGFloat {
get { return CGFloat(self.count) }
set { }
}
}
the idea of animation is measuring changes and I think i made it easy to SwiftUI to measuring, what is posibale way that this codes works?
Update 2: This code I think is much better, but still not working
import SwiftUI
struct ContentView: View {
@State private var arrayOfCustomType: [MyCustomType] = [MyCustomType]()
var body: some View {
VStack {
if (!arrayOfCustomType.isEmpty) {
ScrollView {
AnimatableForEach(arrayOfCustomType: $arrayOfCustomType)
}
.scrollIndicators(.visible)
}
else {
Text("Please run the function!")
}
}
.frame(height: 500.0)
.padding()
.animation(.easeInOut(duration: 1), value: CGFloat(arrayOfCustomType.count))
Button("run") {
if (!arrayOfCustomType.isEmpty) {
animationFunction(from: CGFloat(arrayOfCustomType.count), to: .zero, animation: .easeInOut(duration: 1), animatableData: { value in
if ((arrayOfCustomType.count - Int(value)) >= 0) {
arrayOfCustomType.removeLast()
}
})
}
else {
let myArray = myFunc(string: myString, separatedBy: " ")
animationFunction(from: CGFloat(arrayOfCustomType.count), to: .zero, animation: .easeInOut(duration: 1), animatableData: { value in
if ((arrayOfCustomType.count - Int(value)) >= 0) {
arrayOfCustomType.append(myArray[Int(value)])
}
})
}
}
.padding()
}
}
func myFunc(string: String, separatedBy: String) -> [MyCustomType] {
let stringComponents: [String] = string.components(separatedBy: separatedBy)
var arrayOfCustomType: [MyCustomType] = [MyCustomType]()
for index in stringComponents.indices {
arrayOfCustomType.append(MyCustomType(intValue: index, stringValue: stringComponents[index]))
}
return arrayOfCustomType
}
let myString: String = """
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.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
"""
struct AnimatableForEach: View {
@Binding var arrayOfCustomType: [MyCustomType]
var body: some View {
ForEach(arrayOfCustomType) { element in
TextEditor(text: Binding(
get: { arrayOfCustomType[element.intValue].stringValue },
set: { newValue in
arrayOfCustomType[element.intValue].stringValue = newValue
}
))
.font(.title)
.fontDesign(.monospaced)
.cornerRadius(5.0)
.padding(.trailing)
.transition(.asymmetric(insertion: .move(edge: .leading).combined(with: .opacity), removal: .move(edge: .trailing).combined(with: .opacity)))
}
}
}
struct MyCustomType: Identifiable {
let id: UUID = UUID()
var intValue: Int
var stringValue: String
}
func animationFunction(from: CGFloat, to: CGFloat, animation: Animation, animatableData: (CGFloat) -> Void ) {
// sending animatableData from to to view ...
animatableData(0.25)
}
This 2 animation is my goal, i am looking to that the count of arrays item do this, with adding items should the animation of enter happen, and with deleting items the animation of exit.
Solution
This is actually quite a difficult animation to implement. For the transitions to work on the individual rows, the container has to be visible, even when it is empty, then the rows must be added to the view one-by-one. For the removal transition to work, the items must be removed from the view one-by-one, so this is not as trivial as just replacing the array with an empty array.
I tried making the container view Animatable, as you were doing in your first example, but couldn't get it to work this way. So I resorted to a timer approach. This answer by lorem ipsum gives a good overview of ways of implementing regular updates. I opted for the approach using task(id:priority:_:).
So here is an updated version of your example. It uses simple Text elements, instead of TextEditor.
struct ContentView: View {
@State private var arrayOfCustomType: [MyCustomType] = [MyCustomType]()
@State private var nRuns = 0
var body: some View {
VStack {
ScrollView {
AnimatableForEach(arrayOfCustomType: arrayOfCustomType)
}
.scrollIndicators(.visible)
if nRuns == 0 {
Text("Please run the function!")
}
Button(arrayOfCustomType.isEmpty ? "run" : "rewind") {
if arrayOfCustomType.isEmpty {
arrayOfCustomType = myFunc(string: myString, separatedBy: " ")
} else {
arrayOfCustomType.removeAll()
}
nRuns += 1
}
.buttonStyle(.bordered)
}
.frame(maxHeight: 500.0)
.padding()
}
private func myFunc(string: String, separatedBy: String) -> [MyCustomType] {
let stringComponents: [String] = string.components(separatedBy: separatedBy)
var arrayOfCustomType: [MyCustomType] = [MyCustomType]()
for index in stringComponents.indices {
arrayOfCustomType.append(MyCustomType(intValue: index, stringValue: stringComponents[index]))
}
return arrayOfCustomType
}
}
struct AnimatableForEach: View {
let arrayOfCustomType: [MyCustomType]
@State private var arrayToShow = [MyCustomType]()
@State private var nVisibleElements = 0
var body: some View {
VStack(spacing: 10) {
ForEach(arrayToShow.prefix(nVisibleElements)) { element in
Text(element.stringValue)
.font(.title)
.fontDesign(.monospaced)
.frame(maxWidth: .infinity)
.background {
RoundedRectangle(cornerRadius: 5)
.fill(.background.secondary)
}
.padding(.trailing)
.transition(
.move(edge: .trailing)
.combined(with: .opacity)
)
}
}
.animation(.default, value: nVisibleElements)
.onChange(of: arrayOfCustomType.count, initial: true) { oldVal, newVal in
if newVal > 0 {
arrayToShow = arrayOfCustomType
if nVisibleElements == 0 {
// Kick off the reveal animation
nVisibleElements = 1
} else if nVisibleElements > arrayOfCustomType.count {
nVisibleElements = arrayOfCustomType.count
}
} else if oldVal > 0 && !arrayToShow.isEmpty && nVisibleElements >= arrayToShow.count {
// Kick off the hide animation
nVisibleElements = arrayToShow.count - 1
}
}
.task(id: nVisibleElements) {
if !arrayToShow.isEmpty && nVisibleElements > 0 && nVisibleElements < arrayToShow.count {
// The array is partially visible, wait a short time
// before performing the next reveal/hide
try? await Task.sleep(for: .milliseconds(250))
if !arrayOfCustomType.isEmpty && !arrayToShow.isEmpty && nVisibleElements < arrayToShow.count {
// Reveal the next entry
nVisibleElements += 1
} else if arrayOfCustomType.isEmpty && !arrayToShow.isEmpty {
if nVisibleElements > 0 {
// Hide the next entry
nVisibleElements -= 1
} else {
// The animation has completed
arrayToShow = arrayOfCustomType
}
}
}
}
.frame(maxWidth: .infinity)
}
}
// MyCustomType, myString: see original example
- How to vertically center UICollectionView content
- How can i send the current scrolling position of a scroll view to another, and reconfigure it into the second ? iOS
- Using @AppStorage from within a view that has multiple instances (ie. each view has a different setting in it)
- How to make a rounded oval button?
- How to use "MDCOutlinedTextField" in Swift
- BoringSSL-GRPC unsupported option '-G' for target 'arm64-apple-ios15.0'
- Creating CGColor from RGB Value
- How to scale text to fit parent view with SwiftUI?
- SwiftUI drag gesture and contentTransition weird behaviour (jumping/stutter) when dragging
- How to simultaneously perform multiple animations to one element in SwiftUI?
- How can I use UIColorFromRGB in Swift?
- How can I make a toolbar with page indicators in SwiftUI like the Weather App?
- Memory leak when resizing images
- (Swift) How to find all strings that matches regex in string
- How to Create a Shadow in SwiftUI Only at bottom
- Split String in Swift by their capital letters
- SwiftUI - Localization of a dynamic Text
- How to correctly run AppleScript on Mail.app via NSAppleScript and parse results as a list of strings
- Calendar.current.dateComponents() return milliseconds
- How to create a Battery Badge that shows current Battery Level in SwiftUI
- How do I conform to a protocol with an actor?
- How to create my own "shell" command line program in Mac OS X
- Find the best way for combination without repetition calculation in swift
- How to start a background task with the new Swift Structured Concurrency?
- What is Main Thread Checker in Xcode
- Main Actor Isolation Error in Xcode Playground for Simple Swift Code
- How to make vstack or vertical paging this view?
- SWIFT - Why Horizontal Scroll View and Feature does not work
- Center ImageView in ScrollView with paging enabled - Swift
- How can i read the log when App from not running to active?