IOS to achieve scrolling subtitles animation effects _ios

Effect chart

Start on Code

The principle of scrolling caption is to use timer timer interval a certain time to drive scrollView the content offset, to achieve the effect of scrolling, the principle is relatively simple, the key is that some details need to be handled well, to achieve smooth effect at the same time to consider the performance optimization

Here are the interface methods and properties of the. h file that can accommodate most custom scenarios

/* Initialization/*
(Instancetype) initWithFrame: (CGRect) frame Textarray: (Nsarray *) Textarray Colorarray: (Nsarray *) Textcolorarray;

Scrolling caption Array
@property (nonatomic,strong) nsarray<nsstring *> *textarray;

Subtitle Color array
@property (nonatomic,strong) nsarray<uicolor *> *textcolorarray;

Subtitle background color
@property (nonatomic,strong) Uicolor *backgroundcolorofcanvas;

Label background picture
@property (nonatomic,strong) uiimage *backgroundimageofcanvas;

Font size
@property (nonatomic,assign) cgfloat fontofsize;

Timer
@property (nonatomic,strong) Nstimer *timer;

The idea of scrolling marquee is similar to an infinite carousel diagram, where a little trick is used to achieve a continuous ending of the caption: Copy the same caption content to the back, and when the caption's ScrollView scrolls to the copy content at the beginning, the The contentoffset offset is set to the beginning of the original content, so that a seamless continuous loop can be scrolled through the

#pragma mark-Create ScrollView Content-(void) createcontentofscrollview{//Create Contentview self.contentsize=cgsizemake (0, self.b

 Ounds.size.height);

 The offset value is set to 0 self.contentoffset=cgpointmake (0, 0);

 Turn off the indicator bar Self.showshorizontalscrollindicator=no;
 Create a label cgfloat labely=0;
 CGFloat labelw=200;

 CGFloat labelh=self.bounds.size.height; Add two times the same content, infinite loop use for (int j=0; j<2;j++) {for (int i=0; i<self.textarray.count; i++) {Uilabel *textlabel=[[

 Uilabel Alloc] Initwithframe:cgrectmake (self.contentSize.width, labely, LABELW, Labelh)];

 Label background Uiimageview *labelbackgroundview=[[uiimageview alloc] initWithFrame:textLabel.frame];

 Label background picture Labelbackgroundview.image=self.backgroundimageofcanvas;
 Label text (i<self.textarray.count) {textlabel.text=self.textarray[i];
 }else{textlabel.text=@ "----"; //label the text color (determines whether the text color array holds the corresponding color, and does not use the default color) if (i<self.textcolorarray.count) {textlabel.textcolor=
 Self.textcolorarray[i]; }else{//defaultColor Textlabel.textcolor=[uicolor Blackcolor];

 //****** font size ******** textlabel.font=[uifont systemFontOfSize:self.fontOfSize];

 Label label Tag Value Textlabel.tag=label_tag_init + i + * j; Each creates a label on the contensize with the width of a label self.contentsize=cgsizemake (SELF.CONTENTSIZE.WIDTH+LABELW,

 Self.bounds.size.height);
 [Self addsubview:labelbackgroundview];

 [Self Addsubview:textlabel]; }
 }

}

Note Here the use of the timer timer , to be timer added to the runloop , note that CommonModes if you use defaultModes the words will appear cotton (and sliding and other events in runLoop the same, the system will respond to the priority of sliding)

Tips: The timer can be paused

NSTimer The system is not provided with a paused method, the method list provides only- fire (boot) and- invalidate (abolishes) two methods, which invalidate are completely abolished and cannot be restarted.

But here's a @property (copy) NSDate *fireDate property that we can use to pause and restart the timer.

 Start timer now
 [timer setfiredate:[nsdate Date]];

Pause Timer
 [timer setfiredate:[nsdate distantfuture]];

Is there a very strange feeling that the use of the timer's startup time attribute cleverly reached the purpose of pause and restart

Automatic scrolling timer************
 nstimer *timer=[nstimer scheduledtimerwithtimeinterval:scroll_time_ INTERVAL target:self selector: @selector (AutoScroll) Userinfo:nil Repeats:yes];

 [[Nsrunloop Mainrunloop] Addtimer:timer formode:nsrunloopcommonmodes];

 Start timer now
 [timer setfiredate:[nsdate Date]];

 Self.timer=timer;

Here's scrollView how the timer drives the scrolling.

Notice here that if you want to achieve the effect of continuous scrolling frames, the timer call needs to be very frequent (1 seconds to call more than 10 times), and then look at the CPU usage. An instant surge of about 20%, although still in an acceptable range, but in this small place to consume CPU is obviously not cost-effective

Solution: Give an animation transition is good, UIView animateWithDuration easy to handle, the transition is very smooth, the world is also an instant quiet.

Sequela: The only problem with the animation transition is that the controller jumps back again, the animation will be the end of the jump to the end of the frame, the careful user will find this strange place, this is only in the performance and effect of reconciling between the optimal solution

Scrolling time interval
#define SCROLL_TIME_INTERVAL 3

//per scrolling distance
#define Scroll_distance 100

Automatic scrolling
-(void) autoscroll{

 //scrolling speed
 cgfloat offset=scroll_distance;

 If the caption scrolls to the second part of the repeat part, the offset is set to 0, and the first part is implemented to implement an infinite loop
 if (SELF.CONTENTOFFSET.X>=SELF.CONTENTSIZE.WIDTH/2) {

 Self.contentoffset=cgpointmake (0, 0);
 }

 Cut each animation scrolling distance

 [uiview animatewithduration:scroll_time_interval delay:0 options: Uiviewanimationoptioncurvelinear animations:^{
  self.contentoffset=cgpointmake (Self.contentOffset.x+offSet, SELF.CONTENTOFFSET.Y);
 } Completion:nil];
}

Summarize

Well, the above is the entire content of this article, the parents have any comments and questions to remember timely feedback oh, I hope this article content for everyone's study or work to bring certain help.