Git Product home page Git Product logo

tomsmorphinglabel's Introduction

TOMSMorphingLabel

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

Demo

Screen1

Installation with CocoaPods

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

Podfile

platform :ios, '7.0'
pod "TOMSMorphingLabel", "~> 0.5"

Usage

Instantiate TOMSMorphingLabel as you would do with an UILabel results in a fully working thus morphing label.

TOMSMorphingLabel *label = [[TOMSMorphingLabel alloc] initWithFrame:CGRectMake(0, 42, self.view.frame.size.width, 42)];
[self.view addSubview:label];

Setting - and particularly changing - the labels text property will automatically morph the labels previous text to the new value.

label.text = @"Swift";

Setting the labels text property using setText:withCompletionBlock will morph the labels as well as triggering the completion block when the animation is finished.

[label setText:@"Swift" withCompletionBlock:^{
  NSLog(@"label.text is now 'Swift'");
}];

Note that the label will execute only one morph transition at a time. If the text value of the label changes during a transition - even if it changes multiple times - the label will invoke a transition to the youngest text value that was set.

Customization

TOMSMorphingLabel provides the possibility to configure the morphing transitions look and feel. The configurable properties are defined as follows:

configurable properties
animationDuration: CGFloat Time that elapses between the setting of a new text value and the end of the morphing transition. Default: 0.37
characterAnimationOffset: CGFloat Spatial propagation speed of the character shrink and alpha effect. Default: 0.25
characterShrinkFactor: CGFloat Factor that the scale of a completely disappeared character is divided by. Default: 4
morphingEnabled: BOOL Defines whether the morphing transition between text values is enabled. Default: YES

Changelog

0.5.1

  • made custom configurable properties accessible by Interface Builder

0.5.0

  • broke a strong reference cycle between CADisplayLink and TOMSMorphingLabel
  • added invokation of the completion block when setting text without animations
  • respect the global [UIView areAnimationsEnabled] state

0.2.5

  • fixed a textColor glitch
  • introduced setText:withCompletionBlock:

0.2.3

  • fixed a bug that caused a crash when setting text to nil

0.2.2

  • added property to disable morphing

0.2.1

  • added support for iOS6

0.2.0

  • added unicode support

0.1.0

  • initial version

Contribution & Contributors

I'd love to see your ideas for improving this library! The best way to contribute is by submitting a pull request or a new Github issue. :octocat:

  • @andrebraga added support for iOS6 in version 0.2.1
  • @stepanhruda added property to disable morphing in version 0.2.2
  • @itouch2 fixed a bug that caused a crash when setting text to nil in version 0.2.3
  • @waynehartman fixed text color-change glitch in version 0.2.5
  • @cyril94440 added setText:withCompletionBlock: in version 0.2.5
  • @wanderwaltz broke a strong reference cycle between CADisplayLink and TOMSMorphingLabel in version 0.5.0
  • @wanderwaltz added invokation of the completion block when setting text without animations in version 0.5.0
  • @wanderwaltz made TOMSMorphingLabel respect the global [UIView areAnimationsEnabled] state in version 0.5.0
  • @fcanas made custom configurable properties accessible by Interface Builder

Author

Tom König @TomKnig

License

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

tomsmorphinglabel's People

Contributors

andrebraga avatar cyril94440 avatar fcanas avatar itouch2 avatar orthographic-pedant avatar stepanhruda avatar tomknig avatar wanderwaltz avatar waynehartman avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.