Convert Figma logo to code with AI

lexrus logoLTMorphingLabel

[EXPERIMENTAL] Graceful morphing effects for UILabel written in Swift.

8,049
781
8,049
25

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:

  1. Basic Usage:
let label = LTMorphingLabel(frame: view.bounds)
label.text = "Hello, World!"
label.morphingEffect = .scale
view.addSubview(label)
  1. 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)
  1. 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"
}
  1. 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:

  1. 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.

  2. Import the LTMorphingLabel module in your Swift file:

import LTMorphingLabel
  1. 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)
  1. 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

LTMorphingLabel

Travis Language CocoaPods Carthage compatible Accio supported License

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

.scale (default)

LTMorphingLabel

.evaporate

LTMorphingLabel-Evaporate

.fall

LTMorphingLabel-Fall

.pixelate

LTMorphingLabel-Pixelate

.sparkle

LTMorphingLabel-Sparkle

.sparkle is built on top of QuartzCore.CAEmitterLayer. There is also a SpriteKit-powered version here.

.burn

LTMorphingLabel-Burn

.anvil

LTMorphingLabel-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"

UIKitExample1

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

UIKitExample2

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)
    }
}

LTMorphingLabelSwiftUI

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

  1. Add this library to your package manifest (see Swift Package Manager)

  2. Update your target dependencies to include LTMorphingLabel:

.target(
    name: "App",
    dependencies: [
        "LTMorphingLabel",
    ]
),
  1. 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

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.