This commit is contained in:
Isaac
2025-08-05 17:43:59 +02:00
parent 5da006c4ea
commit a25bedd36b
16 changed files with 730 additions and 270 deletions

View File

@@ -4,6 +4,23 @@ import Display
import ComponentFlow
import TelegramPresentationData
extension ComponentTransition {
func animateBlur(layer: CALayer, from: CGFloat, to: CGFloat, delay: Double = 0.0, removeOnCompletion: Bool = true, completion: ((Bool) -> Void)? = nil) {
if let blurFilter = CALayer.blur() {
blurFilter.setValue(to as NSNumber, forKey: "inputRadius")
layer.filters = [blurFilter]
layer.animate(from: from as NSNumber, to: to as NSNumber, keyPath: "filters.gaussianBlur.inputRadius", timingFunction: CAMediaTimingFunctionName.easeOut.rawValue, duration: 0.3, delay: delay, removeOnCompletion: removeOnCompletion, completion: { [weak layer] _ in
guard let layer else {
return
}
if to == 0.0 && removeOnCompletion {
layer.filters = nil
}
})
}
}
}
public final class AnimatedTextComponent: Component {
public struct Item: Equatable {
public enum Content: Equatable {
@@ -27,19 +44,25 @@ public final class AnimatedTextComponent: Component {
public let items: [Item]
public let noDelay: Bool
public let animateScale: Bool
public let preferredDirectionIsDown: Bool
public let blur: Bool
public init(
font: UIFont,
color: UIColor,
items: [Item],
noDelay: Bool = false,
animateScale: Bool = true
animateScale: Bool = true,
preferredDirectionIsDown: Bool = false,
blur: Bool = false
) {
self.font = font
self.color = color
self.items = items
self.noDelay = noDelay
self.animateScale = animateScale
self.preferredDirectionIsDown = preferredDirectionIsDown
self.blur = blur
}
public static func ==(lhs: AnimatedTextComponent, rhs: AnimatedTextComponent) -> Bool {
@@ -58,6 +81,12 @@ public final class AnimatedTextComponent: Component {
if lhs.animateScale != rhs.animateScale {
return false
}
if lhs.preferredDirectionIsDown != rhs.preferredDirectionIsDown {
return false
}
if lhs.blur != rhs.blur {
return false
}
return true
}
@@ -88,8 +117,14 @@ public final class AnimatedTextComponent: Component {
var size = CGSize()
let delayNorm: CGFloat = 0.002
var offsetNorm: CGFloat = 0.4
let transitionBlurRadius: CGFloat = 6.0
var firstDelayWidth: CGFloat?
if component.preferredDirectionIsDown {
firstDelayWidth = 0.0
offsetNorm = 0.8
}
var validKeys: [CharacterKey] = []
for item in component.items {
@@ -119,6 +154,57 @@ public final class AnimatedTextComponent: Component {
index += 1
validKeys.append(characterKey)
}
}
var outLastDelayWidth: CGFloat?
var outFirstDelayWidth: CGFloat?
if component.preferredDirectionIsDown {
for (key, characterView) in self.characters {
if !validKeys.contains(key), let characterView = characterView.view {
if let outFirstDelayWidthValue = outFirstDelayWidth {
outFirstDelayWidth = max(outFirstDelayWidthValue, characterView.frame.center.x)
} else {
outFirstDelayWidth = characterView.frame.center.x
}
if let outLastDelayWidthValue = outLastDelayWidth {
outLastDelayWidth = min(outLastDelayWidthValue, characterView.frame.center.x)
} else {
outLastDelayWidth = characterView.frame.center.x
}
}
}
}
if outLastDelayWidth != nil {
firstDelayWidth = outLastDelayWidth
}
for item in component.items {
var itemText: [String] = []
switch item.content {
case let .text(text):
if item.isUnbreakable {
itemText = [text]
} else {
itemText = text.map(String.init)
}
case let .number(value, minDigits):
var valueText: String = "\(value)"
while valueText.count < minDigits {
valueText.insert("0", at: valueText.startIndex)
}
if item.isUnbreakable {
itemText = [valueText]
} else {
itemText = valueText.map(String.init)
}
}
var index = 0
for character in itemText {
let characterKey = CharacterKey(itemId: item.id, index: index, value: character)
index += 1
var characterTransition = transition
let characterView: ComponentView<Empty>
@@ -155,7 +241,11 @@ public final class AnimatedTextComponent: Component {
} else {
var delayWidth: Double = 0.0
if let firstDelayWidth {
delayWidth = size.width - firstDelayWidth
if characterFrame.midX > characterComponentView.frame.midX {
delayWidth = 0.0
} else {
delayWidth = abs(size.width - firstDelayWidth)
}
} else {
firstDelayWidth = size.width
}
@@ -170,7 +260,7 @@ public final class AnimatedTextComponent: Component {
if animateIn, !transition.animation.isImmediate {
var delayWidth: Double = 0.0
if !component.noDelay {
if !component.noDelay || component.preferredDirectionIsDown {
if let firstDelayWidth {
delayWidth = size.width - firstDelayWidth
} else {
@@ -181,7 +271,10 @@ public final class AnimatedTextComponent: Component {
if component.animateScale {
characterComponentView.layer.animateScale(from: 0.001, to: 1.0, duration: 0.4, delay: delayNorm * delayWidth, timingFunction: kCAMediaTimingFunctionSpring)
}
characterComponentView.layer.animatePosition(from: CGPoint(x: 0.0, y: characterSize.height * 0.5), to: CGPoint(), duration: 0.4, delay: delayNorm * delayWidth, timingFunction: kCAMediaTimingFunctionSpring, additive: true)
if component.blur {
ComponentTransition.easeInOut(duration: 0.2).animateBlur(layer: characterComponentView.layer, from: transitionBlurRadius, to: 0.0, delay: delayNorm * delayWidth)
}
characterComponentView.layer.animatePosition(from: CGPoint(x: 0.0, y: characterSize.height * offsetNorm), to: CGPoint(), duration: 0.4, delay: delayNorm * delayWidth, timingFunction: kCAMediaTimingFunctionSpring, additive: true)
characterComponentView.layer.animateAlpha(from: 0.0, to: 1.0, duration: 0.18, delay: delayNorm * delayWidth)
}
}
@@ -194,8 +287,6 @@ public final class AnimatedTextComponent: Component {
let outScaleTransition: ComponentTransition = .spring(duration: 0.4)
let outAlphaTransition: ComponentTransition = .easeInOut(duration: 0.18)
var outFirstDelayWidth: CGFloat?
var removedKeys: [CharacterKey] = []
for (key, characterView) in self.characters {
if !validKeys.contains(key) {
@@ -205,18 +296,28 @@ public final class AnimatedTextComponent: Component {
if !transition.animation.isImmediate {
var delayWidth: Double = 0.0
if let outFirstDelayWidth {
delayWidth = characterComponentView.frame.minX - outFirstDelayWidth
delayWidth = abs(characterComponentView.frame.midX - outFirstDelayWidth)
} else {
outFirstDelayWidth = characterComponentView.frame.minX
outFirstDelayWidth = characterComponentView.frame.midX
}
delayWidth = max(0.0, delayWidth)
if component.animateScale {
outScaleTransition.setScale(view: characterComponentView, scale: 0.01, delay: delayNorm * delayWidth)
}
outScaleTransition.setPosition(view: characterComponentView, position: CGPoint(x: characterComponentView.center.x, y: characterComponentView.center.y - characterComponentView.bounds.height * 0.4), delay: delayNorm * delayWidth)
let targetY: CGFloat
if component.preferredDirectionIsDown {
targetY = characterComponentView.center.y - characterComponentView.bounds.height * offsetNorm
} else {
targetY = characterComponentView.center.y - characterComponentView.bounds.height * offsetNorm
}
outScaleTransition.setPosition(view: characterComponentView, position: CGPoint(x: characterComponentView.center.x, y: targetY), delay: delayNorm * delayWidth)
outAlphaTransition.setAlpha(view: characterComponentView, alpha: 0.0, delay: delayNorm * delayWidth, completion: { [weak characterComponentView] _ in
characterComponentView?.removeFromSuperview()
})
if component.blur {
outAlphaTransition.animateBlur(layer: characterComponentView.layer, from: 0.0, to: transitionBlurRadius, delay: delayNorm * delayWidth, removeOnCompletion: false)
}
} else {
characterComponentView.removeFromSuperview()
}