iOS 字体滚动效果 ScrollLabel

写了一个简单的字体滚动效果。

用了一种取巧的方式,传入两个一摸一样的Label(当然也可以是别的视图), 话不多说,代码里面讲解。

SEScrollLabel.h

#import <UIKit/UIKit.h>

/*! @brief 回调代码块

*

* 当滚动效果持续loopsDone次之后,isFinished值会变为YES,执行代码块

* @param loopsDone 滚动效果执行次数

* @param isFinished 是否已经结束

*/

typedef void (^PMAnimationFinished)(NSUInteger loopsDone, BOOL isFinished);

enum {

PMScrollDirectionFromLeft                   = 0,    // Animation starts from left and continues to the right side

PMScrollDirectionFromRight                  = 1     // Animation starts from right and continues back to the left side

}; typedef NSUInteger PMScrollDirection;

@interface SEScrollLabel : UIScrollView

/*!

*

* @param frame 滚动视图的frame

* @param labels 存放UILabel数组,这个demo目前最多支持两个

* @param scrollDirection 滚动方向

* @param scrollSpeed 滚动速度,单位是 CGFloat/s

* @param loops 滚动执行次数

* @param completition 执行结束调用方法

* @return 返回SEScrollLabel对象

*/

-(instancetype)initWithFrame:(CGRect) frame labels:(NSArray *)labels

direction:(PMScrollDirection) scrollDirection

speed:(CGFloat) scrollSpeed

loops:(NSUInteger) loops

completition:(PMAnimationFinished) completition;

-(void)setText:(NSString *)text;

- (void) beginAnimation;

-(void)resetAnimation;

@end

SEScrollLabel.m

#import "SEScrollLabel.h"

#define LABEL_SPACING 30   //定义了字体滚动的间隙

@interface SEScrollLabel()

@property (nonatomic, assign) BOOL needAnimating; //是否需要滚动,label长度大于scrollLabel长度,设为YES,否则为NO

@property (nonatomic, assign) BOOL isAnimating;      //是否正在滚动

@property (nonatomic, assign) CGFloat scrollSpeed;   //滚动速度

@property (nonatomic, assign) NSInteger numberOfLoops; //滚动循环次数

@property (nonatomic, assign) NSInteger runningLoops;   //当前已经执行过的滚动次数

@property (nonatomic, assign) PMScrollDirection scrollDirection;  //滚动方向

@property (nonatomic, strong) PMAnimationFinished finishedBlock; //回调代码块

@end

@implementation SEScrollLabel

-(instancetype)initWithFrame:(CGRect) frame labels:(NSArray *)labels

direction:(PMScrollDirection) scrollDirection

speed:(CGFloat) scrollSpeed

loops:(NSUInteger) loops

completition:(PMAnimationFinished) completition

{

self = [super initWithFrame:frame];

if (self != nil)

{

UILabel *label = [labels firstObject];

CGRect labelFrame = label.frame;

if (label.frame.size.width <= frame.size.width) //如果第一个label宽度小于视图宽度,则判断不需要滚动显示

{

self.contentSize = CGSizeMake(labelFrame.size.width , labelFrame.size.height);

labelFrame.origin.x = frame.size.width - labelFrame.size.width;

labelFrame.origin.y = 0;

label.frame = labelFrame;

[self addSubview:label];

_needAnimating = NO;

}

else

{

self.contentSize = CGSizeMake(labelFrame.size.width *2 + LABEL_SPACING *2 , labelFrame.size.height);

labelFrame.origin.x = 0;

labelFrame.origin.y = 0;

label.frame = labelFrame;

[self addSubview:label];

if (scrollDirection == PMScrollDirectionFromRight)

{

labelFrame.origin.x += LABEL_SPACING + labelFrame.size.width;

}

else if (scrollDirection == PMScrollDirectionFromLeft)

{

labelFrame.origin.x -= LABEL_SPACING + labelFrame.size.width;

}

UILabel *sameLabel = [labels lastObject];

sameLabel.frame = labelFrame;

[self addSubview:sameLabel];

self.scrollDirection = scrollDirection;

self.scrollSpeed = scrollSpeed;

self.numberOfLoops = loops;

self.finishedBlock = completition;

self.needAnimating = YES;

}

}

return self;

}

- (void) beginAnimation

