#BAFluidView
[
This view and it's layer create a 2D fluid animation that can be used to simulate a filling effect.
- Works on any iOS device
To run the example project, clone the repo, and run pod install from the Example directory first.
BAFluidView is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "BAFluidView"
To add a BAFluidView to your app, add the line:
BAFluidView *view = [[BAFluidView alloc] initWithFrame:self.view.frame];
[view fillTo:@1.0];
view.fillColor = [UIColor colorWithHex:0x397ebe];
[view startAnimation];This creates the following view:
Listed below are examples of several properties that you can control.
You can use initWithFrame:maxAmplitude:minAmplitude:amplitudeIncrement: to control how high/low you want the wave to go. The increment method helps control the variation between the peaks. If you're only concerned is where the fluid starts, initWithFrame:(CGRect)aRect startElevation:(NSNumber*)aStartElevation creates a fluid view with default values, but lets you choose the starting elevation. To control all init values, use the method (id)initWithFrame:(CGRect)aRect maxAmplitude:(int)aMaxAmplitude minAmplitude:(int)aMinAmplitude amplitudeIncrement:(int)aAmplitudeIncrement startElevation:(NSNumber*)aStartElevation which is a combination of the two above.
If you only want the effect to fill only once (or any specific amount of times) you can edit the fillRepeatCount property:
BAFluidView *view = [[BAFluidView alloc] initWithFrame:self.view.frame maxAmplitude:40 minAmplitude:5 amplitudeIncrement:5];
view.fillRepeatCount = 1;
[view fillTo:@1.0];
view.fillColor = [UIColor colorWithHex:0x397ebe];
[view startAnimation];You can also create the same effect as above, but stay in the filled state by editing the fillAutoReverse property:
BAFluidView *view = [[BAFluidView alloc] initWithFrame:self.view.frame maxAmplitude:40 minAmplitude:5 amplitudeIncrement:5];
view.fillColor = [UIColor colorWithHex:0x397ebe];
view.fillAutoReverse = NO;
view.fillRepeatCount = 1;
[view fillTo:@1.0];
[view startAnimation];This creates the following view:
By default, the animation goes to the top of the view. If you don't want it to go the entire distance, you can use the fillTo: method by giving it a percentage of the distance you want it to travel:
BAFluidView *view = [[BAFluidView alloc] initWithFrame:self.view.frame];
[view fillTo:@0.5];
view.fillColor = [UIColor colorWithHex:0x397ebe];
[view startAnimation];This creates the following view:
By editing the fillColor property, you can give the fluid any color:
BAFluidView *fluidView = [[BAFluidView alloc] initWithFrame:self.view.frame startElevation:@0.5];
fluidView.strokeColor = [UIColor whiteColor];
fluidView.fillColor = [UIColor colorWithHex:0x2e353d];
[fluidView keepStationary];
[fluidView startAnimation];Note: keepStationary keeps the fluid at the starting level!
This creates the following view:
Similiarly, you can alter the stroke property. With a clear fillColor you get a wave effect like below:
BAFluidView *fluidView = [[BAFluidView alloc] initWithFrame:self.view.frame startElevation:@0.5];
fluidView.fillColor = [UIColor clearColor];
fluidView.strokeColor = [UIColor whiteColor];
[fluidView keepStationary];
[fluidView startAnimation];This creates the following view:
If you want to add the effect to another view, use it's layer!
BAFluidView *fluidView = [[BAFluidView alloc] initWithFrame:self.view.frame startElevation:@0.3];
fluidView.fillColor = [UIColor colorWithHex:0x397ebe];
[fluidView fillTo:@0.9];
[fluidView startAnimation];
UIImage *maskingImage = [UIImage imageNamed:@"icon"];
CALayer *maskingLayer = [CALayer layer];
maskingLayer.frame = CGRectMake(CGRectGetMidX(fluidView.frame) - maskingImage.size.width/2, 70, maskingImage.size.width, maskingImage.size.height);
[maskingLayer setContents:(id)[maskingImage CGImage]];
[fluidView.layer setMask:maskingLayer];Sweet! check it out:
Bryan Antigua, antigua.B@gmail.com
BAFluidView is available under the MIT license. See the LICENSE file for more info.