Added animation to the appearance and disappearance of instructions view

This commit is contained in:
Muhand Jumah 2023-04-27 10:57:44 -04:00
parent 5c147debcd
commit 903a063257
2 changed files with 46 additions and 26 deletions

View File

@ -34,32 +34,38 @@ internal struct HighlightingView<Content: View, Chunk: FlowChunk>: View {
ZStack {
self.content
SpotlightView(
chunk: self.chunks[self.currentIndex],
namespace: self.namespace,
namespace2: self.namespace2
)
.opacity(self.showTutorial ? 1 : 0)
.animation(
.easeOut,
value: self.showTutorial ? self.currentIndex : nil
)
.overlay(
GeometryReader { reader in
instructionsOverlay(reader: reader)
.animation(.easeOut, value: self.showTutorial ? self.currentIndex : nil)
// Text("\(reader.size.width) X \(reader.size.height)")
// ZStack {
// Color.blue
// }
ZStack {
if (self.showTutorial) {
SpotlightView(
chunk: self.chunks[self.currentIndex],
namespace: self.namespace,
namespace2: self.namespace2
)
.overlay(
GeometryReader { reader in
instructionsOverlay(reader: reader)
.animation(.easeOut, value: self.showTutorial ? self.currentIndex : nil)
// Text("\(reader.size.width) X \(reader.size.height)")
// ZStack {
// Color.blue
// }
}
.matchedGeometryEffect(id: 10000, in: self.namespace2, isSource: false)
// .overlay(
// GeometryReader { reader in
// Text("\(reader.size.width) X \(reader.size.height)")
// }
// )
)
.opacity(self.showTutorial ? 1 : 0)
.animation(
.easeOut,
value: self.showTutorial ? self.currentIndex : nil
)
}
.matchedGeometryEffect(id: 10000, in: self.namespace2, isSource: false)
// .overlay(
// GeometryReader { reader in
// Text("\(reader.size.width) X \(reader.size.height)")
// }
// )
)
}
.transition(.opacity)
.animation(.linear, value: self.showTutorial)
//#if DEBUG
@ -74,6 +80,13 @@ internal struct HighlightingView<Content: View, Chunk: FlowChunk>: View {
// }
//#endif
}
.onChange(of: self.showTutorial) { newValue in
if(newValue == false) {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
self.currentIndex = 0
}
}
}
}
}
@ -84,7 +97,9 @@ private extension HighlightingView {
return
}
self.showTutorial = false
// withAnimation(.easeOut) {
self.showTutorial = false
// }
}
func previous() {

View File

@ -79,6 +79,11 @@ struct ContentView: View {
parentIdentifier: self.uniqueIdentifier,
chunk: self.tutorial[2]
)
.onTapGesture {
// withAnimation(.linear) {
self.showTutorial = true
// }
}
}
.padding()
.assembleSpotlightChunks(uniqueIdentifier: self.uniqueIdentifier, chunks: Array(TutorialChunks.allCases), showTutorial: self.$showTutorial)