{

  //所做的动画非常简单,就是让scrollView的conentOffset从0开始到contentSize.width/2的距离内不断循环,这里需要注意contentSize是怎么设置才能达到想要的效果

if (!self.needAnimating) return;

if (self.isAnimating) return;

[self setContentOffset:CGPointZero];

self.isAnimating = YES;

NSTimeInterval animationDuration = (self.contentSize.width/self.scrollSpeed);

[UIView animateWithDuration:animationDuration

delay:0

options:UIViewAnimationOptionCurveLinear

animations:^{

CGPoint finalPoint = CGPointZero;

if (self.scrollDirection == PMScrollDirectionFromRight)

finalPoint = CGPointMake(self.contentSize.width/2, 0);

else if (self.scrollDirection == PMScrollDirectionFromLeft)

finalPoint = CGPointMake(-self.contentSize.width/2, 0);

self.contentOffset = finalPoint;

} completion:^(BOOL finished) {

if (finished) {

self.isAnimating = NO;

BOOL restartAnimation = (self.numberOfLoops == 0 || self.runningLoops <= self.numberOfLoops);

if (self.finishedBlock)

{

self.finishedBlock((self.runningLoops+1),!restartAnimation);

}

if (restartAnimation)

[self beginAnimation];

else

[self endAnimation:NO];

self.runningLoops++;

}

}];

}

-(void)resetAnimation

{

//重置循环,将计数变为0,然后重新开始滚动

self.isAnimating = NO;

self.runningLoops = 0;

[self beginAnimation];

}

- (void) endAnimation:(BOOL) animated {

if (!self.isAnimating) return;

self.isAnimating = NO;

[self setContentOffset:CGPointZero animated:NO];

}

-(void)setText:(NSString *)text

{

//改变文字,这里我偷了个懒,没有重新去修改contentSize和label的frame, 所以运行效果可能有些问题,根据自己想要的效果进行修改吧

for (UIView *view in self.subviews)

{

if ([view isKindOfClass:[UILabel class]])

{

[(UILabel *)view setText:text];

}

}

}

@end

用法实例:

SEScrollLabel *scrollLabel = [[SEScrollLabel alloc] initWithFrame:CGRectMake(0, 0, 80, 30) labels:@[label, sameLabel] direction:PMScrollDirectionFromRight speed:15 loops:3 completition:^(NSUInteger loopsDone, BOOL isFinished) {

NSLog(@"已经运行了%ld次,循环%@结束", (unsigned long)loopsDone, isFinished ? @"已经": @"尚未");

}];

[self.view addSubview:scrollLabel];

[scrollLabel beginAnimation];

附上效果图一枚:

具体源码请访问 http://www.cnblogs.com/sely-ios/p/4552134.html

时间: 2024-10-10 00:27:08

iOS 字体滚动效果 ScrollLabel的相关文章

iOS文字滚动效果 之纵向滚动

原文链接: iOS文字滚动效果 之纵向滚动 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158

iOS文字滚动效果 之横向滚动

原文链接: iOS文字滚动效果 之横向滚动 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158

ios:仿照安卓小米商城head左右滚动效果(多屏滚动)

1.之前做的应用需要这个效果但是当时用的比较复杂(绘图)的方法来实现,现在想到了一个新的方法. 2.用到了http://www.cnblogs.com/yoon/p/3616503.html 里面的小技巧 3.思路: 主要是在新的scrollview中重写Layoutsubviews 代码如下: - (void)layoutSubviews { [super layoutSubviews]; for (UIView *view in self.subviews) { if (view.tag =

IOS中文字体斜体效果

/* 该代码用于解决在IOS开发,中文字体不能使用斜体的问题 对该控件进行旋转,因此如果控件有背景颜色/图片,也会跟着旋转 可将该控件设置背景透明,于Label下方再建一个有背景颜色的Frame相同的Label */ UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 200, 40)]; lbl.backgroundColor = [UIColor clearColor]; lbl.text = @"中文斜体&q

IOS UIScrollView + UIButton 实现页面和顶部标签页水平滚动效果

很长一段时间没有写博客了,最近在学习iOS开发,看了不少的代码,自己用UIScrollView和UIButton实现了水平滚动的效果,有点类似于今日头条的主界面框架,效果如下: 代码如下: MyScrollView.h #import <UIKit/UIKit.h> #import "MySegementView.h" @interface MyScrollView : UIView<UIScrollViewDelegate> - (instancetype)

iOS UIWebView 获取内容实际高度,关闭滚动效果

iOS UIWebView 获取内容实际高度,关闭滚动效果 近期做东西,将 UIWebView 嵌套在 UIScrollView 里,由 UISCrollView 控制滚动,需要使 UIWebView 的高度同内容高度一致,网上搜索的到代码: htmlHeight = [webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"]; 这段代码是无效的,body 获取到的 offsetHeigh

[Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果

景深视差经常被应用在游戏项目中. 本文将演示创建一个简单的景深视差滚动效果 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Presentation' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击

[Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

景深视差经常被应用在游戏项目中. 本文将演示创建更美观的景深视差滚动效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Presentation' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击

全屏滚动效果H5FullscreenPage.js

前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto.js 功能清单: 1 快速实现页面全屏滚动效果.并提供多种翻页效果,兼容大部分ios和android系统. 2 支持在页面中添加多种动画元素效果 来实现淡入,滑入等效果. 3 支持配置音乐功能. 4 支持摇一摇接口功能. 组件核心代码原理: 1 页面滚动 在移动页面上如果想使用滚动,如过没有任何动画