There are four forms of rolling subtitles. Let's look at the first one first
Horizontal continuous scrolling Subtitles: at first glance, a group of views are scrolled in the scrollview, but how to realize circular scrolling? The idea is as follows: 1. There are five groups of text added to the scrolling subtitles. When scrolling to the last group, it should be followed by the first group of text, so as to realize continuous scrolling. 2: we can double the number of incoming text, To realize that the last group of text is followed by the first group of text (if the data is too small, it can be doubled by 4 or 6 times, in short, it is better to double, otherwise the x-axis coordinate processing will be a little troublesome) 3: we can let the scroll box reset the coordinates of the scroll box after the last text scrolls and disappears, and so on, we can realize the wireless loop
Part of the code added to the UI will not be pasted. You can download the demo yourself if you need it
//When the maximum scrolling range is obtained, the scrolling event can be started
-(void)setScrMaxW:(NSInteger)scrMaxW{
_scrMaxW=scrMaxW;
self.textScrollview.contentSize=CGSizeMake(scrMaxW, 0);
[self addTimer];
}- (void)timerClick
{
self.scrX=self.scrX+1;
[UIView animateWithDuration:0.1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
[self.textScrollview setContentOffset:CGPointMake(self.scrX, 0) animated:NO];
} completion:nil];
//Reset when scrolling to half of the scrollable area
if (self.textScrollview.contentOffset.x+1>=self.textScrollview.contentSize.width/2) {
self.scrX=0;
[self.textScrollview setContentOffset:CGPointMake(self.scrX, 0) animated:NO];
}else{
}
}Horizontal flipping and scrolling Subtitles: This is simpler. Only one label is needed. As long as the label display text is constantly changed during the scrolling process. 1: calculate the width of the text to be loaded in real time, add the screen width * 2, and put the label in the middle. 2: update the display text and scrolling area every time the label disappears. 3: after the last text is displayed, The next text will show the first text implementation loop
Key codes:
-(void)setTextArr:(NSMutableArray *)textArr{
_textArr=textArr;
self.txtLabel.text=textArr[0];
self.scrollWidth=[self getTxtWidth:textArr[0]];
// The subtitles of the initial display can be adjusted according to the needs, placed on the far left or on the right side of the screen by default
[self.textScrollview setContentOffset:CGPointMake(ViewAllWidth, 0) animated:NO];
// Initial display text subscript
self.arrNum=0;
[self addTimer];
}- (void)timerClick
{
self.scrX=self.scrX+1;
[UIView animateWithDuration:0.1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
[self.textScrollview setContentOffset:CGPointMake(self.scrX, 0) animated:NO];
} completion:nil];
if (self.textScrollview.contentOffset.x>=self.textScrollview.contentSize.width-ViewAllWidth) {
[self refreshTxt];
}else{
}
}
-(void)refreshTxt{
if (self.arrNum==self.textArr.count-1) {
self.arrNum=0;
}else{
self.arrNum=self.arrNum+1;
}
self.txtLabel.text=self.textArr[self.arrNum];
self.scrollWidth=[self getTxtWidth:self.textArr[self.arrNum]];
self.scrX=0;
[self.textScrollview setContentOffset:CGPointMake(self.scrX, 0) animated:NO];
}
-(void)setScrollWidth:(CGFloat)scrollWidth{
_scrollWidth=scrollWidth;
self.textScrollview.contentSize=CGSizeMake(scrollWidth+ViewAllWidth*2, 0);
}Vertical multi line page turning and circular scrolling: are you a little familiar with this animation? In "spell sunset", there is such a UI on the spell single page. For example, the fifth text is followed by the first text and scrolls circularly. In fact, the idea is the same as that of the first horizontal scrolling. The same data is doubled and reset after scrolling. In this way, the cycle can be realized. However, I replaced tableview for implementation, and did not add UI key code with array:
-(void)setSxArry:(NSMutableArray *)sxArry{
_sxArry=sxArry;
//Double the amount of text to display
[_sxArry addObjectsFromArray:[NSArray arrayWithArray:sxArry]];
}-(void)scrollTableveiwcell{
__weak typeof(self) weakSelf=self;
// After the whole scroll, return to the initial state
if (self.scrollSection==self.sxArry.count/2) {
self.scrollSection=0;
[self.fightTableView setContentOffset:CGPointMake(0, 0) animated:NO];
}else{
}
[UIView transitionWithView: self.fightTableView duration:0.3 options: UIViewAnimationOptionTransitionNone animations: ^{
[weakSelf.fightTableView setContentOffset:CGPointMake(0, weakSelf.fightTableView.contentOffset.y+cellHeight) animated:YES];
} completion: ^(BOOL finished) {
weakSelf.scrollSection=weakSelf.scrollSection+1;
}];
}Vertical flipping and scrolling Subtitles: there are many implementation schemes for the final scrolling subtitles. Like the idea of horizontal flipping above, you can also add up and down label s to display the text circularly. However, it can be implemented here without NSTimer
-(void)checkDataIndex{
if (self.arrNum==self.sxArry.count-1) {
self.arrNum=0;
}else{
self.arrNum=self.arrNum+1;
}
}
- (void)scrollTxtAction {
[UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
CATransition *transition = [CATransition animation];
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromTop;
transition.delegate = self;
[self.txtLabel.layer addAnimation:transition forKey:nil];
[self checkDataIndex];
} completion:^(BOOL finished) {
self.txtLabel.text=self.sxArry[self.arrNum];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self scrollTxtAction];
});
}];
}Finally, we need to deal with the problem of rolling area
//Cut off the excess part of the display area, otherwise it will run outside the area when the animation scrolls
self.verBgView.layer.masksToBounds=YES;