CODEWITHSUNDEEP
objective-canimationfonts
user1309044
user1309044

Reputation: 317

How to implement animations and effects to fonts in iOS

I was wondering if you could help me with an iOS related question.

I am wanting to create an iPhone app which has some neat text effects.

For example, I might have a timer where when the clock reaches 10 seconds, each second then pulses to indicate that time is close to finishing.

Or, another example may be that when a user presses an incorrect button in a game, I have a very quick animation that grows my text so it takes up most of the screen - and then shrinks to nothing (rather than disappear) when I want it to end.

Each of these too I would like to use a font that's not available for selection within Xcode.

So my question is, does anyone know of a decent tutorial place or book that teaches some text effects like these - and how do other apps that use their own fonts and styles to their fonts (i.e. gradient colours etc) actually do this in their app? I was thinking of creating an image of each number and using those images each time I want to display a score or time, but this probably isn't the optimal way.

Any help would be much appreciated,

Thanks a lot,

AC

Upvotes: 1

Views: 3098

Answers (2)

AliSoftware
AliSoftware

Reputation: 32681

No need to use CoreText for any of that (and by the way, CoreText is not so easy to apprehend, believe me I worked a lot with this framework, and in your case there is no need to use such a complex low-level framework whereas you can do everything you want using easier means)

1. Animations

It is really simple to do "pulse" animations using the block-based animation methods of UIView and changing the transformof the label to a CGAffineTransformScale which will animate the scaling from 100% to 130% for example, then back to 100%.

The most simple example to make a label pulse from size 100% to 130% is using the following code:

[UIView animateWithDuration:0.5 animations:^{
   // grow the label up to 130%, using a animation of 1/2s
   myLabel.transform = CGAffineTransformMakeScale(1.3,1.3); 
} completion:^(BOOL finished) {
   // When the "grow" animation is completed, go back to size 100% using another animation of 1/2s
   [UIView animateWithDuration:0.5 animations:^{
        myLabel.transform = CGAffineTransformIdentity;
   }];
}];

Of course this is a simple example and you can customize the animation (add delays, control the animation curve, and so on) using the other more complete [UIView animationWithDuration:…] variants.

You can even use CoreAnimation to build explicit and much more detailed animations, see the Core Animation Cook Book and Core Animation Programming Guide in Apple documentation for more details to build more complex animations; but in your case [UIView animationWithDuration:…] variants should be enough anyway)

2. Custom Fonts

You can easily add custom fonts to your application by simply add the font (TTF file) in your application ressources, and then use the UIAppFonts key in your Info.plist to list these custom fonts. See here in the Info Plist Key Reference for more info.

3. Gradient color on text

You can perform this kind of thing by drawing your text on a mask of an image. Draw your gradient (using CoreGraphics, see Quartz 2D Programming Guide) on an image and use your text as a mask (black portions of the mask being drawn portions and white portions being transparent).

But an even easier way to do this is to have some image in your resources to use as a pattern (an image with some gradient for example), and use the following code to use this gradient color:

yourLabel.textColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourpattern.png"]];

You can even create the gradient UIImage by code (instead of having it in your resources), using CoreGraphics (or a CAGradientLayer or something).

Upvotes: 8

Alex Wayne
Alex Wayne

Reputation: 187024

It sounds like you want some low level drawing code like using Core Text

The Core Text framework is an advanced, low-level technology for laying out text and handling fonts. Designed for high performance and ease of use, the Core Text layout engine is up to twice as fast as ATSUI (Apple Type Services for Unicode Imaging). The Core Text layout API is simple, consistent, and tightly integrated with Core Foundation, Core Graphics, and Cocoa.

Your question is pretty general, so it's hard to give a specific answer, but I would start by reading through that framework documentation.

Also this question may help: https://stackoverflow.com/questions/2763757/core-text-tutorial

Upvotes: 0

Related Questions