A custom table view with highly detailed ripple animations.
I created this control from a couple posts on Dribbble by Boris Valusek out of pure curiosity. I really wanted to nail the shadow animations as well as a bounce effect that followed diminishing return rules on amplitude as well as plausible timing. Take a look at some screens and animations.
To enable Anti-Aliasing you'll need to set the UIViewEdgeAntialiasing key to YES in your Info.plist. Doing so will impact performance, but if you're an optimizer you'll end up with good performance and sweet, sweet line edges like this:
The preferred method of installation is through CocoaPods. Just add the following to your Podfile:
pod 'RNRippleTableView', '~> 0.0.2'
Or if you want to install manually, drag both RNRippleTableView's .h and .m into your project. You'll need to ensure that the QuartzCore framework is included.
Optionally, you'll need to add the following code to any view controllers using RNRippleTableView to have ripple animations on shake gestures.
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
[self.rippleView becomeFirstResponder];
}To use RNRippleTableView, simply add to your controller and lay it out just as you would any other view. Connect a datasource and delegate in a similar fashion to UITableView. You must also register the class that will be used as the table cells. This class should be a class or subclass of UIView.
self.rippleView = [[RNRippleTableView alloc] init];
[self.rippleView registerContentViewClass:[RNSampleCell class]];
self.rippleView.delegate = self;
self.rippleView.dataSource = self;Setup your cells just like you would with UITableView except without any of the identifier and checking for nil parts, that is handled for you.
- (UIView *)viewForTableView:(RNRippleTableView *)tableView atIndex:(NSInteger)index withReuseView:(RNSampleCell *)reuseView {
reuseView.backgroundColor = [UIColor colorWithRed:117/255.f green:184/255.f blue:174/255.f alpha:1];
reuseView.titleLabel.text = [NSString stringWithFormat:@"Cell %i",index];
reuseView.titleLabel.textColor = [UIColor whiteColor];
return reuseView;
}RNRippleTableView comes with a small set of options to customize the appearance and animations.
@property (nonatomic, assign) BOOL rippleEnabled; // default YESToggle rippling on and off.
@property (nonatomic, assign) BOOL isAnchoredLeft; // default YESDetermines the anchor point for cells. Also determines which side of the view is animated as well as the direction that the shadow is drawn.
@property (nonatomic, assign) NSInteger rippleOffset; // default 3The number of adjacent cells that are rippled.
@property (nonatomic, assign) CGFloat rippleAmplitude; // default 20 (degrees)The angle at which the epicenter of the ripple animates its rotation to in degrees.
@property (nonatomic, assign) CGFloat rippleDuration; // default 0.75 secondsThe time for a single bounce animation to complete in seconds.
@property (nonatomic, assign) CGFloat rippleDelay; // default 0.1fThe timing delay between bounce animations in seconds that gives the entire ripple animation its delay effect. Faster looks more like a burst while slower looks like water.
@property (nonatomic, assign) BOOL ripplesOnShake; // default NOOptionally you can animate small ripples on shake gestures with the device. This was a fun feature I added just because.
I created a parent project called RNTableView simply as a bare-minimum project for starting highly customized UITableView-esque classes. That project was entirely insprired by Mike Ash's Let's Build UITableView blog post.
Boris Valusek was the creator behind this idea on Dribbble. All credit for originality goes to him.
If you've used this project in a live app, please let me know! Nothing makes me happier than seeing someone else take my work and go wild with it.
- @nystrorm on Twitter
- @rnystrom on Github
- rnystrom [at] whoisryannystrom [dot] com
See LICENSE.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent