Add animations
This commit is contained in:
parent
d2d4844469
commit
07bc128464
|
@ -23,6 +23,7 @@
|
||||||
F8210DE32966D256001D9973 /* Status+StatusData.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8210DE22966D256001D9973 /* Status+StatusData.swift */; };
|
F8210DE32966D256001D9973 /* Status+StatusData.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8210DE22966D256001D9973 /* Status+StatusData.swift */; };
|
||||||
F8210DE52966E160001D9973 /* Color+SystemColors.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8210DE42966E160001D9973 /* Color+SystemColors.swift */; };
|
F8210DE52966E160001D9973 /* Color+SystemColors.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8210DE42966E160001D9973 /* Color+SystemColors.swift */; };
|
||||||
F8210DE72966E1D1001D9973 /* Color+Assets.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8210DE62966E1D1001D9973 /* Color+Assets.swift */; };
|
F8210DE72966E1D1001D9973 /* Color+Assets.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8210DE62966E1D1001D9973 /* Color+Assets.swift */; };
|
||||||
|
F8210DEA2966E4F9001D9973 /* AnimatePlaceholderModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8210DE92966E4F9001D9973 /* AnimatePlaceholderModifier.swift */; };
|
||||||
F8341F90295C636C009C8EE6 /* UIImage+Exif.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8341F8F295C636C009C8EE6 /* UIImage+Exif.swift */; };
|
F8341F90295C636C009C8EE6 /* UIImage+Exif.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8341F8F295C636C009C8EE6 /* UIImage+Exif.swift */; };
|
||||||
F8341F92295C63BB009C8EE6 /* ImageStatus.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8341F91295C63BB009C8EE6 /* ImageStatus.swift */; };
|
F8341F92295C63BB009C8EE6 /* ImageStatus.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8341F91295C63BB009C8EE6 /* ImageStatus.swift */; };
|
||||||
F83901A6295D8EC000456AE2 /* LabelIcon.swift in Sources */ = {isa = PBXBuildFile; fileRef = F83901A5295D8EC000456AE2 /* LabelIcon.swift */; };
|
F83901A6295D8EC000456AE2 /* LabelIcon.swift in Sources */ = {isa = PBXBuildFile; fileRef = F83901A5295D8EC000456AE2 /* LabelIcon.swift */; };
|
||||||
|
@ -81,6 +82,7 @@
|
||||||
F8210DE22966D256001D9973 /* Status+StatusData.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Status+StatusData.swift"; sourceTree = "<group>"; };
|
F8210DE22966D256001D9973 /* Status+StatusData.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Status+StatusData.swift"; sourceTree = "<group>"; };
|
||||||
F8210DE42966E160001D9973 /* Color+SystemColors.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Color+SystemColors.swift"; sourceTree = "<group>"; };
|
F8210DE42966E160001D9973 /* Color+SystemColors.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Color+SystemColors.swift"; sourceTree = "<group>"; };
|
||||||
F8210DE62966E1D1001D9973 /* Color+Assets.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Color+Assets.swift"; sourceTree = "<group>"; };
|
F8210DE62966E1D1001D9973 /* Color+Assets.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Color+Assets.swift"; sourceTree = "<group>"; };
|
||||||
|
F8210DE92966E4F9001D9973 /* AnimatePlaceholderModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AnimatePlaceholderModifier.swift; sourceTree = "<group>"; };
|
||||||
F8341F8F295C636C009C8EE6 /* UIImage+Exif.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIImage+Exif.swift"; sourceTree = "<group>"; };
|
F8341F8F295C636C009C8EE6 /* UIImage+Exif.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIImage+Exif.swift"; sourceTree = "<group>"; };
|
||||||
F8341F91295C63BB009C8EE6 /* ImageStatus.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageStatus.swift; sourceTree = "<group>"; };
|
F8341F91295C63BB009C8EE6 /* ImageStatus.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageStatus.swift; sourceTree = "<group>"; };
|
||||||
F83901A5295D8EC000456AE2 /* LabelIcon.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LabelIcon.swift; sourceTree = "<group>"; };
|
F83901A5295D8EC000456AE2 /* LabelIcon.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LabelIcon.swift; sourceTree = "<group>"; };
|
||||||
|
@ -141,6 +143,14 @@
|
||||||
/* End PBXFrameworksBuildPhase section */
|
/* End PBXFrameworksBuildPhase section */
|
||||||
|
|
||||||
/* Begin PBXGroup section */
|
/* Begin PBXGroup section */
|
||||||
|
F8210DE82966E4D8001D9973 /* Modifiers */ = {
|
||||||
|
isa = PBXGroup;
|
||||||
|
children = (
|
||||||
|
F8210DE92966E4F9001D9973 /* AnimatePlaceholderModifier.swift */,
|
||||||
|
);
|
||||||
|
path = Modifiers;
|
||||||
|
sourceTree = "<group>";
|
||||||
|
};
|
||||||
F8341F93295C63E2009C8EE6 /* Views */ = {
|
F8341F93295C63E2009C8EE6 /* Views */ = {
|
||||||
isa = PBXGroup;
|
isa = PBXGroup;
|
||||||
children = (
|
children = (
|
||||||
|
@ -247,6 +257,7 @@
|
||||||
isa = PBXGroup;
|
isa = PBXGroup;
|
||||||
children = (
|
children = (
|
||||||
F866F6A829604FFF002E8F88 /* Info.plist */,
|
F866F6A829604FFF002E8F88 /* Info.plist */,
|
||||||
|
F8210DE82966E4D8001D9973 /* Modifiers */,
|
||||||
F88FAD30295F5010009B20C9 /* Services */,
|
F88FAD30295F5010009B20C9 /* Services */,
|
||||||
F83901A2295D863B00456AE2 /* Widgets */,
|
F83901A2295D863B00456AE2 /* Widgets */,
|
||||||
F8341F97295C6434009C8EE6 /* Formatters */,
|
F8341F97295C6434009C8EE6 /* Formatters */,
|
||||||
|
@ -367,6 +378,7 @@
|
||||||
F8210DDF2966CFC7001D9973 /* AttachmentData+Attachment.swift in Sources */,
|
F8210DDF2966CFC7001D9973 /* AttachmentData+Attachment.swift in Sources */,
|
||||||
F80048082961E6DE00E6868A /* StatusDataHandler.swift in Sources */,
|
F80048082961E6DE00E6868A /* StatusDataHandler.swift in Sources */,
|
||||||
F866F6A0296040A8002E8F88 /* ApplicationSettings+CoreDataClass.swift in Sources */,
|
F866F6A0296040A8002E8F88 /* ApplicationSettings+CoreDataClass.swift in Sources */,
|
||||||
|
F8210DEA2966E4F9001D9973 /* AnimatePlaceholderModifier.swift in Sources */,
|
||||||
F8210DE52966E160001D9973 /* Color+SystemColors.swift in Sources */,
|
F8210DE52966E160001D9973 /* Color+SystemColors.swift in Sources */,
|
||||||
F88FAD23295F3FC4009B20C9 /* LocalFeedView.swift in Sources */,
|
F88FAD23295F3FC4009B20C9 /* LocalFeedView.swift in Sources */,
|
||||||
F88FAD2B295F43B8009B20C9 /* AccountData+CoreDataProperties.swift in Sources */,
|
F88FAD2B295F43B8009B20C9 /* AccountData+CoreDataProperties.swift in Sources */,
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
//
|
||||||
|
// https://mczachurski.dev
|
||||||
|
// Copyright © 2023 Marcin Czachurski and the repository contributors.
|
||||||
|
// Licensed under the MIT License.
|
||||||
|
//
|
||||||
|
|
||||||
|
import SwiftUI
|
||||||
|
|
||||||
|
struct AnimatePlaceholderModifier: AnimatableModifier {
|
||||||
|
@Binding var isLoading: Bool
|
||||||
|
|
||||||
|
@State private var isAnim: Bool = false
|
||||||
|
private var center = (UIScreen.main.bounds.width / 2) + 110
|
||||||
|
// private let animation: Animation = .linear(duration: 1.5)
|
||||||
|
private let animation: Animation = .easeOut(duration: 1)
|
||||||
|
|
||||||
|
init(isLoading: Binding<Bool>) {
|
||||||
|
self._isLoading = isLoading
|
||||||
|
}
|
||||||
|
|
||||||
|
func body(content: Content) -> some View {
|
||||||
|
content.overlay(animView.mask(content))
|
||||||
|
}
|
||||||
|
|
||||||
|
var animView: some View {
|
||||||
|
LinearGradient(
|
||||||
|
gradient: .init(colors: [.black, .black.opacity(0.6), .black.opacity(0.3), .clear]),
|
||||||
|
startPoint: .leading,
|
||||||
|
endPoint: isAnim ? .trailing : .leading)
|
||||||
|
.animation(isLoading ? animation.repeatForever(autoreverses: false) : nil, value: isAnim)
|
||||||
|
.onAppear {
|
||||||
|
guard isLoading else { return }
|
||||||
|
isAnim.toggle()
|
||||||
|
}
|
||||||
|
.onChange(of: isLoading) { _ in
|
||||||
|
isAnim.toggle()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
extension View {
|
||||||
|
func animatePlaceholder(isLoading: Binding<Bool>) -> some View {
|
||||||
|
self.modifier(AnimatePlaceholderModifier(isLoading: isLoading))
|
||||||
|
}
|
||||||
|
}
|
|
@ -68,25 +68,38 @@ struct DetailsView: View {
|
||||||
Rectangle()
|
Rectangle()
|
||||||
.fill(Color.placeholderText)
|
.fill(Color.placeholderText)
|
||||||
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.width)
|
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.width)
|
||||||
.redacted(reason: .placeholder)
|
|
||||||
HStack (alignment: .center) {
|
HStack (alignment: .center) {
|
||||||
Circle()
|
Circle()
|
||||||
.fill(Color.placeholderText)
|
.fill(Color.placeholderText)
|
||||||
.frame(width: 48.0, height: 48.0)
|
.frame(width: 48.0, height: 48.0)
|
||||||
.redacted(reason: .placeholder)
|
|
||||||
|
|
||||||
VStack (alignment: .leading) {
|
VStack (alignment: .leading) {
|
||||||
Text("Verylong Displayname")
|
Text("Verylong Displayname")
|
||||||
.foregroundColor(Color.mainTextColor)
|
.foregroundColor(Color.mainTextColor)
|
||||||
.redacted(reason: .placeholder)
|
|
||||||
Text("@username")
|
Text("@username")
|
||||||
.foregroundColor(Color.lightGrayColor)
|
.foregroundColor(Color.lightGrayColor)
|
||||||
.font(.footnote)
|
.font(.footnote)
|
||||||
.redacted(reason: .placeholder)
|
|
||||||
}
|
}
|
||||||
.padding(.leading, 8)
|
.padding(.leading, 8)
|
||||||
}.padding(8)
|
}.padding(8)
|
||||||
|
|
||||||
|
VStack(alignment: .leading) {
|
||||||
|
Text("Lorem ispum text something")
|
||||||
|
.foregroundColor(Color.lightGrayColor)
|
||||||
|
.font(.footnote)
|
||||||
|
Text("Lorem ispum text something sdf sdfsdf sdfdsfsdfsdf")
|
||||||
|
.foregroundColor(Color.lightGrayColor)
|
||||||
|
.font(.footnote)
|
||||||
|
|
||||||
|
LabelIcon(iconName: "camera", value: "SONY ILCE-7M3")
|
||||||
|
LabelIcon(iconName: "camera.aperture", value: "Viltrox 24mm F1.8 E")
|
||||||
|
LabelIcon(iconName: "timelapse", value: "24.0 mm, f/1.8, 1/640s, ISO 100")
|
||||||
|
LabelIcon(iconName: "calendar", value: "2 Oct 2022")
|
||||||
|
}.padding(8)
|
||||||
}
|
}
|
||||||
|
.redacted(reason: .placeholder)
|
||||||
|
.animatePlaceholder(isLoading: .constant(true))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.navigationBarTitle("Details")
|
.navigationBarTitle("Details")
|
||||||
|
|
Loading…
Reference in New Issue