@apexnative/navigation 1.0.0-alpha.1 → 1.0.0-alpha.10

package/ios/Animations/Elements/ANNSharedElementFlight.mm

@@ -3,19 +3,25 @@
 #import "ANNInterpolate.h"
 #import "ANNSharedElementTransitionOptions.h"
 #import "ANNTrack.h"
+#import "ANNTransformParts.h"
 #import "ANNUtils.h"
 #import <React/RCTViewComponentView.h>
 #import <react/renderer/components/view/ViewProps.h>
+#include <cmath>
 
 // How close two rectangles count as the same (points): a visible part that is the whole element needs no mask.
 static const CGFloat ANNSameRectTolerance = 0.5;
 
 // One end of a flight: the place, the size, the transform, the corners and the visible part of a React view, in the
-// container's coordinates.
+// container's coordinates. The transform is the whole one the view is drawn with there (its own and its parents'),
+// about its center; once split, its scale goes into the size, the corners and the visible part, so the size the copy
+// shows changes evenly on the way.
 typedef struct {
     CGPoint center;
     CGSize size;
     CATransform3D transform;
+    // The transform's parts, which the flight interpolates; their scale is only its sign once the scale is in the size.
+    ANNTransformParts parts;
     CGFloat cornerRadius;
     // The part the clipping parents leave visible, in the copy's coordinates, and its corners.
     CGRect visible;
@@ -23,6 +29,21 @@ typedef struct {
     BOOL clipped;
 } ANNFlightEnd;
 
+// What the copy shows at one time: its size, center, transform and corners, its two pictures' frames and alphas, and
+// its visible part (in the copy's coordinates) with its corners.
+typedef struct {
+    CGSize size;
+    CGPoint center;
+    CATransform3D transform;
+    CGFloat cornerRadius;
+    CGRect fromFrame;
+    CGRect toFrame;
+    CGFloat fromAlpha;
+    CGFloat toAlpha;
+    CGRect mask;
+    CGFloat maskRadius;
+} ANNFlightState;
+
 static BOOL ANNIsText(UIView *view) {
     static Class paragraph;
     static dispatch_once_t once;
@@ -71,12 +92,44 @@ static CGFloat ANNCornerRadiusOf(UIView *view) {
     return 0;
 }
 
+// The anchor of a layer in the coordinates of its bounds.
+static CGPoint ANNAnchorInBounds(CALayer *layer) {
+    CGRect bounds = layer.bounds;
+    return CGPointMake(bounds.origin.x + layer.anchorPoint.x * bounds.size.width,
+                       bounds.origin.y + layer.anchorPoint.y * bounds.size.height);
+}
+
+// What takes a point of the layer, counted from its anchor, to the top of its tree: its transform and place, then each
+// superlayer's `sublayerTransform`, transform and place the same way (a layer's transforms turn about its anchor).
+static CATransform3D ANNTransformToTop(CALayer *layer) {
+    CATransform3D transform = CATransform3DConcat(
+        layer.transform, CATransform3DMakeTranslation(layer.position.x, layer.position.y, 0));
+    for (CALayer *parent = layer.superlayer; parent; parent = parent.superlayer) {
+        CGPoint anchor = ANNAnchorInBounds(parent);
+        transform = CATransform3DConcat(transform,
+                                        CATransform3DMakeTranslation(-anchor.x, -anchor.y, 0));
+        transform = CATransform3DConcat(transform, parent.sublayerTransform);
+        transform = CATransform3DConcat(transform, parent.transform);
+        transform = CATransform3DConcat(
+            transform, CATransform3DMakeTranslation(parent.position.x, parent.position.y, 0));
+    }
+    return transform;
+}
+
 static ANNFlightEnd ANNFlightEndOf(UIView *view, UIView *screenRoot, UIView *container) {
     ANNFlightEnd end;
     CALayer *layer = view.layer;
     end.size = layer.bounds.size;
-    end.center = [view.superview convertPoint:layer.position toView:container];
-    end.transform = layer.transform;
+    // From the view's center to the container's bounds: up to the top, then down into the container.
+    CGPoint containerAnchor = ANNAnchorInBounds(container.layer);
+    CATransform3D toContainer =
+        CATransform3DConcat(CATransform3DInvert(ANNTransformToTop(container.layer)),
+                            CATransform3DMakeTranslation(containerAnchor.x, containerAnchor.y, 0));
+    CATransform3D whole = CATransform3DConcat(ANNTransformToTop(layer), toContainer);
+    // The center is where the view's center lands; the rest of the transform turns about it.
+    end.center = CGPointMake(whole.m41 / whole.m44, whole.m42 / whole.m44);
+    end.transform = CATransform3DConcat(
+        whole, CATransform3DMakeTranslation(-end.center.x, -end.center.y, 0));
     end.cornerRadius = ANNCornerRadiusOf(view);
     // The visible part: the element's bounds cut by every parent that clips (`overflow: hidden`, a scroll view) up to
     // the screen's root, in the element's own coordinates, moved to the copy's (its bounds start at 0, 0).
@@ -103,6 +156,47 @@ static ANNFlightEnd ANNFlightEndOf(UIView *view, UIView *screenRoot, UIView *con
     return end;
 }
 
+static BOOL ANNIsFiniteRect(CGRect rect) {
+    return isfinite(rect.origin.x) && isfinite(rect.origin.y) && isfinite(rect.size.width) &&
+           isfinite(rect.size.height);
+}
+
+static BOOL ANNFlightEndIsFinite(ANNFlightEnd end) {
+    const CATransform3D t = end.transform;
+    const CGFloat values[] = {t.m11, t.m12, t.m13, t.m14, t.m21, t.m22, t.m23, t.m24,
+                              t.m31, t.m32, t.m33, t.m34, t.m41, t.m42, t.m43, t.m44};
+    for (CGFloat value : values) {
+        if (!isfinite(value)) {
+            return NO;
+        }
+    }
+    return isfinite(end.center.x) && isfinite(end.center.y) && isfinite(end.size.width) &&
+           isfinite(end.size.height) && isfinite(end.cornerRadius) && isfinite(end.visibleRadius) &&
+           ANNIsFiniteRect(end.visible);
+}
+
+// The parts of the end's transform, its scale moved into the size, the corners and the visible part (a mirror keeps
+// its sign); NO when the transform flattens the view.
+static BOOL ANNSplitFlightEnd(ANNFlightEnd *end) {
+    ANNTransformParts parts;
+    if (!ANNTransformPartsOf(end->transform, &parts)) {
+        return NO;
+    }
+    CGFloat scaleX = (CGFloat)std::fabs(parts.scale[0]);
+    CGFloat scaleY = (CGFloat)std::fabs(parts.scale[1]);
+    CGFloat scale = MIN(scaleX, scaleY);
+    parts.scale[0] = std::copysign(1.0, parts.scale[0]);
+    parts.scale[1] = std::copysign(1.0, parts.scale[1]);
+    end->parts = parts;
+    end->size = CGSizeMake(end->size.width * scaleX, end->size.height * scaleY);
+    end->cornerRadius *= scale;
+    end->visibleRadius *= scale;
+    end->visible = CGRectMake(end->visible.origin.x * scaleX, end->visible.origin.y * scaleY,
+                              end->visible.size.width * scaleX,
+                              end->visible.size.height * scaleY);
+    return YES;
+}
+
 // The picture of the view's layer and its sublayers at the screen's scale, in the layer's own coordinates.
 static UIImage *ANNPictureOf(UIView *view) {
     CGSize size = view.bounds.size;
@@ -121,6 +215,30 @@ static UIImage *ANNPictureOf(UIView *view) {
     }];
 }
 
+// A layer at `frame` in its superlayer: its bounds and its position (its anchor is its center).
+static void ANNPlaceLayer(CALayer *layer, CGRect frame) {
+    layer.bounds = CGRectMake(0, 0, frame.size.width, frame.size.height);
+    layer.position = CGPointMake(CGRectGetMidX(frame), CGRectGetMidY(frame));
+}
+
+// The core's animation of `keyPath` on `layer` (`ANNKeyframes`), under its key.
+static void ANNAddKeyframes(CALayer *layer, NSString *keyPath, NSArray *values,
+                            NSArray<NSNumber *> *times, NSTimeInterval length) {
+    CAKeyframeAnimation *animation = ANNKeyframes(keyPath, values, times, length);
+    if (animation) {
+        [layer addAnimation:animation forKey:ANNAnimationKey(keyPath)];
+    }
+}
+
+// The bounds and the position of a layer at `frame`, as values of its animations.
+static NSValue *ANNBoundsValue(CGRect frame) {
+    return [NSValue valueWithCGRect:CGRectMake(0, 0, frame.size.width, frame.size.height)];
+}
+
+static NSValue *ANNPositionValue(CGRect frame) {
+    return [NSValue valueWithCGPoint:CGPointMake(CGRectGetMidX(frame), CGRectGetMidY(frame))];
+}
+
 @implementation ANNSharedElementFlight {
     __weak UIView *_fromView;
     __weak UIView *_toView;
@@ -129,7 +247,9 @@ static UIImage *ANNPictureOf(UIView *view) {
     UIView *_copy;
     UIImageView *_fromPicture;
     UIImageView *_toPicture;
-    CAShapeLayer *_mask;
+    // The visible part of the copy: a plain layer with corners, as Core Animation can't animate a path whose corners
+    // change.
+    CALayer *_mask;
     ANNFlightEnd _from;
     ANNFlightEnd _to;
     ANNTrack *_track;
@@ -140,15 +260,10 @@ static UIImage *ANNPictureOf(UIView *view) {
     BOOL _restored;
 }
 
-+ (NSString *)textOf:(Text *)value {
-    NSString *text = [value withDefault:nil];
-    return [text isKindOfClass:NSString.class] && text.length > 0 ? text : nil;
-}
-
 + (BOOL)allTargetsFound:(NSArray<ANNSharedElementTransitionOptions *> *)pairs
-           arrivingRoot:(UIView *)arrivingRoot {
+                  views:(ANNTransitionViews *)views {
     for (ANNSharedElementTransitionOptions *pair in pairs) {
-        if (![ANNElementFinder viewWithNativeID:[self textOf:pair.toId] inView:arrivingRoot]) {
+        if (![views arrivingViewWithNativeID:ANNNativeIDOf(pair.toId)]) {
             return NO;
         }
     }
@@ -156,27 +271,31 @@ static UIImage *ANNPictureOf(UIView *view) {
 }
 
 + (NSArray<ANNSharedElementFlight *> *)
-       flightsOf:(NSArray<ANNSharedElementTransitionOptions *> *)pairs
-     leavingRoot:(UIView *)leavingRoot
-    arrivingRoot:(UIView *)arrivingRoot
-       container:(UIView *)container {
+    flightsOf:(NSArray<ANNSharedElementTransitionOptions *> *)pairs
+        views:(ANNTransitionViews *)views
+    container:(UIView *)container {
     NSMutableArray<ANNSharedElementFlight *> *flights = [NSMutableArray new];
     NSHashTable<UIView *> *taken = [NSHashTable weakObjectsHashTable];
     for (ANNSharedElementTransitionOptions *pair in pairs) {
-        UIView *from = [ANNElementFinder viewWithNativeID:[self textOf:pair.fromId]
-                                                   inView:leavingRoot];
-        UIView *to = [ANNElementFinder viewWithNativeID:[self textOf:pair.toId]
-                                                 inView:arrivingRoot];
+        NSString *fromId = ANNNativeIDOf(pair.fromId);
+        NSString *toId = ANNNativeIDOf(pair.toId);
+        UIView *from = [views leavingViewWithNativeID:fromId];
+        UIView *to = [views arrivingViewWithNativeID:toId];
         if (!from || !to || from == to || [taken containsObject:from] ||
             [taken containsObject:to]) {
             continue;
         }
-        ANNSharedElementFlight *flight = [[self alloc] initWithPair:pair
-                                                               from:from
-                                                                 to:to
-                                                        leavingRoot:leavingRoot
-                                                       arrivingRoot:arrivingRoot
-                                                          container:container];
+        NSString *name = [NSString stringWithFormat:@"'%@' -> '%@'", fromId, toId];
+        __block ANNSharedElementFlight *flight = nil;
+        ANNElementStep(name, ^{
+          flight = [[self alloc] initWithPair:pair
+                                         from:from
+                                           to:to
+                                  leavingRoot:views.leavingRoot
+                                 arrivingRoot:views.arrivingRoot
+                                    container:container
+                                         name:name];
+        });
         if (flight) {
             [taken addObject:from];
             [taken addObject:to];
@@ -193,10 +312,18 @@ static UIImage *ANNPictureOf(UIView *view) {
                           }
                           return a->_zIndex < b->_zIndex ? NSOrderedAscending : NSOrderedDescending;
                         }];
+    // A copy that can't take off goes away, and its pair's views show as they were.
+    NSMutableArray<ANNSharedElementFlight *> *flying = [NSMutableArray new];
     for (ANNSharedElementFlight *flight in ordered) {
-        [flight takeOffIn:container];
+        if (ANNElementStep(flight.name, ^{
+              [flight takeOffIn:container];
+            })) {
+            [flying addObject:flight];
+        } else {
+            [flight restore];
+        }
     }
-    return ordered;
+    return flying;
 }
 
 - (instancetype)initWithPair:(ANNSharedElementTransitionOptions *)pair
@@ -204,19 +331,32 @@ static UIImage *ANNPictureOf(UIView *view) {
                           to:(UIView *)to
                  leavingRoot:(UIView *)leavingRoot
                 arrivingRoot:(UIView *)arrivingRoot
-                   container:(UIView *)container {
+                   container:(UIView *)container
+                        name:(NSString *)name {
     // A view of no size gives no picture: the pair is skipped and both views stay as they are.
     if (from.bounds.size.width <= 0 || from.bounds.size.height <= 0 || to.bounds.size.width <= 0 ||
         to.bounds.size.height <= 0) {
+        ANNElementSkipped(name, @"a view of the pair has no size, it isn't laid out");
         return nil;
     }
     if (!(self = [super init])) {
         return nil;
     }
+    _name = [name copy];
     _fromView = from;
     _toView = to;
     _from = ANNFlightEndOf(from, leavingRoot, container);
     _to = ANNFlightEndOf(to, arrivingRoot, container);
+    // A place that isn't a number would stop the copy's layer with an exception at its first frame.
+    if (!ANNFlightEndIsFinite(_from) || !ANNFlightEndIsFinite(_to)) {
+        ANNElementSkipped(name, @"the place of a view of the pair can't be worked out");
+        return nil;
+    }
+    // A transform that flattens the view (a scale of 0) has no parts to fly between.
+    if (!ANNSplitFlightEnd(&_from) || !ANNSplitFlightEnd(&_to)) {
+        ANNElementSkipped(name, @"the transform of a view of the pair flattens it");
+        return nil;
+    }
     _text = ANNIsText(from) || ANNIsText(to);
     _grows = _to.size.height >= _from.size.height;
     _rightToLeft =
@@ -231,6 +371,7 @@ static UIImage *ANNPictureOf(UIView *view) {
     UIImage *fromImage = ANNPictureOf(from);
     UIImage *toImage = ANNPictureOf(to);
     if (!fromImage || !toImage) {
+        ANNElementSkipped(name, @"no picture of a view of the pair can be taken");
         return nil;
     }
     _copy = [UIView new];
@@ -243,7 +384,8 @@ static UIImage *ANNPictureOf(UIView *view) {
     // A text's pictures are neither clipped nor masked.
     _copy.clipsToBounds = !_text;
     if (!_text && (_from.clipped || _to.clipped)) {
-        _mask = [CAShapeLayer layer];
+        _mask = [CALayer layer];
+        _mask.backgroundColor = UIColor.blackColor.CGColor;
         _copy.layer.mask = _mask;
     }
     [_copy addSubview:_fromPicture];
@@ -260,71 +402,168 @@ static UIImage *ANNPictureOf(UIView *view) {
     [container addSubview:_copy];
     from.hidden = YES;
     to.hidden = YES;
-    [self applyAtTime:0];
+    [self placeAtTime:0];
 }
 
 - (UIView *)copyView {
     return _copy;
 }
 
-#pragma mark - ANNFrameClient
-
-- (NSTimeInterval)endTime {
-    return _track.endTime;
-}
-
-- (void)applyAtTime:(NSTimeInterval)time {
-    if (_restored) {
-        return;
-    }
+// The copy's whole state at `time`: its own geometry, its pictures' and its visible part's.
+- (ANNFlightState)stateAtTime:(NSTimeInterval)time {
+    ANNFlightState state;
     double f = [_track fractionAt:time];
-    CGSize size = ANNInterpolateSize(_from.size, _to.size, f);
-    _copy.layer.transform = CATransform3DIdentity;
-    _copy.bounds = CGRectMake(0, 0, size.width, size.height);
-    _copy.center = ANNInterpolatePoint(_from.center, _to.center, f);
-    _copy.layer.transform = ANNInterpolateTransform(_from.transform, _to.transform, f);
+    state.size = ANNInterpolateSize(_from.size, _to.size, f);
+    state.center = ANNInterpolatePoint(_from.center, _to.center, f);
+    state.transform = ANNTransformOfParts(ANNInterpolateTransformParts(_from.parts, _to.parts, f));
+    state.cornerRadius = 0;
+    state.mask = CGRectZero;
+    state.maskRadius = 0;
     if (_text) {
-        [self placeTextPicturesAtTime:time size:size];
-        return;
+        [self placeTextPicturesOf:&state atTime:time];
+        return state;
     }
-    _copy.layer.cornerRadius = ANNInterpolateNumber(_from.cornerRadius, _to.cornerRadius, f);
-    _fromPicture.frame = _copy.bounds;
-    _toPicture.frame = _copy.bounds;
-    _fromPicture.alpha = 1;
-    _toPicture.alpha = (CGFloat)f;
+    state.cornerRadius = ANNInterpolateNumber(_from.cornerRadius, _to.cornerRadius, f);
+    CGRect whole = CGRectMake(0, 0, state.size.width, state.size.height);
+    state.fromFrame = whole;
+    state.toFrame = whole;
+    state.fromAlpha = 1;
+    state.toAlpha = (CGFloat)f;
     if (_mask) {
         CGRect fromWhole = CGRectMake(0, 0, _from.size.width, _from.size.height);
         CGRect toWhole = CGRectMake(0, 0, _to.size.width, _to.size.height);
         CGRect fromVisible = _from.clipped ? _from.visible : fromWhole;
         CGRect toVisible = _to.clipped ? _to.visible : toWhole;
-        CGRect visible = ANNInterpolateRect(fromVisible, toVisible, f);
+        state.mask = ANNInterpolateRect(fromVisible, toVisible, f);
+        // At most half the shorter side, as a rounded path has it.
         CGFloat radius = ANNInterpolateNumber(_from.visibleRadius, _to.visibleRadius, f);
-        _mask.frame = _copy.bounds;
-        _mask.path = [UIBezierPath bezierPathWithRoundedRect:visible cornerRadius:radius].CGPath;
+        CGFloat half = MIN(state.mask.size.width, state.mask.size.height) / 2;
+        state.maskRadius = MAX(MIN(radius, half), 0);
     }
+    return state;
 }
 
 // The text's pictures keep their aspect at the height of the copy, at the line's start; they swap by the clock,
 // linearly, in the first quarter of the flight when the text grows, in the last when it shrinks.
-- (void)placeTextPicturesAtTime:(NSTimeInterval)time size:(CGSize)size {
-    for (UIImageView *picture in @[ _fromPicture, _toPicture ]) {
-        CGSize imageSize = picture.image.size;
-        CGFloat height = size.height;
+- (void)placeTextPicturesOf:(ANNFlightState *)state atTime:(NSTimeInterval)time {
+    CGRect frames[2];
+    UIImageView *pictures[2] = {_fromPicture, _toPicture};
+    for (int index = 0; index < 2; index++) {
+        CGSize imageSize = pictures[index].image.size;
+        CGFloat height = state->size.height;
         CGFloat width = imageSize.height > 0 ? imageSize.width * height / imageSize.height : 0;
-        CGFloat x = _rightToLeft ? size.width - width : 0;
-        picture.frame = CGRectMake(x, 0, width, height);
+        CGFloat x = _rightToLeft ? state->size.width - width : 0;
+        frames[index] = CGRectMake(x, 0, width, height);
     }
+    state->fromFrame = frames[0];
+    state->toFrame = frames[1];
+    double swap = [self swapAtTime:time];
+    state->fromAlpha = (CGFloat)(1 - swap);
+    state->toAlpha = (CGFloat)swap;
+}
+
+// The quarter of the flight the text's pictures swap in.
+- (NSTimeInterval)swapStart {
     NSTimeInterval duration = _track.duration;
-    NSTimeInterval quarter = duration / 4;
-    NSTimeInterval start = _track.delay + (_grows ? 0 : duration - quarter);
-    double swap;
+    return _track.delay + (_grows ? 0 : duration - duration / 4);
+}
+
+- (double)swapAtTime:(NSTimeInterval)time {
+    NSTimeInterval quarter = _track.duration / 4;
     if (quarter <= 0) {
-        swap = time >= _track.delay ? 1 : 0;
-    } else {
-        swap = MIN(MAX((time - start) / quarter, 0.0), 1.0);
+        return time >= _track.delay ? 1 : 0;
+    }
+    return MIN(MAX((time - [self swapStart]) / quarter, 0.0), 1.0);
+}
+
+// The copy shows its state at `time` (its own values, with no animation).
+- (void)placeAtTime:(NSTimeInterval)time {
+    ANNFlightState state = [self stateAtTime:time];
+    [CATransaction begin];
+    [CATransaction setDisableActions:YES];
+    _copy.layer.transform = CATransform3DIdentity;
+    _copy.bounds = CGRectMake(0, 0, state.size.width, state.size.height);
+    _copy.center = state.center;
+    _copy.layer.transform = state.transform;
+    if (!_text) {
+        _copy.layer.cornerRadius = state.cornerRadius;
+    }
+    ANNPlaceLayer(_fromPicture.layer, state.fromFrame);
+    ANNPlaceLayer(_toPicture.layer, state.toFrame);
+    _fromPicture.alpha = state.fromAlpha;
+    _toPicture.alpha = state.toAlpha;
+    if (_mask) {
+        ANNPlaceLayer(_mask, state.mask);
+        _mask.cornerRadius = state.maskRadius;
+    }
+    [CATransaction commit];
+}
+
+#pragma mark - ANNFrameClient
+
+- (NSTimeInterval)endTime {
+    return _track.endTime;
+}
+
+- (void)addAnimationsWithLength:(NSTimeInterval)length {
+    if (_restored) {
+        return;
+    }
+    NSMutableArray<NSNumber *> *marks =
+        [NSMutableArray arrayWithObjects:@(_track.delay), @(_track.endTime), nil];
+    if (_text) {
+        [marks addObject:@([self swapStart])];
+        [marks addObject:@([self swapStart] + _track.duration / 4)];
+    }
+    NSArray<NSNumber *> *times = ANNSampleTimes(_track.endTime, length, marks);
+    NSMutableArray *bounds = [NSMutableArray new];
+    NSMutableArray *positions = [NSMutableArray new];
+    NSMutableArray *transforms = [NSMutableArray new];
+    NSMutableArray *radii = [NSMutableArray new];
+    NSMutableArray *fromBounds = [NSMutableArray new];
+    NSMutableArray *fromPositions = [NSMutableArray new];
+    NSMutableArray *fromAlphas = [NSMutableArray new];
+    NSMutableArray *toBounds = [NSMutableArray new];
+    NSMutableArray *toPositions = [NSMutableArray new];
+    NSMutableArray *toAlphas = [NSMutableArray new];
+    NSMutableArray *maskBounds = [NSMutableArray new];
+    NSMutableArray *maskPositions = [NSMutableArray new];
+    NSMutableArray *maskRadii = [NSMutableArray new];
+    for (NSNumber *time in times) {
+        ANNFlightState state = [self stateAtTime:time.doubleValue];
+        CGRect whole = CGRectMake(0, 0, state.size.width, state.size.height);
+        [bounds addObject:ANNBoundsValue(whole)];
+        [positions addObject:[NSValue valueWithCGPoint:state.center]];
+        [transforms addObject:[NSValue valueWithCATransform3D:state.transform]];
+        [radii addObject:@(state.cornerRadius)];
+        [fromBounds addObject:ANNBoundsValue(state.fromFrame)];
+        [fromPositions addObject:ANNPositionValue(state.fromFrame)];
+        [fromAlphas addObject:@(state.fromAlpha)];
+        [toBounds addObject:ANNBoundsValue(state.toFrame)];
+        [toPositions addObject:ANNPositionValue(state.toFrame)];
+        [toAlphas addObject:@(state.toAlpha)];
+        [maskBounds addObject:ANNBoundsValue(state.mask)];
+        [maskPositions addObject:ANNPositionValue(state.mask)];
+        [maskRadii addObject:@(state.maskRadius)];
+    }
+    CALayer *copy = _copy.layer;
+    ANNAddKeyframes(copy, @"bounds", bounds, times, length);
+    ANNAddKeyframes(copy, @"position", positions, times, length);
+    ANNAddKeyframes(copy, @"transform", transforms, times, length);
+    if (!_text) {
+        ANNAddKeyframes(copy, @"cornerRadius", radii, times, length);
+    }
+    ANNAddKeyframes(_fromPicture.layer, @"bounds", fromBounds, times, length);
+    ANNAddKeyframes(_fromPicture.layer, @"position", fromPositions, times, length);
+    ANNAddKeyframes(_fromPicture.layer, @"opacity", fromAlphas, times, length);
+    ANNAddKeyframes(_toPicture.layer, @"bounds", toBounds, times, length);
+    ANNAddKeyframes(_toPicture.layer, @"position", toPositions, times, length);
+    ANNAddKeyframes(_toPicture.layer, @"opacity", toAlphas, times, length);
+    if (_mask) {
+        ANNAddKeyframes(_mask, @"bounds", maskBounds, times, length);
+        ANNAddKeyframes(_mask, @"position", maskPositions, times, length);
+        ANNAddKeyframes(_mask, @"cornerRadius", maskRadii, times, length);
     }
-    _fromPicture.alpha = (CGFloat)(1 - swap);
-    _toPicture.alpha = (CGFloat)swap;
 }
 
 - (void)restore {

package/ios/Animations/Interpolators/ANNInterpolate.h

@@ -5,7 +5,8 @@ NS_ASSUME_NONNULL_BEGIN
 
 // The interpolation of values: from + f·(to − from) per component, where f is the share of the way a track gives
 // (`ANNTrack fractionAt:`); exactly `from` at f = 0 and exactly `to` at f = 1, whatever the floating point would give.
-// iOS never interpolates colors: a shared element flies as pictures.
+// iOS never interpolates colors: a shared element flies as pictures. A transform goes by its parts
+// (`ANNTransformParts`).
 
 /// A number.
 static inline CGFloat ANNInterpolateNumber(CGFloat from, CGFloat to, double f) {
@@ -37,33 +38,4 @@ static inline CGRect ANNInterpolateRect(CGRect from, CGRect to, double f) {
     return CGRectMake(origin.x, origin.y, size.width, size.height);
 }
 
-/// A 4×4 transform, element by element (a shared element with a `transform` style, as iOS does it now).
-static inline CATransform3D ANNInterpolateTransform(CATransform3D from, CATransform3D to,
-                                                    double f) {
-    if (f == 0) {
-        return from;
-    }
-    if (f == 1) {
-        return to;
-    }
-    CATransform3D t;
-    t.m11 = ANNInterpolateNumber(from.m11, to.m11, f);
-    t.m12 = ANNInterpolateNumber(from.m12, to.m12, f);
-    t.m13 = ANNInterpolateNumber(from.m13, to.m13, f);
-    t.m14 = ANNInterpolateNumber(from.m14, to.m14, f);
-    t.m21 = ANNInterpolateNumber(from.m21, to.m21, f);
-    t.m22 = ANNInterpolateNumber(from.m22, to.m22, f);
-    t.m23 = ANNInterpolateNumber(from.m23, to.m23, f);
-    t.m24 = ANNInterpolateNumber(from.m24, to.m24, f);
-    t.m31 = ANNInterpolateNumber(from.m31, to.m31, f);
-    t.m32 = ANNInterpolateNumber(from.m32, to.m32, f);
-    t.m33 = ANNInterpolateNumber(from.m33, to.m33, f);
-    t.m34 = ANNInterpolateNumber(from.m34, to.m34, f);
-    t.m41 = ANNInterpolateNumber(from.m41, to.m41, f);
-    t.m42 = ANNInterpolateNumber(from.m42, to.m42, f);
-    t.m43 = ANNInterpolateNumber(from.m43, to.m43, f);
-    t.m44 = ANNInterpolateNumber(from.m44, to.m44, f);
-    return t;
-}
-
 NS_ASSUME_NONNULL_END

package/ios/Animations/Interpolators/ANNTransformParts.h

@@ -0,0 +1,48 @@
+#import <QuartzCore/QuartzCore.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// A 4×4 transform split into the parts it is made of (the decomposition of CSS Transforms Level 2): applied to a point
+/// in the order scale, skew, rotation, translation, perspective. Two transforms interpolate part by part, the rotation
+/// along the shorter arc between the two (a quaternion's slerp), so a rotation never collapses on the way.
+typedef struct {
+    double translate[3];
+    double scale[3];
+    /// The shears xy, xz, yz.
+    double skew[3];
+    double perspective[4];
+    /// x, y, z, w.
+    double quaternion[4];
+} ANNTransformParts;
+
+/// The parts of no transform.
+FOUNDATION_EXPORT ANNTransformParts ANNTransformPartsIdentity(void);
+
+/// The parts of `transform` into `parts`; NO when it can't be split (a scale of 0 flattens it).
+FOUNDATION_EXPORT BOOL ANNTransformPartsOf(CATransform3D transform, ANNTransformParts *parts);
+
+/// The transform the parts make.
+FOUNDATION_EXPORT CATransform3D ANNTransformOfParts(ANNTransformParts parts);
+
+/// The parts at `f` of the way: each number from + f·(to − from), the rotation by slerp along the shorter arc; exactly
+/// `from` at f = 0 and `to` at f = 1. Two rotations half a turn apart go either way.
+FOUNDATION_EXPORT ANNTransformParts ANNInterpolateTransformParts(ANNTransformParts from,
+                                                                 ANNTransformParts to, double f);
+
+/// The rotation of the parts as the turns about x, then y, then z (degrees, each in −180…180), the order a view's
+/// tracks compose them in (`ANNViewTracks`).
+FOUNDATION_EXPORT void ANNRotationDegreesOf(ANNTransformParts parts, double *x, double *y,
+                                           double *z);
+
+/// The shears of the parts as a transform of their own (the scale, rotation and the rest aside).
+FOUNDATION_EXPORT CATransform3D ANNSkewTransformOf(ANNTransformParts parts);
+
+#if DEBUG
+/// Development only (there is no iOS test target): splits and rebuilds known transforms and checks the rotations a
+/// shared element takes (0° → 90°, 0° → 180°, 45° → −45°, 270°, 170° → −170°, a scale, a tilt), once; a mismatch is
+/// logged.
+FOUNDATION_EXPORT void ANNTransformPartsSelfCheck(void);
+#endif
+
+NS_ASSUME_NONNULL_END