[翻译] BBCyclingLabel

BBCyclingLabel

BBCyclingLabel is just like a UILabel but allows you to perform custom animations when changing text.

Instead of using two UILabel's and cross fading them, you can use this component and configure it to crossfade; it'll then take care of performing the cross fade for you.

Here's a demo video of this component running on the demo project BBCyclingLabelDemo.

BBCyclingLabel很像一个UILabel，但是允许你在修改文本的时候执行动画切换效果。

你不需要用两个label叠加隐藏的方式来实现变色动画，使用这个组件就行了，改变文本就会触发动画，就是这么简单。

 

How it works

Under the hood, BBCyclingLabel simply animates transitions between two UILabels, which are always cycled when changing text.

BBCyclingLabel简单的使用了两个label的转场动画，在你改变文本的时候就能触发动画效果。

 

How to use it

CGRect labelFrame = ...;

BBCyclingLabel* label = [[BBCyclingLabel alloc] initWithFrame:labelFrame];
label.transitionEffect = BBCyclingLabelTransitionEffectCrossFade;
label.transitionDuration = 0.3;
// Initial text doesn't need to be animated so we explicitly call a method to bypass it
[label setText:@"Initial text" animated:NO];

// ...

// Using the property 'text', the component will always animate
label.text = @"This will cross fade with initial text"

 

Component properties

Apart from all the properties present in a UILabel, BBCyclingLabel has four more properties:

除了UILabel的一些属性外，BBCyclingLabel额外提供了4个属性：

BBCyclingLabelTransitionEffect   transitionEffect;
NSTimeInterval                   transitionDuration;
BBCyclingLabelPreTransitionBlock preTransitionBlock;
BBCyclingLabelTransitionBlock    transitionBlock;

• transitionEffect: A value of the enum BBCyclingLabelTransitionEffect that determines which animation effect will be used to cycle text. 转场效果
• transitionDuration: Duration, in milliseconds, for the transition animation; 转场时间
• preTransitionBlock and transitionBlock: Blocks to be executed before and during the transition -- should only be manually set when performing custom effects. 转场动画的block

 

Effects 

This component supports the following simple effects:

这个组件支持以下多种简单的效果：

• Fade in (BBCyclingLabelTransitionEffectFadeIn)
• Fade out (BBCyclingLabelTransitionEffectFadeOut)
• Zoom in (increase scale, BBCyclingLabelTransitionEffectZoomIn)
• Zoom out (reduce scale, BBCyclingLabelTransitionEffectZoomOut)
• Scroll up (BBCyclingLabelTransitionEffectScrollUp)
• Scroll down (BBCyclingLabelTransitionEffectScrollDown)

It also offers the following composite effects (combinations of the above):

他也提供一下的一些混合的效果（上面效果的组合）：

• Cross fade (fade out + fade in, BBCyclingLabelTransitionEffectCrossFade)
• Scaled fade out (fade out + fade in + zoom out, BBCyclingLabelTransitionEffectScaleFadeOut)
• Scaled fade in (fade out + fade in + zoom in, BBCyclingLabelTransitionEffectScaleFadeIn)

Predefined effects can be combined using the logic OR operator. If you want to make the current text fade out while scrolling both current and new up, you can do this by combining the fade out and scroll up effects:

预定义效果可以通过或操作来实现。

BBCyclingLabelTransitionEffect effect = BBCyclingLabelTransitionEffectFadeOut |
                                        BBCyclingLabelTransitionEffectScrollUp;

If you want to perform a cross fade with a scroll up, you can either do it in one of the following two ways:

如果你想执行交叉渐变上滑效果，你可以通过以下两种方式来实现：

BBCyclingLabelTransitionEffect effect = BBCyclingLabelTransitionEffectFadeOut |
                                        BBCyclingLabelTransitionEffectFadeIn |
                                        BBCyclingLabelTransitionEffectScrollUp;

BBCyclingLabelTransitionEffect effect = BBCyclingLabelTransitionEffectCrossFade |
                                        BBCyclingLabelTransitionEffectScrollUp;

 

Customizable effects

If the predefined effects are not enough, you can get your hands dirty and roll in your own custom transitions. To do that, you need to set the transitionEffect property toBBCyclingLabelTransitionEffectCustom and assign blocks to preTransitionBlock andt ransitionBlock.

如果预定义效果满足不了你的需求，你可以装逼自己来，你需要给toBBCyclingLabelTransitionEffectCustom赋值并给preTransitionBlock与ransitionBlock赋值。

The preTransitionBlock block has the following signature:

preTransitionBlock这个block有着如下的内容：

^(UILabel* labelToEnter)

This block is called right before the transition begins so you can prepare the new label (the label that's about to replace the current text) to enter. This is where you should reset the state of the entering label.

在转场动画开始的时候，这个block就会被调用，这时候你需要重设他：

The transitionBlock block has the following signature:

^(UILabel* labelToExit, UILabel* labelToEnter)

This block will be called with both labels, the one that's about to be replaced and the one with the new text. This is where you perform the transition itself. Hide, rotate, fade, scale, etc, this is where you go wild on the effects; just make sure you leave things in a usable state.

这个block会被两个label分开调用。

Here's a silly example that performs a 180º rotation + scale down to 0.2 on the exiting label and simply fades in the entering label:

// Never forget to set this to custom
_customLabel.transitionEffect = BBCyclingLabelTransitionEffectCustom;
_customLabel.preTransitionBlock = ^(UILabel* labelToEnter) {
    // Reset the label to enter; make sure it's at alpha 0 and has no transforms applied to it
    labelToEnter.transform = CGAffineTransformIdentity;
    labelToEnter.alpha = 0;
};
_customLabel.transitionBlock = ^(UILabel* labelToExit, UILabel* labelToEnter) {
    // Fade the exiting label out...
    labelToExit.alpha = 0;
    // ... and apply a rotation + scale transform
    CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI);
    labelToExit.transform = CGAffineTransformScale(transform, 0.2, 0.2);
    // Fade the entering label in
    labelToEnter.alpha = 1;
};