1 Commits

Author SHA1 Message Date
Cody Weaver
a0810b5746
[ShadowLayer] Add API to animate corner radius (#5585)
### Context
A client is wanting to animate the corner radius of a view that has a `MDCShadowLayer` backing layer. This currently doesn't render correctly. The work done in #5398 still does not support animating the corner radius. #5398 additionally doesn't animate the `shadowPath` property so it still won't work properly. We set the properties in the `CATransaction completionBlock` because this prevents the layer from snapping back to it's original state after the animation completes. If a client desires to use a `CATransaction` wrapper around this animation they can do so as outlined [here](https://developer.apple.com/documentation/quartzcore/catransaction).
### The problem
Animating corner radius changes in a CAAnimation don't render
### The fix
Add an API to allow clients to animate corner radius changes for MDCShadowLayer.
### Alternatives
1. Alternatives to adding a new API would be to have the a client use our private API which isn't desirable and not future proof as discussed in #5566.

2. Add an API `- (CAGroupAnimation *)animateCornerRadius:(CGFloat)cornerRadius;` that would return all 5 of the animations and clients could set the duration and timingFunction themselves but this doesn't allow for the layers to stay animated after completion. If we want the layer to be animated after completion we could use `kCAFillModeForwards` and `removeOnCompletion = NO` but that would prevent use from animating back to the original state.
### Videos
| Before | After |
| - | - |
|![before](https://user-images.githubusercontent.com/7131294/47959028-d1fba180-dfaf-11e8-99fb-3aedd0a5010e.gif)|![after](https://user-images.githubusercontent.com/7131294/47959029-d6c05580-dfaf-11e8-97c4-68a46bbd4c7f.gif)|

| Alternative 2 | Without corner radius |
| - | - |
|![group](https://user-images.githubusercontent.com/7131294/47959034-eb9ce900-dfaf-11e8-8c92-18e668aeb21d.gif)|![nocornerradius](https://user-images.githubusercontent.com/7131294/47959036-ef307000-dfaf-11e8-83eb-dee49d2de36a.gif)|

### Bugs remaining
1. Set the MDShadowLayer cornerRadius to 0.
2. Call the new API with a duration of 5 seconds and a cornerRadius of 10.
3. Before that animation completes call the API again with a cornerRadius of 0.
#### Expected behavior
The first animation would complete and then the second animation would start.
#### Actual behavior
The animation jumps to 10 and then animates back to 0.

**_note_** This could be avoided if we added a property `BOOL` called `_isAnimating` and if that is set to `YES` then we would stash the next animation. This isn't added because most animations will be too fast for a user to tap that fast.

### Tested
cl/219964460
2018-11-05 18:25:43 -05:00