iOS 白白的液体滴了一地

2016-11-18 本文已影响161人 887d1fc86fe6

几天之前在 dribbble 上看到一个效果甚是喜欢

让我联想到了一些美妙的东西

身为手操创造利器的程序员

怎能不将它实现出来

设计作品来自dribbble 的 Vadim Gromov:https://dribbble.com/shots/1904130-Fluid-Drop-Loading。想看最终实现效果图可以直接拉到文末。

看起来好像很复杂，没关系，慢慢来。首先是将这个复杂的动画分解一些，实际上可以将它看成是多个水滴下落动画的叠加：

由7个单独的滴水动画叠加而成

下面开始逐滴发射实现

顶端的滴水分析

1.上帝说，要有水

顶端滴水动画分解如下：

水滴效果的实现，非贝塞尔曲线莫属。这里可以使用我在之前发布的文章《iOS 下水滴动画之实现》里面提到过的原理，再贴一次原理图：

整体思路是：用一个圆形的 View 表示下落的水滴，然后在水滴下落的过程中根据水滴的位置重新用贝塞尔曲线绘制水滴的形状。先初始化一些成员：

- (void)setupTopWater

{

//水

self.topWaterLayer= [CAShapeLayerlayer];

self.topWaterLayer.frame=CGRectMake(0,0,self.frame.size.width,0);

self.topWaterLayer.fillColor= [UIColorwhiteColor].CGColor;

self.topWaterLayer.strokeColor= [UIColorclearColor].CGColor;

[self.layeraddSublayer:self.topWaterLayer];

//水滴

self.topWaterDrop= [[UIViewalloc] initWithFrame:CGRectMake(0,0, TOPWATERDROP_W, TOPWATERDROP_W)];

self.topWaterDrop.backgroundColor= [UIColorwhiteColor];

self.topWaterDrop.layer.cornerRadius= TOPWATERDROP_W /2.0f;

self.topWaterDrop.clipsToBounds=YES;

self.topWaterDrop.center=CGPointMake(self.frame.size.width/2.0f, -TOPWATERDROP_W /2.0f);

[selfaddSubview:self.topWaterDrop];

}

编写根据水滴的位置来绘制贝塞尔曲线的代码：

- (void)drawTopWater

{

UIBezierPath*path = [selfgetBezierPathFromPoint1:CGPointMake(self.frame.size.width/2.0f,0) radius1:TOPWATER_W /2.0f Point2:self.topWaterDrop.centerradius2:TOPWATERDROP_W /2.0f];

self.topWaterLayer.path= path.CGPath;

}

- (UIBezierPath*)getBezierPathFromPoint1:(CGPoint)point1 radius1:(CGFloat)r1 Point2:(CGPoint)point2 radius2:(CGFloat)r2

{

CGFloatx1 = point1.x;

CGFloaty1 = point1.y;

CGFloatx2 = point2.x;

CGFloaty2 = point2.y;

CGFloatdistance = sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));

CGFloatsinDegree = (x2 - x1) / distance;

CGFloatcosDegree = (y2 - y1) / distance;

CGPointpointA =CGPointMake(x1 - r1 * cosDegree, y1 + r1 * sinDegree);

CGPointpointB =CGPointMake(x1 + r1 * cosDegree, y1 - r1 * sinDegree);

CGPointpointC =CGPointMake(x2 + r2 * cosDegree, y2 - r2 * sinDegree);

CGPointpointD =CGPointMake(x2 - r2 * cosDegree, y2 + r2 * sinDegree);

CGPointpointN =CGPointMake(pointB.x+ (distance /2) * sinDegree, pointB.y+ (distance /2) * cosDegree);

CGPointpointM =CGPointMake(pointA.x+ (distance /2) * sinDegree, pointA.y+ (distance /2) * cosDegree);

UIBezierPath*path = [UIBezierPathbezierPath];

[path moveToPoint:pointA];

[path addLineToPoint:pointB];

[path addQuadCurveToPoint:pointC controlPoint:pointN];

[path addLineToPoint:pointD];

[path addQuadCurveToPoint:pointA controlPoint:pointM];

returnpath;

}

2.让它下落！

水滴的下落不是线性的，它受重力作用。要实现它有两种思路，一种是根据物理上位移与时间的二次函数关系，计算出 60 个关键点位置(duration 不超过 1s 的话)作为动画的关键帧，第二种是直接利用UIKit Dynamic来为水滴模拟重力效果。这里我用第二种方法，先做一些物理世界的设置：

- (void)setupDynamic

{

self.animator= [[UIDynamicAnimatoralloc] initWithReferenceView:self];

//gravity

self.gravityBehavior= [[UIGravityBehavioralloc] init];

[self.animatoraddBehavior:self.gravityBehavior];

//collision

self.collisionBehavior= [[UICollisionBehavioralloc] init];

self.collisionBehavior.collisionMode=UICollisionBehaviorModeEverything;

[self.collisionBehavioraddBoundaryWithIdentifier:@"floor"fromPoint:CGPointMake(0,self.frame.size.height) toPoint:CGPointMake(self.frame.size.width,self.frame.size.height)];

[self.animatoraddBehavior:self.collisionBehavior];

}

在刚刚的setupTopWater函数末尾添加代码：

- (void)setupTopWater

{

...

[self.collisionBehavioraddItem:self.topWaterDrop];

self.topWaterDropBehavior= [[UIDynamicItemBehavioralloc] initWithItems:@[self.topWaterDrop]];

self.topWaterDropBehavior.elasticity=0;

self.topWaterDropBehavior.allowsRotation=NO;

[self.animatoraddBehavior:self.topWaterDropBehavior];

}