signalapp/Signal-iOS
signalapp/Signal-iOS
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 4 Wiki Activity

Use lotties in story viewer NUX overlay

Browse Source
This commit is contained in:
Harry 2022-10-19 12:29:15 -07:00 committed by GitHub
parent a0168195f4
commit a5a69062a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 65 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Signal.xcodeproj/project.pbxproj
View File

@ -772,6 +772,9 @@
661396AD28BE74DC00E0C4DF /* ChainedPromise.swift in Sources */ = {isa = PBXBuildFile; fileRef = 661396AC28BE74DC00E0C4DF /* ChainedPromise.swift */; };
661396AF28BE881E00E0C4DF /* ChainedPromiseTest.swift in Sources */ = {isa = PBXBuildFile; fileRef = 661396AE28BE881E00E0C4DF /* ChainedPromiseTest.swift */; };
661602A428BEB94400C1932D /* StoryListDataSource.swift in Sources */ = {isa = PBXBuildFile; fileRef = 661602A328BEB94400C1932D /* StoryListDataSource.swift */; };
66586D3729005A1B00DDA9B9 /* story_viewer_onboarding_2.json in Resources */ = {isa = PBXBuildFile; fileRef = 66586D3429005A1B00DDA9B9 /* story_viewer_onboarding_2.json */; };
66586D3829005A1B00DDA9B9 /* story_viewer_onboarding_1.json in Resources */ = {isa = PBXBuildFile; fileRef = 66586D3529005A1B00DDA9B9 /* story_viewer_onboarding_1.json */; };
66586D3929005A1B00DDA9B9 /* story_viewer_onboarding_3.json in Resources */ = {isa = PBXBuildFile; fileRef = 66586D3629005A1B00DDA9B9 /* story_viewer_onboarding_3.json */; };
667E90D028E799D1005FE603 /* MyStorySettingsLearnMoreSheetViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 667E90CF28E799D1005FE603 /* MyStorySettingsLearnMoreSheetViewController.swift */; };
667EDE6428F8D6B7001FB487 /* YYAnimatedImage+Duration.swift in Sources */ = {isa = PBXBuildFile; fileRef = 667EDE6328F8D6B7001FB487 /* YYAnimatedImage+Duration.swift */; };
667EDE6628FA0372001FB487 /* StoryBadgeCountManager.swift in Sources */ = {isa = PBXBuildFile; fileRef = 667EDE6528FA0372001FB487 /* StoryBadgeCountManager.swift */; };
@ -3026,6 +3029,9 @@
661396AE28BE881E00E0C4DF /* ChainedPromiseTest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChainedPromiseTest.swift; sourceTree = "<group>"; };
661602A328BEB94400C1932D /* StoryListDataSource.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoryListDataSource.swift; sourceTree = "<group>"; };
6657FDE7B91C2845BB3BEAB5 /* Pods_SignalShareExtension.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_SignalShareExtension.framework; sourceTree = BUILT_PRODUCTS_DIR; };
66586D3429005A1B00DDA9B9 /* story_viewer_onboarding_2.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = story_viewer_onboarding_2.json; sourceTree = "<group>"; };
66586D3529005A1B00DDA9B9 /* story_viewer_onboarding_1.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = story_viewer_onboarding_1.json; sourceTree = "<group>"; };
66586D3629005A1B00DDA9B9 /* story_viewer_onboarding_3.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = story_viewer_onboarding_3.json; sourceTree = "<group>"; };
667E90CF28E799D1005FE603 /* MyStorySettingsLearnMoreSheetViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MyStorySettingsLearnMoreSheetViewController.swift; sourceTree = "<group>"; };
667EDE6328F8D6B7001FB487 /* YYAnimatedImage+Duration.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "YYAnimatedImage+Duration.swift"; sourceTree = "<group>"; };
667EDE6528FA0372001FB487 /* StoryBadgeCountManager.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoryBadgeCountManager.swift; sourceTree = "<group>"; };
@ -6466,6 +6472,9 @@
880C0FF6233D3F7C00386FB8 /* playPauseButton.json */,
346EFC3825FFDC6900F493C7 /* restore-dark.json */,
346EFC3725FFDC6900F493C7 /* restore.json */,
66586D3529005A1B00DDA9B9 /* story_viewer_onboarding_1.json */,
66586D3429005A1B00DDA9B9 /* story_viewer_onboarding_2.json */,
66586D3629005A1B00DDA9B9 /* story_viewer_onboarding_3.json */,
4C0CF6F92386295400C9F818 /* tap_to_focus.json */,
887CD4862473587300FDD265 /* transfer.json */,
346EFC3925FFDC6900F493C7 /* update-pin-dark.json */,
@ -9102,6 +9111,9 @@
34C3C78F2040A4F70000134C /* sonarping.mp3 in Resources */,
88928A44263A2781009C9B30 /* state-change_confirm-down.caf in Resources */,
88928A45263A2781009C9B30 /* state-change_confirm-up.caf in Resources */,
66586D3829005A1B00DDA9B9 /* story_viewer_onboarding_1.json in Resources */,
66586D3729005A1B00DDA9B9 /* story_viewer_onboarding_2.json in Resources */,
66586D3929005A1B00DDA9B9 /* story_viewer_onboarding_3.json in Resources */,
45B74A752044AAB600CD42F8 /* synth-quiet.aifc in Resources */,
45B74A8B2044AAB600CD42F8 /* synth.aifc in Resources */,
4C0CF6FA2386295400C9F818 /* tap_to_focus.json in Resources */,

