LTMorphingLabel
[EXPERIMENTAL] Graceful morphing effects for UILabel written in Swift.
Top Related Projects
[UNMAINTAINED] An UITextView which grows/shrinks with the text and starts scrolling when the content reaches a certain number of lines. Similar to the one Apple uses in the SMS-app. See blog-post for a small screencast.
A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.
Custom UITextFields effects inspired by Codrops, built using Swift
A drop-in replacement for UILabel, which automatically adds a scrolling marquee effect when the label's text does not fit inside the specified frame
Quick Overview
LTMorphingLabel is a UILabel subclass that supports a morphing animation effect. It allows you to create dynamic and visually appealing text labels that can smoothly transition between different text strings.
Pros
- Smooth Morphing Animation: The library provides a seamless morphing animation that makes text transitions visually appealing.
- Customizable Animations: LTMorphingLabel offers a variety of animation styles, including fade, scale, and wave, allowing you to choose the one that best fits your design.
- Easy Integration: The library is easy to integrate into your project, with a simple and straightforward API.
- Actively Maintained: The project is actively maintained, with regular updates and bug fixes.
Cons
- Limited Platform Support: LTMorphingLabel is designed for iOS and does not provide support for other platforms, such as Android or web.
- Performance Considerations: The morphing animation may have a slight performance impact, especially on older devices or when used extensively in a complex UI.
- Lack of Advanced Customization: While the library offers some customization options, the range of customization may be limited compared to building a custom text animation solution.
- Dependency on UIKit: As a UILabel subclass, LTMorphingLabel is tightly coupled with the UIKit framework, which may limit its use in cross-platform or non-UIKit-based projects.
Code Examples
Here are a few examples of how to use LTMorphingLabel in your Swift code:
- Basic Usage:
let label = LTMorphingLabel(frame: view.bounds)
label.text = "Hello, World!"
label.morphingEffect = .scale
view.addSubview(label)
- Customizing the Animation:
let label = LTMorphingLabel(frame: view.bounds)
label.text = "Morphing Label"
label.morphingEffect = .evaporate
label.animationDuration = 2.0
label.morphingCharacterDelay = 0.1
view.addSubview(label)
- Handling Text Changes:
let label = LTMorphingLabel(frame: view.bounds)
label.text = "Initial Text"
label.morphingEffect = .fade
view.addSubview(label)
// Change the text after 2 seconds
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
label.text = "New Text"
}
- Customizing the Font and Color:
let label = LTMorphingLabel(frame: view.bounds)
label.text = "Customized Label"
label.morphingEffect = .scale
label.font = UIFont.systemFont(ofSize: 24, weight: .bold)
label.textColor = .blue
view.addSubview(label)
Getting Started
To get started with LTMorphingLabel, follow these steps:
-
Add the LTMorphingLabel library to your project. You can do this by using a package manager like CocoaPods or Carthage, or by manually adding the source files to your project.
-
Import the LTMorphingLabel module in your Swift file:
import LTMorphingLabel
- Create an instance of LTMorphingLabel and customize its properties as needed:
let label = LTMorphingLabel(frame: view.bounds)
label.text = "Morphing Label"
label.morphingEffect = .scale
label.animationDuration = 2.0
label.morphingCharacterDelay = 0.1
view.addSubview(label)
- Optionally, you can handle text changes by updating the
text
property of the LTMorphingLabel instance:
label.text = "New Text"
That's it! You can now use LTMorphingLabel in your iOS project to create dynamic and visually appealing text labels.
Competitor Comparisons
[UNMAINTAINED] An UITextView which grows/shrinks with the text and starts scrolling when the content reaches a certain number of lines. Similar to the one Apple uses in the SMS-app. See blog-post for a small screencast.
Pros of GrowingTextView
- GrowingTextView automatically adjusts the height of a text view based on its content, providing a dynamic and responsive UI.
- It supports both single-line and multi-line text, making it suitable for a variety of use cases.
- The library provides a simple and straightforward API, making it easy to integrate into existing projects.
Cons of GrowingTextView
- GrowingTextView does not offer the same level of animation and visual effects as LTMorphingLabel, which specializes in text morphing and animation.
- The library may not be as actively maintained or have the same level of community support as LTMorphingLabel.
- GrowingTextView may not provide as many customization options as LTMorphingLabel, limiting its flexibility in certain scenarios.
Code Comparison
LTMorphingLabel:
let label = LTMorphingLabel()
label.morphingEffect = .scale
label.text = "Hello, World!"
label.start()
GrowingTextView:
let textView = GrowingTextView()
textView.text = "Hello, World!"
textView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(textView)
A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.
Pros of SkyFloatingLabelTextField
- Supports floating labels, which can provide a better user experience for form inputs
- Includes customization options for label color, font, and animation
- Provides a clean and modern UI design
Cons of SkyFloatingLabelTextField
- Lacks the morphing animation feature found in LTMorphingLabel
- May have a larger codebase and dependencies compared to a more focused library like LTMorphingLabel
- Potentially less actively maintained than LTMorphingLabel
Code Comparison
LTMorphingLabel:
let label = LTMorphingLabel()
label.text = "Hello, World!"
label.font = UIFont.systemFont(ofSize: 24)
label.morphingEffect = .scale
label.start()
SkyFloatingLabelTextField:
let textField = SkyFloatingLabelTextField()
textField.placeholder = "Enter text"
textField.title = "Label"
textField.font = UIFont.systemFont(ofSize: 16)
textField.tintColor = .blue
Custom UITextFields effects inspired by Codrops, built using Swift
Pros of TextFieldEffects
- Variety of Effects: TextFieldEffects provides a wide range of customizable text field effects, allowing developers to create visually appealing and unique input fields.
- Customization: The library offers extensive customization options, enabling developers to fine-tune the appearance and behavior of the text fields to match their application's design.
- Cross-platform Compatibility: TextFieldEffects is compatible with both iOS and tvOS, making it a versatile choice for developers working on various Apple platforms.
Cons of TextFieldEffects
- Limited Functionality: While TextFieldEffects focuses on providing visually appealing text fields, it may lack some of the advanced functionality and features offered by LTMorphingLabel.
- Dependency on Third-party Libraries: TextFieldEffects relies on the use of third-party libraries, which may increase the overall project complexity and dependency management.
Code Comparison
LTMorphingLabel:
let label = LTMorphingLabel()
label.text = "Hello, World!"
label.font = UIFont.systemFont(ofSize: 24)
label.morphingEffect = .scale
label.start()
TextFieldEffects:
let textField = HoshiTextField()
textField.placeholder = "Enter text"
textField.font = UIFont.systemFont(ofSize: 16)
textField.textColor = .black
textField.borderInactiveColor = .lightGray
A drop-in replacement for UILabel, which automatically adds a scrolling marquee effect when the label's text does not fit inside the specified frame
Pros of MarqueeLabel
- MarqueeLabel supports a wider range of animation types, including scrolling, blinking, and fading, providing more flexibility in creating dynamic text effects.
- MarqueeLabel has a more extensive set of customization options, allowing developers to fine-tune the appearance and behavior of the label to their specific needs.
- MarqueeLabel is actively maintained and has a larger community, potentially offering more support and updates compared to LTMorphingLabel.
Cons of MarqueeLabel
- LTMorphingLabel offers a more unique and visually appealing morphing effect, which may be more suitable for certain design requirements.
- The implementation of MarqueeLabel may be more complex, as it requires managing the animation state and handling various animation types, whereas LTMorphingLabel has a more straightforward API.
- MarqueeLabel may have a larger footprint in terms of code size and dependencies, which could be a consideration for projects with strict performance or size constraints.
Code Comparison
LTMorphingLabel:
let label = LTMorphingLabel()
label.morphingEffect = .scale
label.text = "Hello, World!"
label.start()
MarqueeLabel:
let label = MarqueeLabel()
label.type = .continuous
label.speed = .duration(7.0)
label.text = "This is a scrolling label"
label.start()
In the above examples, both libraries provide a simple and intuitive API for creating animated labels. LTMorphingLabel focuses on the morphing effect, while MarqueeLabel offers a wider range of animation types, such as scrolling and blinking.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
LTMorphingLabel
A morphing UILabel subclass written in Swift, originally designed to mimic Apple's QuickType animation in iOS 8 at WWDC 2014.
Table of Contents
- Available Effects
- Usage
- Requirements
- Installation
- Unit Testing
- Apps Using
LTMorphingLabel
- Third-Party Ports
- License
Available Effects
.scale (default)
.evaporate
.fall
.pixelate
.sparkle
.sparkle
is built on top ofQuartzCore.CAEmitterLayer
. There is also a SpriteKit-powered version here.
.burn
.anvil
Usage
UIKit
Since LTMorphingLabel
is a drop-in replacement, you can use it like any UILabel
by setting its text property, yielding the default effect (.scale
):
var exampleLabel = LTMorphingLabel()
exampleLabel.text = "This is a test"
Alternatively, it can be used interactively:
var exampleLabel = LTMorphingLabel()
exampleLabel.text = "This is a test"
exampleLabel.pause()
// Call .updateProgress(progress: Float) for interactive animation
// Note: In this case, animation will stop at 45% and will not complete
// unless called later with 100 as the `progress` float value.
exampleLabel.updateProgress(progress: 45.0)
The effect can be changed by setting the morphingEffect
property:
var exampleLabel = LTMorphingLabel()
exampleLabel.text = "This is a test"
exampleLabel.morphingEffect = .burn
SwiftUI
To use LTMorphingLabel
in SwiftUI, simply declare it and set its text, effect
, font
, and textColor
properties:
public var body: some View {
VStack {
MorphingText(
"This is a test",
font: UIFont.systemFont(ofSize: 20),
textColor: .black,
textAlignment: .center
)
.frame(maxWidth: 200, maxHeight: 100)
}
}
Similar to its use in UIKit, you can also specify the morphing effect manually (if you do not want to use the default .scale
effect):
public var body: some View {
VStack {
MorphingText(
"This is a test",
effect: .burn, // Specify an alternative morphing effect with this line
font: UIFont.systemFont(ofSize: 20),
textColor: .black,
textAlignment: .center
)
.frame(maxWidth: 200, maxHeight: 100)
}
}
Requirements
- Xcode 12+
- iOS 9.0+ (note that SwiftUI requires iOS 13+)
Installation
Swift Package Manager
Simply add this library to your package manifest or follow instructions on adding a package dependency using Xcode here.
.package(
url: "https://github.com/lexrus/LTMorphingLabel.git",
.branch("master")
)
CocoaPods
Add pod 'LTMorphingLabel'
to your Podfile or follow instructions to add dependencies here.
Carthage
Add github "lexrus/LTMorphingLabel"
to your Cartfile or follow instructions on adding frameworks here.
XCFramework
A pre-compiled xcframework
file is available on the Releases page.
Accio
-
Add this library to your package manifest (see Swift Package Manager)
-
Update your target dependencies to include
LTMorphingLabel
:
.target(
name: "App",
dependencies: [
"LTMorphingLabel",
]
),
- Run
accio update
.
Unit Testing
Clone the repo by running git clone https://github.com/lexrus/LTMorphingLabel.git
, then open the project with Xcode and press Cmd + U (or, in the menu bar, click Product > Build for > Testing).
Apps Using LTMorphingLabel
- Idea by Igor Matyushkin
- Speedo[kilo]meter by Alberto Pasca
- Vatomium by Erik Telepovský
- Atmos by @shnhrrsn
- The Met Challenge by @lazerwalker
- Uther by @callmewhy
- Reax by Reax Inc
- Puzzpic by Moath Othman
- Drops by Mark Aron Szulyovszky
- Setgraph Workout Log by Arturo Lee
- Nihon by KyXu
- Lightsync by Marcel Braun
- Find by A. Zheng
Third-Party Ports
Android
The Android port of this library is available here.
React Native
The React Native port of this library is available here.
License
This code is distributed under the terms and conditions of the MIT license.
Top Related Projects
[UNMAINTAINED] An UITextView which grows/shrinks with the text and starts scrolling when the content reaches a certain number of lines. Similar to the one Apple uses in the SMS-app. See blog-post for a small screencast.
A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.
Custom UITextFields effects inspired by Codrops, built using Swift
A drop-in replacement for UILabel, which automatically adds a scrolling marquee effect when the label's text does not fit inside the specified frame
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot