NumberMorphView a view like label for displaying numbers which animate with transition using a technique called number tweening or number morphing.

Related tags

Label NumberMorphView
Overview

NumberMorphView

Build Status Version License Platform

NumberMorphView a view like label for displaying numbers which animate with transition using a technique called number tweening or number morphing.

alt text

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Interface builder

  1. Drag a UIView into your view controller.
  2. Change the class to NumberMorphView in the identity inspector.
  3. Change intrinsic size from default to placeholder in the size inspector.
  4. Create an IBOutlet in your view controller.

Set the digit of number view as shown below:

numberView.currentDigit = 5;

Animate to nextDigit as shown below.

numberView.nextDigit = 8;

From code

NumberMorphView can be used with or without auto layout. Usage of intrinsic content size is recommended. Preferred aspect ratio of the view is 13 : 24.

let numberView = NumberMorphView();
numberView.fontSize = 64;
numberView.currentDigit = 5;
let preferedSize = numberView.intrinsicContentSize();
numberView.frame = CGRect(x: 10, y: 10, width: preferedSize.width, height: preferedSize.height);
self.view.addSubview(numberView);

dispatch_after(5, dispatch_get_main_queue()) {
    numberView.nextDigit = 7;
}

Note: Intrinsic content size is changed after setting fontSize.

Customizing animations

  • To set the animation duration:
numberView.animationDuration = 4;
  • To change the type of animation, set the interpolator.
numberView.interpolator = NumberMorphView.SpringInterpolator();

Already available interpolators are LinearInterpolator, OvershootInterpolator, SpringInterpolator, BounceInterpolator, AnticipateOvershootInterpolator, and CubicHermiteInterpolator. Also you can add new interpolators. The interpolator class needs to conform to InterpolatorProtocol as shown below:

class MyLinearInterpolator: InterpolatorProtocol {
    func getInterpolation(x: CGFloat) -> CGFloat {
        return x;
    }
}

Requirements

  • iOS 8.0+
  • Swift 2.2

Installation

NumberMorphView is available through CocoaPods. To install it, simply add the following line to your Podfile:

use_frameworks!
pod 'NumberMorphView', '0.2.0'

Author

Abhinav Chauhan

License

NumberMorphView is available under the MIT license. See the LICENSE file for more info.

Comments
  • Implement sizeThatFits

    Implement sizeThatFits

    The Readme says: "Preferred aspect ratio of the view is 13 : 24"

    Instead of handing over the task of making sure the aspect ratio is always (which most people will probably fail), it would be much easier to implement the siteThatFits: method and return a correct size for the view.

    It would be awesome if you could implement this! I would do it myself, it should just be a few lines, but I'm too busy :S (bad excuse).

    opened by JonasGessner 4
  • Ticker Animation?

    Ticker Animation?

    Thank you for building this!!

    Would be really awesome to see some sort of ticker animation? Like what Robinhood has. I could see that being used by a lot of people :)

    opened by AndrewSB 2
  • Pod not getting from Swift 3 code

    Pod not getting from Swift 3 code

    Hi There,

    Apparently even after the latest PR to include support for swift 3, the podspec still grabbing the code from the 0.1.1 tag, which has not been updated with this new code.

    So using Cocoapods still get the code for Swift 2.2.

    I think you need to get a new tag in place and update the spec, or just make the spec point to master, since Dev is not in sync with it as well.

    Thanks!

    opened by gmogames 1
  • swift 5 support

    swift 5 support

    i am using NumberMorphView in my swift 5 and xcode 12.2 project but after giving class name to view , view object is not recognizing view.currentDigit...... please help me as soon as possible

    opened by Fareeha-Naz 0
  • Index out of range

    Index out of range

    Hi, I couldn't use this library, I get index out of range in

    func updateAnimationFrame() Sometimes at pNext and sometimes at pCur

    let pCur = endpoints_scaled[_currentDigit]; let pNext = endpoints_scaled[_nextDigit];

    I am using Swift 4 with Xcode 9.2

    opened by raheelsadiq 2
Owner
Abhinav Chauhan
Software development engineer @ Microsoft
Abhinav Chauhan
GitHub
Animate numeric value while setting new value to label

NumericAnimatedLabel Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installati

Javal Nanda 28 Oct 11, 2021
Animated Mask Label is a nice gradient animated label.

