SwiftUI Animation Doesn't Always Run - swift

Question

I'm working on some code to teach myself SwiftUI, and my current project is a dice roller app.
In my view, I present some images using SFSymbols to represent the value of each die after the roll. I use two animations (.rotation3Deffect and .rotationEffect) on each image to give a visual roll of the dice.
I have found that the animations will only run if the individual die value (or in case of the code, if the Image(systemName: "\(diceValue).square.fill")) changes from one roll to the next. In other words, if I roll three dice, and they land on 1-4-6, then I roll again and they land on 1-4-7, the 1 and 4 images will perform the animation, but the image changing from 6 to 7 does not animate - it just updates to the new image. Any idea why the animation only runs on the images that did not change from the previous dice roll?
import SwiftUI
struct Dice {
var sides: Int
var values: [Int] {
var calculatedValues = [Int]()
for v in 1...sides {
calculatedValues.append(v)
}
return calculatedValues
}
func rollDice() -> Int {
let index = Int.random(in: 0..<values.count)
return values[index]
}
}
struct Roll: Hashable, Identifiable {
let id = UUID()
var diceNumber: Int = 0
var diceValue: Int = 0
}
struct DiceThrow: Hashable {
var rolls = [Roll]()
var totalScore: Int {
var score = 0
for roll in rolls {
score += roll.diceValue
}
return score
}
}
class ThrowStore: ObservableObject, Hashable {
#Published var diceThrows = [DiceThrow]()
static func ==(lhs: ThrowStore, rhs: ThrowStore) -> Bool {
return lhs.diceThrows == rhs.diceThrows
}
func hash(into hasher: inout Hasher) {
hasher.combine(diceThrows)
}
}
class Settings: ObservableObject {
#Published var dicePerRoll: Int = 1
#Published var sidesPerDice: Int = 4
init(dicePerRoll: Int, sidesPerDice: Int) {
self.dicePerRoll = dicePerRoll
self.sidesPerDice = sidesPerDice
}
}
struct ContentView: View {
var throwStore = ThrowStore()
let settings = Settings(dicePerRoll: 3, sidesPerDice: 6)
#State private var roll = Roll()
#State private var diceThrow = DiceThrow()
#State private var isRotated = false
#State private var rotationAngle: Double = 0
var animation: Animation {
Animation.easeOut(duration: 3)
}
var body: some View {
VStack {
if self.throwStore.diceThrows.count != 0 {
HStack {
Text("For dice roll #\(self.throwStore.diceThrows.count)...")
.fontWeight(.bold)
.font(.largeTitle)
.padding(.leading)
Spacer()
}
}
List {
HStack(alignment: .center) {
Spacer()
ForEach(diceThrow.rolls, id: \.self) { printedRoll in
Text("\(printedRoll.diceValue)")
.font(.title)
.foregroundColor(.white)
.frame(width: 50, height: 50)
.background(RoundedRectangle(cornerRadius: 4))
.rotation3DEffect(Angle.degrees(isRotated ? 3600 : 0), axis: (x: 1, y: 0, z: 0))
.rotationEffect(Angle.degrees(isRotated ? 3600 : 0))
.animation(animation)
}
Spacer()
}
if self.throwStore.diceThrows.count != 0 {
HStack {
Text("Total for this roll:")
Spacer()
Text("\(self.diceThrow.totalScore)")
.padding(.leading)
.padding(.trailing)
.background(Capsule().stroke())
}
}
}
Spacer()
Button("Roll the dice") {
self.diceThrow.rolls = [Roll]()
self.isRotated.toggle()
for diceNumber in 1...settings.dicePerRoll {
let currentDice = Dice(sides: settings.sidesPerDice)
roll.diceNumber = diceNumber
roll.diceValue = currentDice.rollDice()
self.diceThrow.rolls.append(roll)
}
self.throwStore.diceThrows.append(self.diceThrow)
}
.frame(width: 200)
.padding()
.background(Color.blue)
.foregroundColor(.white)
.clipShape(Capsule())
.padding(.bottom)
}
}
func showDiceRoll(_ sides: Int) {
}
}

Answer 1

In your scenario the data identifiers in ForEach should remain the same, otherwise corresponding views are replaced and animation does not work.
The fix for this is simple - use diceNumber as ID:
ForEach(diceThrow.rolls, id: \.diceNumber) { printedRoll in
Text("\(printedRoll.diceValue)")
Tested with Xcode 12.1 / iOS 14.1