[翻译] BAFluidView

BAFluidView

https://github.com/antiguab/BAFluidView

This view and it's layer create a 2D fluid animation that can be used to simulate a filling effect.

这个view以及他的layer创建出了一个2D液体流动的动画，用来模拟水流注入的效果。

Requirements

• Works on any iOS device

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

为了运行这个项目，你需要clone这个repo，运行pod install之后就可以运行了。

Getting Started

BAFluidView is available through CocoaPods. To install it, simply add the following line to your Podfile:

你可以使用CocoaPods来安装，用pod “BAFluidView”即可。

pod "BAFluidView"

Basic

To add a BAFluidView to your app, add the line:

添加以下代码就可以将效果添加到你的app中：

BAFluidView *view = [[BAFluidView alloc] initWithFrame:self.view.frame];
[view fillTo:@1.0];
view.fillColor = [UIColor colorWithHex: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.

你可以使用initWithFrame:maxAmplitude:minAmplitude:amplitudeIncrement:来控制波浪可以达到多高或者多低。increment方法这是为了控制波峰的大小。如果你只是关心从什么地方开始动画，用这个方法initWithFrame:(CGRect)aRect startElevation:(NSNumber*)aStartElevation。你可以用方法(id)initWithFrame:(CGRect)aRect maxAmplitude:(int)aMaxAmplitude minAmplitude:(int)aMinAmplitude amplitudeIncrement:(int)aAmplitudeIncrement startElevation:(NSNumber*)aStartElevation来达到最大的控制。

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 = [UIColor colorWithHex: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 = [UIColor colorWithHex:0x397ebe];
view.fillAutoReverse = NO;
view.fillRepeatCount = 1;
[view fillTo:@1.0];
[view startAnimation];

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:

默认情况下，动画会填充到顶部去并填充满，如果你并不想这样子，你可以用方法fillTo:填充到指定的百分比处：

BAFluidView *view = [[BAFluidView alloc] initWithFrame:self.view.frame];
[view fillTo:@0.5];
view.fillColor = [UIColor colorWithHex:0x397ebe];
[view startAnimation];

Fill Color

By editing the fillColor property, you can give the fluid any color:

你可以通过修改fillColor属性来修改填充的颜色：

BAFluidView *fluidView = [[BAFluidView alloc] initWithFrame:self.view.frame startElevation:@0.5];
fluidView.strokeColor = [UIColor whiteColor];
fluidView.fillColor = [UIColor colorWithHex:0x2e353d];
[fluidView keepStationary];
[fluidView startAnimation];

Stroke Color

Similiarly, you can alter the stroke property. With a clear fillColor you get a wave effect like below:

你也可以通过修改stroke属性来修改描边的颜色：

BAFluidView *fluidView = [[BAFluidView alloc] initWithFrame:self.view.frame startElevation:@0.5];
fluidView.fillColor = [UIColor clearColor];
fluidView.strokeColor = [UIColor whiteColor];
[fluidView keepStationary];
[fluidView startAnimation];

Use as a Layer

If you want to add the effect to another view, use it's layer!

如果你想使用他的layer，很简单，就用它的layer座位mask就行了！

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];