UIView surface custom transformation/animation (li

Question

What is the way to implement custom transformation (+ animation) on a view surface (similar to the images attached) (not just the view bounds).

The question is mainly in what is the general way to do that (not exactly the 'water drop effect', but any examples would be appreciated for sure). I guess, that's some 'algorythmic' transformation of the layer layout 'grid', but not sure which way to 'dig' that in.

(Another thought is that might be achieved with using some frameworks, however, I would still need to understand the core logic).

UPDATE:

Pretty good resource for animations lovers recently been found from one of the answers: iPhone Development Wiki.

Answer 1

Read this excellent blog post by Bartosz Ciechanowski:

http://ciechanowski.me/blog/2014/05/14/mesh-transforms/

To wrap it up: Apple does this with private API around a class called 'CAMeshTransform'.

The author proposes an self-written substitute:

https://github.com/Ciechan/BCMeshTransformView

It's pretty amazing actually!

Answer 2

You can use this:

- (void)drawWaterRippleAnimation {
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(200, 200, 100, 100)];
    view.backgroundColor = [UIColor blueColor];

    CATransition *animation=[CATransition animation];
    [animation setDelegate:self];
    [animation setDuration:1.75];
    [animation setTimingFunction:UIViewAnimationCurveEaseInOut];
    [animation setType:@"rippleEffect"];

    [animation setFillMode:kCAFillModeRemoved];
    animation.endProgress=1;
    [animation setRemovedOnCompletion:NO];
    [self.view.layer addAnimation:animation forKey:nil];
}

Credits goes to here.