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

Last update: Jun 11, 2022

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.

GitHub

https://github.com/me-abhinav/NumberMorphView
Comments
  • 1. 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).

    Reviewed by JonasGessner at 2016-04-06 13:17
  • 2. 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 :)

    Reviewed by AndrewSB at 2016-04-09 02:52
  • 3. 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!

    Reviewed by gmogames at 2017-05-26 23:22
  • 4. 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

    Reviewed by Fareeha-Naz at 2021-06-23 05:57
  • 5. 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

    Reviewed by raheelsadiq at 2017-12-29 10:33
Animate numeric value while setting new value to label
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

Oct 11, 2021
Animated Mask Label is a nice gradient animated label.
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

May 14, 2022
Simple countdown UILabel with morphing animation, and some useful function.
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

Jun 24, 2022
A morphing UILabel subclass written in Swift.
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

Jun 19, 2022
OdometerLabel - SwiftUI number label with odometer animation

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

Jun 13, 2022
A triangle shaped corner label view for iOS written in Swift.
 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

Jun 18, 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

May 30, 2022
Custom Label to apply animations on whole text or letters.
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

May 27, 2022
UILabel subclass, which additionally allows shadow blur, inner shadow, stroke text and fill gradient.
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

Apr 1, 2022
A handy class for iOS to use UILabel as a countdown timer or stopwatch just like in Apple Clock App.
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

Jun 20, 2022
Secret app like text animation
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,

Jun 23, 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 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

Jan 21, 2022
An animated label for displaying numbers
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

May 30, 2022
Configurable morphing transitions between text values of a label.
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

Mar 19, 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 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

Jan 27, 2022
Animate numeric value while setting new value to label
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

Oct 11, 2021
TextFieldFormatter - Simple Text Formatter (Credit Card Number, Phone Number, Serial Number etc.)
TextFieldFormatter - Simple Text Formatter (Credit Card Number, Phone Number, Serial Number etc.)

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

Apr 4, 2022
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 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

May 9, 2022
Custom-Transition - A repo about custom transition between two view controllers

Custom-Transition in SWIFT This is a repo about custom transition between two vi

Jan 6, 2022
Ubergang is a tweening engine for iOS written in Swift.
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

Apr 15, 2022