使用UILabel实现滚动字幕移动效果

使用UILabel实现滚动字幕移动效果

这个链接中的代码也实现了这种效果

https://github.com/cbpowell/MarqueeLabel

 

最终效果如下:

原理如下:

1. 获取文本

2. 计算文本宽度

3. 将这个Label放入ScrollView中

4. 将ScrollView的contentSize的宽度设置与文本宽度一致

5. 做动画

*6. 边缘的渐隐效果请使用带透明像素的PNG图片

//
//  RootViewController.m
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "YXKit.h"
#import "FontPool.h"

@interface RootViewController ()

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];

    // 注册字体
    REGISTER_FONT(bundleFont(@"新蒂小丸子体.ttf"), @"新蒂小丸子体");
    
    // 获取文本
    NSString *string = @"  喜欢这首情思幽幽的曲子，仿佛多么遥远，在感叹着前世的情缘，又是那么柔软，在祈愿着来世的缠绵。《莲的心事》，你似琉璃一样的晶莹，柔柔地拨动我多情的心弦。我，莲的心事，有谁知？我，莲的矜持，又有谁懂？  ";
    
    // 初始化label
    UILabel *label      = [UILabel new];
    label.text          = string;
    label.numberOfLines = 0;
    label.textColor     = [UIColor cyanColor];
    label.font          = [UIFont fontWithName:CUSTOM_FONT(@"新蒂小丸子体", 0)
                                          size:20.f];
    
    // 计算尺寸
    CGSize size         = [label boundingRectWithSize:CGSizeMake(0, 0)];
    label.frame         = (CGRect){CGPointZero, size};

    // 初始化ScrollView
    UIScrollView *showView = \
        [[UIScrollView alloc] initWithFrame:CGRectMake(0, 90, 320, size.height)];
    showView.contentSize   = size;
    showView.showsHorizontalScrollIndicator = NO;
    [showView addSubview:label];
    [self.view addSubview:showView];
    
    // 形成边缘的遮罩
    UIImageView *imageView = \
    [[UIImageView alloc] initWithFrame:CGRectMake(0, 90, 320, size.height)];
    imageView.image = [UIImage imageNamed:@"bg"];
    [self.view addSubview:imageView];
    
    // 动画
    [UIView animateKeyframesWithDuration:10
                                   delay:7
                                 options:UIViewKeyframeAnimationOptionAllowUserInteraction
                              animations:^{
                                  // 计算移动的距离
                                  CGPoint point = showView.contentOffset;
                                  point.x = size.width - 320.f;
                                  showView.contentOffset = point;
                              }
                              completion:^(BOOL finished) {
                                  
                              }];
}

@end