Animated Mask Label Demo Screen Screenshot Demo/Example For demo: $ pod try AnimatedMaskLabel To run the example project, clone the repo, and run pod

Jogendra 19 Dec 13, 2022
OdometerLabel - SwiftUI number label with odometer animation

Пример Simulator.Screen.Recording.-.L.iPhone.12.-.2022-01-30.at.16.26.53.mp4

Misnikov Roman 2 Jun 13, 2022
Simple countdown UILabel with morphing animation, and some useful function.

CountdownLabel Simple countdown UILabel with morphing animation, and some useful function. features Simple creation Easily get status of countdown fro

keishi suzuki 903 Dec 29, 2022
A morphing UILabel subclass written in Swift.

LTMorphingLabel A morphing UILabel subclass written in Swift. The .Scale effect mimicked Apple's QuickType animation of iOS 8 of WWDC 2014. New morphi

Lex Tang 7.9k Jan 4, 2023
A triangle shaped corner label view for iOS written in Swift.

A triangle shaped corner label view for iOS written in Swift. This view is a subclass of UIView. It can be created and customized from the Storyboard

Mukesh Thawani 167 Nov 30, 2022
A faster and more flexible label view for iOS

STULabel is an open source iOS framework for Swift and Objective-C that provides a label view (STULabel), a label layer (STULabelLayer) and a flexible

Stephan Tolksdorf 96 Dec 22, 2022
Custom Label to apply animations on whole text or letters.

Ophiuchus Custom Label to apply animations on whole text or letters. Check an article on our blog Inspired by this project on Dribble Installation Coc

Yalantis 885 Dec 2, 2022
UILabel subclass, which additionally allows shadow blur, inner shadow, stroke text and fill gradient.

THLabel THLabel is a subclass of UILabel, which additionally allows shadow blur, inner shadow, stroke text and fill gradient. Requirements iOS 4.0 or

Tobias Hagemann 654 Nov 27, 2022
A handy class for iOS to use UILabel as a countdown timer or stopwatch just like in Apple Clock App.

MZTimerLabel Purpose MZTimerLabel is a UILabel subclass, which is a handy way to use UILabel as a countdown timer or stopwatch just like that in Apple

Mines Chan 1.6k Dec 14, 2022
Secret app like text animation

RQShineLabel A UILabel subclass that lets you animate text similar to Secret app. Installation CocoaPods RQShineLabel is available through CocoaPods,

gk 2k Dec 6, 2022
Numbers animation allows you to click on different numbers and accordingly it will animate numbers in a cool way. It has a very attractive UI and is very easy to use.

Numbers Animation Cool Numbers Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022
An animated label for displaying numbers

RollingDigitsLabel A simple label that animates a number with each digit falling into place. Installation Swift Package Manager dependencies: [ .p

Nathan Chiu 6 Dec 31, 2022
Configurable morphing transitions between text values of a label.

TOMSMorphingLabel Configurable morphing transitions between text values of a label. Triggering the animation is as easy as setting the labels text pro

Tom König 1.9k Nov 20, 2022
Reading animation allows you to click on the different page numbers and accordingly it will animate page changes in a cool way. It has a very attractive UI and is very easy to use.

Reading Animation Cool Reading Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 42 Oct 4, 2022
TextFieldFormatter - Simple Text Formatter (Credit Card Number, Phone Number, Serial Number etc.)

TextFieldFormatter Simple Text Formatter (Credit Card Number, Phone Number, Seri

Anıl ORUÇ 4 Apr 4, 2022
Animate numeric value while setting new value to label

NumericAnimatedLabel Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installati

Javal Nanda 28 Oct 11, 2021
Pomodoro is a macOS status bar application written in SwiftUI, which allows you to control your work and break time, exploiting the pomodoro-technique.

Pomodoro Pomodoro is a macOS status bar application which allows you to control your work and break time. Through this application you will be able to

Cristian Turetta 7 Dec 28, 2022
Animated Mask Label is a nice gradient animated label.

Animated Mask Label Demo Screen Screenshot Demo/Example For demo: $ pod try AnimatedMaskLabel To run the example project, clone the repo, and run pod

Jogendra 19 Dec 13, 2022
Ubergang is a tweening engine for iOS written in Swift.

Ubergang is a tweening engine for iOS written in Swift. Features Tween numeric values, UIColors and CGAffineTransforms Tween along UIBezierPaths Tween

Robin Falko 54 Apr 15, 2022