Overview
This view and it's layer create a 2D fluid animation that can be used to simulate a filling effect.
Requirements
Example
To run the example project, clone the repo, and run pod install from
the Example directory first.
Getting Started
Installation
BAFluidView is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "BAFluidView"
Simple Usage
Basic
To add a BAFluidView to your app, add the line:
BAFluidView *view = [[BAFluidView alloc] initWithFrame:self.view.frame];
[view fillTo:@1.0];
view.fillColor = [BAUtil UIColorFromHex:0x397ebe];
[view startAnimation];
This creates the following view:
Advanced Usage
Listed below are examples of several properties that you can control.
Init
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.
Animate Only Once (End in old state)
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 = [BAUtil UIColorFromHex:0x397ebe];
[view startAnimation];
Animate Only Once (End in new state)
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 = [BAUtil UIColorFromHex:0x397ebe];
view.fillAutoReverse = NO;
view.fillRepeatCount = 1;
[view fillTo:@1.0];
[view startAnimation];
This creates the following view:
Fill to specific level
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 = [BAUtil UIColorFromHex:0x397ebe];
[view startAnimation];
This creates the following view:
Fill Color
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 = [BAUtil UIColorFromHex:0x2e353d];
[fluidView keepStationary];
[fluidView startAnimation];
Note: **keepStationary keeps the fluid at the starting level! This creates the following view:
Stroke Color
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:
Use as a Layer
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 = [BAUtil UIColorFromHex: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:
Author
Bryan Antigua, antigua.B@gmail.com
License
BAFluidView is available under the MIT license. See the LICENSE file for more info.