12
Signal/Images.xcassets/story_viewer_onboarding_1.imageset/Contents.json vendored
View File

@ -1,12 +0,0 @@
{
"images" : [
{
"filename" : "story_viewer_onboarding_1.pdf",
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

BIN
Signal/Images.xcassets/story_viewer_onboarding_1.imageset/story_viewer_onboarding_1.pdf vendored
View File

Binary file not shown.

12
Signal/Images.xcassets/story_viewer_onboarding_2.imageset/Contents.json vendored
View File

@ -1,12 +0,0 @@
{
"images" : [
{
"filename" : "story_viewer_onboarding_2.pdf",
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

BIN
Signal/Images.xcassets/story_viewer_onboarding_2.imageset/story_viewer_onboarding_2.pdf vendored
View File

Binary file not shown.

12
Signal/Images.xcassets/story_viewer_onboarding_3.imageset/Contents.json vendored
View File

@ -1,12 +0,0 @@
{
"images" : [
{
"filename" : "story_viewer_onboarding_3.pdf",
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

BIN
Signal/Images.xcassets/story_viewer_onboarding_3.imageset/story_viewer_onboarding_3.pdf vendored
View File

Binary file not shown.

1
Signal/Lottie/story_viewer_onboarding_1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
Signal/Lottie/story_viewer_onboarding_2.json Normal file
View File

File diff suppressed because one or more lines are too long

1
Signal/Lottie/story_viewer_onboarding_3.json Normal file
View File

File diff suppressed because one or more lines are too long

72
Signal/src/ViewControllers/HomeView/Stories/Context View/StoryContextOnboardingOverlayView.swift
View File

@ -4,8 +4,9 @@
//
import Foundation
import UIKit
import Lottie
import SignalServiceKit
import UIKit
protocol StoryContextOnboardingOverlayViewDelegate: AnyObject {
@ -90,10 +91,16 @@ class StoryContextOnboardingOverlayView: UIView, Dependencies {
self.isHidden = false
blurView.effect = .none
blurView.contentView.alpha = 0
UIView.animate(withDuration: 0.35) {
self.blurView.effect = UIBlurEffect(style: .dark)
self.blurView.contentView.alpha = 1
}
UIView.animate(
withDuration: 0.35,
animations: {
self.blurView.effect = UIBlurEffect(style: .dark)
self.blurView.contentView.alpha = 1
},
completion: { [weak self] _ in
self?.startAnimations()
}
)
}
func dismiss() {
@ -118,6 +125,8 @@ class StoryContextOnboardingOverlayView: UIView, Dependencies {
private lazy var blurView = UIVisualEffectView()
private var animationViews = [AnimationView]()
private func setupSubviews() {
addSubview(blurView)
blurView.autoPinEdgesToSuperviewEdges()
@ -128,18 +137,22 @@ class StoryContextOnboardingOverlayView: UIView, Dependencies {
vStack.distribution = .equalSpacing
vStack.spacing = 42
animationViews = []
for asset in assets {
let imageContainer = UIView()
let imageView = UIImageView(image: asset.image?.withRenderingMode(.alwaysTemplate).asTintedImage(color: .ows_white))
imageView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
let animationView = AnimationView(name: asset.lottieName)
animationView.loopMode = .playOnce
animationView.backgroundBehavior = .forceFinish
animationView.autoSetDimensions(to: .square(54))
imageContainer.addSubview(imageView)
imageContainer.addSubview(animationView)
imageContainer.autoPinHeight(toHeightOf: imageView)
imageContainer.autoPinWidth(toWidthOf: imageView)
imageView.autoVCenterInSuperview()
imageView.autoAlignAxis(.vertical, toSameAxisOf: imageContainer, withOffset: asset.imageXOffset)
imageContainer.autoPinHeight(toHeightOf: animationView)
imageContainer.autoPinWidth(toWidthOf: animationView)
animationView.autoVCenterInSuperview()
animationView.autoAlignAxis(.vertical, toSameAxisOf: imageContainer)
let label = UILabel()
label.textColor = .ows_gray05
@ -157,6 +170,8 @@ class StoryContextOnboardingOverlayView: UIView, Dependencies {
innerVStack.addArrangedSubviews([imageContainer, label])
vStack.addArrangedSubview(innerVStack)
animationViews.append(animationView)
}
let confirmButtonContainer = ManualLayoutView(name: "confirm_button")
@ -223,35 +238,48 @@ class StoryContextOnboardingOverlayView: UIView, Dependencies {
closeButton.autoPinEdge(toSuperviewEdge: .leading, withInset: 20)
}
private func startAnimations() {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) { [weak self] in
self?.playAnimation(at: 0)
}
}
private func playAnimation(at index: Int) {
guard !animationViews.isEmpty, self.isDisplaying else {
return
}
guard let animationView = animationViews[safe: index] else {
startAnimations()
return
}
animationView.play { [weak self] _ in
self?.playAnimation(at: index + 1)
}
}
private struct Asset {
let image: UIImage?
let imageXOffset: CGFloat
let lottieName: String
let text: String
}
private var assets: [Asset] {
[
Asset(
image: #imageLiteral(resourceName: "story_viewer_onboarding_1"),
imageXOffset: 0,
lottieName: "story_viewer_onboarding_1",
text: NSLocalizedString(
"STORY_VIEWER_ONBOARDING_1",
comment: "Text shown the first time the user opens the story viewer instructing them how to use it."
)
),
Asset(
image: #imageLiteral(resourceName: "story_viewer_onboarding_2"),
imageXOffset: 0,
lottieName: "story_viewer_onboarding_2",
text: NSLocalizedString(
"STORY_VIEWER_ONBOARDING_2",
comment: "Text shown the first time the user opens the story viewer instructing them how to use it."
)
),
Asset(
image: #imageLiteral(resourceName: "story_viewer_onboarding_3"),
// The asset is "centered" but the designs require misalignment of the
// assets frame to visually align a sub-part of its contents.
imageXOffset: -12,
lottieName: "story_viewer_onboarding_3",
text: NSLocalizedString(
"STORY_VIEWER_ONBOARDING_3",
comment: "Text shown the first time the user opens the story viewer instructing them how to use it."