IOS Instrument Digital Bounce Animation-B

A couple of days ago. Hyperbolic wave Animation (HTTP://WWW.JIANSHU.COM/P/7DB295FD38EB)
And the Ring Countdown Animation (HTTP://WWW.JIANSHU.COM/P/D1D16DFF33C9)
And feel the effect is good, like a lot of people, so today is going to engage in a "meter-type digital beat animation." So what is the instrument-type digital bounce animation. directly on the effect

June -27-2016 11-28-17.gif

One
Look at the effect may understand the instrument-type digital bounce animation is what ghost (the name is I get it)
First comb the idea:

1. The first thing you can see is that the text is sliding up and down and you can see the sliding process. Obviously this is a uiscrollview, the last emission column 0~9 the number of clicks Change contentoffest (here there will be a pit, explained later);
   2. Just a few numbers to create a few uiscrollview so you can achieve
   1. Through the Uiscrollview can move uitableview instead of numbers on the cell

Two
Well, the idea looks very simple. Let's do this.
1. Create custom view inheritance and Uiviwe and implement initialization methods

- (instancetype)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame]) {        self.NumberTextArray = [NSMutableArray array];//用来存储字符串的没哟个位的字节 self.backgroundColor = [UIColor whiteColor]; } return self;}

2. Create a table based on data

- (void)setNumber:(NSInteger)number{    _number = number;    NSString * string = [NSString stringWithFormat:@"%ld",number]; for (NSInteger i = 0; i < string.length; i++) { [self.NumberTextArray addObject:[string substringWithRange:NSMakeRange(i, 1)]];//把数字的每一位放到数组里面 } [self createTableView];//创建表;}

3. Create the UITableView you just talked about and create multiple, number of numbers to create a

  Nsinteger length = [[NSString stringWithFormat:@ "%ld",Self. number] length];Self.number is a custom value and then creates a table based on the number of digitsfor (Nsinteger i =0; i < length; i++) {UITableView * TableView = [[UITableView Alloc]initwithframe:CGRectMake (i*Self. Frame. Size. Width/length,0,Self. Frame. Size. Width/length,Self. Frame. Size.height) style:uitableviewstyleplain]; //create table widths in turn Tableview.delegate = self; Tableview.datasource = Self Tableview.tag = 1000 + i; Add tag to [self Addsubview:tableview]; nsstring * Strid = [nsstring stringwithformat:@" aaa%ld ", I]; //different tables to add different tag values. [TableView registernib:[uinib nibwithnibname:@ " Mytableviewcell "Bundle:nil] forcellreuseidentifier:strid]; } 

4. Create a cell and display a number

- (uitableviewcell*) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) indexpath{NSString * Strid = [NSString stringWithFormat:@ "Aaa%ld", TableView. Tag-1000]; Mytableviewcell * CELL = [TableView dequeuereusablecellwithidentifier:strid Forindexpath:indexpath]; CELL.selectionstyle = uitableviewcellselectionstylenone; Span class= "Hljs-keyword" >if ([self.tag-1000] IsEqualToString:@ ".") {Cell.text = @ "."; //determine if the number has a decimal point if there is a display point} else{cell.text = [nsstring stringwithformat:@"%ld ", Indexpath.row]; //Show Numbers 0~9} return CELL;            

5. Next is the key trigger animation (we'll trigger the animation here when we click on the cell)

- (void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) indexpath{Nsinteger length = [[NSString stringWithFormat:@ "%ld",Self. number] length];for (Nsinteger i =0; i< length; i++) {UITableView * TableView = (uitableview*) [Selfviewwithtag:1000+i];  Get the corresponding table //Nsinteger number = [self. Numbertextarray[i] integervalue]; get each table eventually if the real number//// [TableView setcontentoffset:cgpointmake (0, # * 50) Animated:yes]; Modify offset number *cell height [tableview setcontentoffset:cgpointmake (0, (arc4random ()%9) * Self . Frame . Size. Height) Animated:YES]; //Here for the show selected random number}}                

Here, all the code is implemented.

Three
Questions and Thoughts
The individual encountered a little bit of a problem in the realization of this composition, and a little bit of reflection in this return to the present
1. This is the first time I've used this notation when I've implemented the 5th step of triggering the animation above.

- (void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) indexpath{Nsinteger length = [[NSString stringWithFormat:@ "%ld",Self. number] length];For (nsinteger i = 0; i< length, i++) {UITableView * TableView = (uitableview*) [SelfViewwithta G:1000+i]; //Nsinteger number = [self. Numbertextarray[i] IntegerValue]; [UIView animatewithduration:2.0 animations:^{tableview. Contentoffset = Cgpointmake (0, ( Arc4random ()%9) * self. Frame. Size. height);}]; //code very well understood}}                  

The effect is as follows:

June -27-2016 12-55-26.gif

What is the reason? At present, I do not know, you friends if you understand, please tell the younger brother

2. If the fifth method mentioned above is used Setcontentoffset:cgpointmake (0, number *) Animated:yes]; How do I change the animation inside?
: How to modify the speed of animation when modifying animation time (fast and slow) what should I do (this problem is confusing)
3. So far, these are all based on a combination of controls and not going deep to another level. I think this is the most embarrassing situation for most people now.

About the animation, you friends if you have more information please share to the younger brother (eager to learn), common progress.
Almost all of the above code will not send code//////

Wen/Jianjian Pot (Jane book author)
Original link: http://www.jianshu.com/p/0d6f50385861
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

IOS Instrument Digital Bounce Animation-B