@nativescript/core 8.5.0 → 8.5.1-next-04-22-2023-4770720184

package/ui/transition/shared-transition-helper.ios.js

@@ -1,24 +1,22 @@
 import { getPageStartDefaultsForType, getRectFromProps, getSpringFromProps, SharedTransition, SharedTransitionAnimationType } from './shared-transition';
 import { isNumber } from '../../utils/types';
 import { Screen } from '../../platform';
+import { CORE_ANIMATION_DEFAULTS } from '../../utils/common';
 import { iOSNativeHelper } from '../../utils/native-helper';
 export class SharedTransitionHelper {
     static animate(state, transitionContext, type) {
         const transition = state.instance;
-        setTimeout(() => {
+        setTimeout(async () => {
             // Run on next tick
             // ensures that existing UI state finishes before snapshotting
             // (eg, button touch up state)
             switch (state.activeType) {
                 case SharedTransitionAnimationType.present: {
                     // console.log('-- Transition present --');
-                    SharedTransition.events().notify({
-                        eventName: SharedTransition.startedEvent,
-                        data: {
-                            id: transition.id,
-                            type,
-                            action: 'present',
-                        },
+                    SharedTransition.notifyEvent(SharedTransition.startedEvent, {
+                        id: transition.id,
+                        type,
+                        action: 'present',
                     });
                     if (type === 'modal') {
                         transitionContext.containerView.addSubview(transition.presented.view);
@@ -28,6 +26,7 @@ export class SharedTransitionHelper {
                     }
                     transition.presented.view.layoutIfNeeded();
                     const { sharedElements, presented, presenting } = SharedTransition.getSharedElements(state.page, state.toPage);
+                    const sharedElementTags = sharedElements.map((v) => v.sharedTransitionTag);
                     if (!transition.sharedElements) {
                         transition.sharedElements = {
                             presented: [],
@@ -37,130 +36,164 @@ export class SharedTransitionHelper {
                     }
                     if (SharedTransition.DEBUG) {
                         console.log(`  ${type}: Present`);
-                        console.log(`1. Found sharedTransitionTags to animate:`, sharedElements.map((v) => v.sharedTransitionTag));
+                        console.log(`1. Found sharedTransitionTags to animate:`, sharedElementTags);
                         console.log(`2. Take snapshots of shared elements and position them based on presenting view:`);
                     }
                     const pageStart = state.pageStart;
                     const startFrame = getRectFromProps(pageStart, getPageStartDefaultsForType(type));
                     const pageEnd = state.pageEnd;
-                    const pageEndIndependentTags = Object.keys(pageEnd?.sharedTransitionTags || {});
+                    const pageEndTags = pageEnd?.sharedTransitionTags || {};
                     // console.log('pageEndIndependentTags:', pageEndIndependentTags);
-                    for (const presentingView of sharedElements) {
-                        const presentingSharedElement = presentingView.ios;
-                        // console.log('fromTarget instanceof UIImageView:', fromTarget instanceof UIImageView)
-                        // TODO: discuss whether we should check if UIImage/UIImageView type to always snapshot images or if other view types could be duped/added vs. snapshotted
-                        // Note: snapshot may be most efficient/simple
-                        // console.log('---> ', presentingView.sharedTransitionTag, ': ', presentingSharedElement)
-                        const presentedView = presented.find((v) => v.sharedTransitionTag === presentingView.sharedTransitionTag);
-                        const presentedSharedElement = presentedView.ios;
-                        const snapshot = UIImageView.alloc().init();
-                        // treat images differently...
-                        if (presentedSharedElement instanceof UIImageView) {
-                            // in case the image is loaded async, we need to update the snapshot when it changes
-                            // todo: remove listener on transition end
-                            presentedView.on('imageSourceChange', () => {
-                                snapshot.image = iOSNativeHelper.snapshotView(presentedSharedElement, Screen.mainScreen.scale);
+                    const positionSharedTags = async () => {
+                        for (const presentingView of sharedElements) {
+                            const presentingSharedElement = presentingView.ios;
+                            // console.log('fromTarget instanceof UIImageView:', fromTarget instanceof UIImageView)
+                            // TODO: discuss whether we should check if UIImage/UIImageView type to always snapshot images or if other view types could be duped/added vs. snapshotted
+                            // Note: snapshot may be most efficient/simple
+                            // console.log('---> ', presentingView.sharedTransitionTag, ': ', presentingSharedElement)
+                            const presentedView = presented.find((v) => v.sharedTransitionTag === presentingView.sharedTransitionTag);
+                            const presentedSharedElement = presentedView.ios;
+                            const pageEndProps = pageEndTags[presentingView.sharedTransitionTag];
+                            const snapshot = UIImageView.alloc().init();
+                            if (pageEndProps?.callback) {
+                                await pageEndProps?.callback(presentedView, 'present');
+                            }
+                            // treat images differently...
+                            if (presentedSharedElement instanceof UIImageView) {
+                                // in case the image is loaded async, we need to update the snapshot when it changes
+                                // todo: remove listener on transition end
+                                presentedView.on('imageSourceChange', () => {
+                                    snapshot.image = iOSNativeHelper.snapshotView(presentedSharedElement, Screen.mainScreen.scale);
+                                    snapshot.tintColor = presentedSharedElement.tintColor;
+                                });
                                 snapshot.tintColor = presentedSharedElement.tintColor;
+                                snapshot.contentMode = presentedSharedElement.contentMode;
+                            }
+                            iOSNativeHelper.copyLayerProperties(snapshot, presentingSharedElement, pageEndProps?.propertiesToMatch);
+                            snapshot.clipsToBounds = true;
+                            // console.log('---> snapshot: ', snapshot);
+                            const startFrame = presentingSharedElement.convertRectToView(presentingSharedElement.bounds, transitionContext.containerView);
+                            const endFrame = presentedSharedElement.convertRectToView(presentedSharedElement.bounds, transitionContext.containerView);
+                            snapshot.frame = startFrame;
+                            if (SharedTransition.DEBUG) {
+                                console.log('---> ', presentingView.sharedTransitionTag, ' frame:', iOSNativeHelper.printCGRect(snapshot.frame));
+                            }
+                            transition.sharedElements.presenting.push({
+                                view: presentingView,
+                                startFrame,
+                                endFrame,
+                                snapshot,
+                                startOpacity: presentingView.opacity,
+                                endOpacity: isNumber(pageEndProps?.opacity) ? pageEndProps.opacity : presentedView.opacity,
+                                propertiesToMatch: pageEndProps?.propertiesToMatch,
+                                zIndex: isNumber(pageEndProps?.zIndex) ? pageEndProps.zIndex : 0,
                             });
-                            snapshot.tintColor = presentedSharedElement.tintColor;
-                            snapshot.contentMode = presentedSharedElement.contentMode;
-                        }
-                        iOSNativeHelper.copyLayerProperties(snapshot, presentingSharedElement);
-                        snapshot.clipsToBounds = true;
-                        // console.log('---> snapshot: ', snapshot);
-                        const startFrame = presentingSharedElement.convertRectToView(presentingSharedElement.bounds, transitionContext.containerView);
-                        const endFrame = presentedSharedElement.convertRectToView(presentedSharedElement.bounds, transitionContext.containerView);
-                        snapshot.frame = startFrame;
-                        if (SharedTransition.DEBUG) {
-                            console.log('---> ', presentingView.sharedTransitionTag, ' frame:', iOSNativeHelper.printCGRect(snapshot.frame));
+                            transition.sharedElements.presented.push({
+                                view: presentedView,
+                                startFrame: endFrame,
+                                endFrame: startFrame,
+                                startOpacity: presentedView.opacity,
+                                endOpacity: presentingView.opacity,
+                                propertiesToMatch: pageEndProps?.propertiesToMatch,
+                            });
+                            // set initial opacity to match the source view opacity
+                            snapshot.alpha = presentingView.opacity;
+                            // hide both while animating within the transition context
+                            presentingView.opacity = 0;
+                            presentedView.opacity = 0;
                         }
-                        transition.sharedElements.presenting.push({
-                            view: presentingView,
-                            startFrame,
-                            endFrame,
-                            snapshot,
-                            startOpacity: presentingView.opacity,
-                            endOpacity: presentedView.opacity,
-                        });
-                        transition.sharedElements.presented.push({
-                            view: presentedView,
-                            startFrame: endFrame,
-                            endFrame: startFrame,
-                            startOpacity: presentedView.opacity,
-                            endOpacity: presentingView.opacity,
-                        });
-                        // set initial opacity to match the source view opacity
-                        snapshot.alpha = presentingView.opacity;
-                        // hide both while animating within the transition context
-                        presentingView.opacity = 0;
-                        presentedView.opacity = 0;
-                        // add snapshot to animate
-                        transitionContext.containerView.addSubview(snapshot);
-                    }
-                    for (const tag of pageEndIndependentTags) {
-                        // only consider start when there's a matching end
-                        const pageStartIndependentProps = pageStart?.sharedTransitionTags ? pageStart?.sharedTransitionTags[tag] : null;
-                        // console.log('start:', tag, pageStartIndependentProps);
-                        const pageEndIndependentProps = pageEnd?.sharedTransitionTags[tag];
-                        let independentView = presenting.find((v) => v.sharedTransitionTag === tag);
-                        let isPresented = false;
-                        if (!independentView) {
-                            independentView = presented.find((v) => v.sharedTransitionTag === tag);
-                            if (!independentView) {
-                                break;
+                    };
+                    const positionIndependentTags = async () => {
+                        // independent tags
+                        for (const tag in pageEndTags) {
+                            // only handle if independent (otherwise it's shared between both pages and handled above)
+                            if (!sharedElementTags.includes(tag)) {
+                                // only consider start when there's a matching end
+                                const pageStartIndependentProps = pageStart?.sharedTransitionTags ? pageStart?.sharedTransitionTags[tag] : null;
+                                // console.log('start:', tag, pageStartIndependentProps);
+                                const pageEndProps = pageEndTags[tag];
+                                let independentView = presenting.find((v) => v.sharedTransitionTag === tag);
+                                let isPresented = false;
+                                if (!independentView) {
+                                    independentView = presented.find((v) => v.sharedTransitionTag === tag);
+                                    if (!independentView) {
+                                        break;
+                                    }
+                                    isPresented = true;
+                                }
+                                const independentSharedElement = independentView.ios;
+                                if (pageEndProps?.callback) {
+                                    await pageEndProps?.callback(independentView, 'present');
+                                }
+                                let snapshot;
+                                // if (isPresented) {
+                                // 	snapshot = UIImageView.alloc().init();
+                                // } else {
+                                snapshot = UIImageView.alloc().initWithImage(iOSNativeHelper.snapshotView(independentSharedElement, Screen.mainScreen.scale));
+                                // }
+                                if (independentSharedElement instanceof UIImageView) {
+                                    // in case the image is loaded async, we need to update the snapshot when it changes
+                                    // todo: remove listener on transition end
+                                    // if (isPresented) {
+                                    // 	independentView.on('imageSourceChange', () => {
+                                    // 		snapshot.image = iOSNativeHelper.snapshotView(independentSharedElement, Screen.mainScreen.scale);
+                                    // 		snapshot.tintColor = independentSharedElement.tintColor;
+                                    // 	});
+                                    // }
+                                    snapshot.tintColor = independentSharedElement.tintColor;
+                                    snapshot.contentMode = independentSharedElement.contentMode;
+                                }
+                                snapshot.clipsToBounds = true;
+                                const startFrame = independentSharedElement.convertRectToView(independentSharedElement.bounds, transitionContext.containerView);
+                                const startFrameRect = getRectFromProps(pageStartIndependentProps);
+                                // adjust for any specified start positions
+                                const startFrameAdjusted = CGRectMake(startFrame.origin.x + startFrameRect.x, startFrame.origin.y + startFrameRect.y, startFrame.size.width, startFrame.size.height);
+                                // console.log('startFrameAdjusted:', tag, iOSNativeHelper.printCGRect(startFrameAdjusted));
+                                // if (pageStartIndependentProps?.scale) {
+                                // 	snapshot.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(startFrameAdjusted.origin.x, startFrameAdjusted.origin.y), CGAffineTransformMakeScale(pageStartIndependentProps.scale.x, pageStartIndependentProps.scale.y))
+                                // } else {
+                                snapshot.frame = startFrame; //startFrameAdjusted;
+                                // }
+                                if (SharedTransition.DEBUG) {
+                                    console.log('---> ', independentView.sharedTransitionTag, ' frame:', iOSNativeHelper.printCGRect(snapshot.frame));
+                                }
+                                const endFrameRect = getRectFromProps(pageEndProps);
+                                const endFrame = CGRectMake(startFrame.origin.x + endFrameRect.x, startFrame.origin.y + endFrameRect.y, startFrame.size.width, startFrame.size.height);
+                                // console.log('endFrame:', tag, iOSNativeHelper.printCGRect(endFrame));
+                                transition.sharedElements.independent.push({
+                                    view: independentView,
+                                    isPresented,
+                                    startFrame,
+                                    snapshot,
+                                    endFrame,
+                                    startTransform: independentSharedElement.transform,
+                                    scale: pageEndProps.scale,
+                                    startOpacity: independentView.opacity,
+                                    endOpacity: isNumber(pageEndProps.opacity) ? pageEndProps.opacity : 0,
+                                    propertiesToMatch: pageEndProps?.propertiesToMatch,
+                                    zIndex: isNumber(pageEndProps?.zIndex) ? pageEndProps.zIndex : 0,
+                                });
+                                independentView.opacity = 0;
                             }
-                            isPresented = true;
-                        }
-                        const independentSharedElement = independentView.ios;
-                        let snapshot;
-                        // if (isPresented) {
-                        // 	snapshot = UIImageView.alloc().init();
-                        // } else {
-                        snapshot = UIImageView.alloc().initWithImage(iOSNativeHelper.snapshotView(independentSharedElement, Screen.mainScreen.scale));
-                        // }
-                        if (independentSharedElement instanceof UIImageView) {
-                            // in case the image is loaded async, we need to update the snapshot when it changes
-                            // todo: remove listener on transition end
-                            // if (isPresented) {
-                            // 	independentView.on('imageSourceChange', () => {
-                            // 		snapshot.image = iOSNativeHelper.snapshotView(independentSharedElement, Screen.mainScreen.scale);
-                            // 		snapshot.tintColor = independentSharedElement.tintColor;
-                            // 	});
-                            // }
-                            snapshot.tintColor = independentSharedElement.tintColor;
-                            snapshot.contentMode = independentSharedElement.contentMode;
                         }
-                        snapshot.clipsToBounds = true;
-                        const startFrame = independentSharedElement.convertRectToView(independentSharedElement.bounds, transitionContext.containerView);
-                        const startFrameRect = getRectFromProps(pageStartIndependentProps);
-                        // adjust for any specified start positions
-                        const startFrameAdjusted = CGRectMake(startFrame.origin.x + startFrameRect.x, startFrame.origin.y + startFrameRect.y, startFrame.size.width, startFrame.size.height);
-                        // console.log('startFrameAdjusted:', tag, iOSNativeHelper.printCGRect(startFrameAdjusted));
-                        // if (pageStartIndependentProps?.scale) {
-                        // 	snapshot.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(startFrameAdjusted.origin.x, startFrameAdjusted.origin.y), CGAffineTransformMakeScale(pageStartIndependentProps.scale.x, pageStartIndependentProps.scale.y))
-                        // } else {
-                        snapshot.frame = startFrame; //startFrameAdjusted;
-                        // }
-                        if (SharedTransition.DEBUG) {
-                            console.log('---> ', independentView.sharedTransitionTag, ' frame:', iOSNativeHelper.printCGRect(snapshot.frame));
-                        }
-                        const endFrameRect = getRectFromProps(pageEndIndependentProps);
-                        const endFrame = CGRectMake(startFrame.origin.x + endFrameRect.x, startFrame.origin.y + endFrameRect.y, startFrame.size.width, startFrame.size.height);
-                        // console.log('endFrame:', tag, iOSNativeHelper.printCGRect(endFrame));
-                        transition.sharedElements.independent.push({
-                            view: independentView,
-                            isPresented,
-                            startFrame,
-                            snapshot,
-                            endFrame,
-                            startTransform: independentSharedElement.transform,
-                            scale: pageEndIndependentProps.scale,
-                            startOpacity: independentView.opacity,
-                            endOpacity: isNumber(pageEndIndependentProps.opacity) ? pageEndIndependentProps.opacity : 0,
-                        });
-                        independentView.opacity = 0;
+                    };
+                    // position all sharedTransitionTag elements
+                    await positionSharedTags();
+                    await positionIndependentTags();
+                    // combine to order by zIndex and add to transition context
+                    const snapshotData = transition.sharedElements.presenting.concat(transition.sharedElements.independent);
+                    snapshotData.sort((a, b) => (a.zIndex > b.zIndex ? 1 : -1));
+                    if (SharedTransition.DEBUG) {
+                        console.log(`zIndex settings:`, snapshotData.map((s) => {
+                            return {
+                                sharedTransitionTag: s.view.sharedTransitionTag,
+                                zIndex: s.zIndex,
+                            };
+                        }));
+                    }
+                    for (const data of snapshotData) {
                         // add snapshot to animate
-                        transitionContext.containerView.addSubview(snapshot);
+                        transitionContext.containerView.addSubview(data.snapshot);
                     }
                     // Important: always set after above shared element positions have had their start positions set
                     transition.presented.view.alpha = isNumber(pageStart?.opacity) ? pageStart?.opacity : 0;
@@ -185,13 +218,10 @@ export class SharedTransitionHelper {
                             transition.presenting.view.removeFromSuperview();
                         }
                         transitionContext.completeTransition(true);
-                        SharedTransition.events().notify({
-                            eventName: SharedTransition.finishedEvent,
-                            data: {
-                                id: transition?.id,
-                                type,
-                                action: 'present',
-                            },
+                        SharedTransition.notifyEvent(SharedTransition.finishedEvent, {
+                            id: transition.id,
+                            type,
+                            action: 'present',
                         });
                     };
                     const animateProperties = () => {
@@ -215,7 +245,7 @@ export class SharedTransitionHelper {
                             const correctedEndFrame = CGRectMake(updatedEndFrame.origin.x, updatedEndFrame.origin.y, presentingMatch.endFrame.size.width, presentingMatch.endFrame.size.height);
                             presentingMatch.snapshot.frame = correctedEndFrame;
                             // apply view and layer properties to the snapshot view to match the source/presented view
-                            iOSNativeHelper.copyLayerProperties(presentingMatch.snapshot, presented.view.ios);
+                            iOSNativeHelper.copyLayerProperties(presentingMatch.snapshot, presented.view.ios, presented.propertiesToMatch);
                             // create a snapshot of the presented view
                             presentingMatch.snapshot.image = iOSNativeHelper.snapshotView(presented.view.ios, Screen.mainScreen.scale);
                             // apply correct alpha
@@ -244,7 +274,7 @@ export class SharedTransitionHelper {
                     };
                     if (isNumber(pageEnd?.duration)) {
                         // override spring and use only linear animation
-                        UIView.animateWithDurationAnimationsCompletion(pageEnd?.duration / 1000, () => {
+                        UIView.animateWithDurationDelayOptionsAnimationsCompletion(pageEnd?.duration / 1000, 0, 0 /* UIViewAnimationOptions.CurveEaseInOut */, () => {
                             animateProperties();
                         }, () => {
                             cleanupPresent();
@@ -265,13 +295,10 @@ export class SharedTransitionHelper {
                 }
                 case SharedTransitionAnimationType.dismiss: {
                     // console.log('-- Transition dismiss --');
-                    SharedTransition.events().notify({
-                        eventName: SharedTransition.startedEvent,
-                        data: {
-                            id: transition?.id,
-                            type,
-                            action: 'dismiss',
-                        },
+                    SharedTransition.notifyEvent(SharedTransition.startedEvent, {
+                        id: transition.id,
+                        type,
+                        action: 'dismiss',
                     });
                     if (type === 'page') {
                         transitionContext.containerView.insertSubviewBelowSubview(transition.presenting.view, transition.presented.view);
@@ -282,18 +309,53 @@ export class SharedTransitionHelper {
                         console.log(`1. Dismiss sharedTransitionTags to animate:`, transition.sharedElements.presented.map((p) => p.view.sharedTransitionTag));
                         console.log(`2. Add back previously stored sharedElements to dismiss:`);
                     }
+                    const pageEnd = state.pageEnd;
+                    const pageEndTags = pageEnd?.sharedTransitionTags || {};
+                    const pageReturn = state.pageReturn;
                     for (const p of transition.sharedElements.presented) {
                         p.view.opacity = 0;
                     }
-                    for (const p of transition.sharedElements.presenting) {
-                        p.snapshot.alpha = p.endOpacity;
-                        transitionContext.containerView.addSubview(p.snapshot);
+                    // combine to order by zIndex and add to transition context
+                    const snapshotData = transition.sharedElements.presenting.concat(transition.sharedElements.independent);
+                    snapshotData.sort((a, b) => (a.zIndex > b.zIndex ? 1 : -1));
+                    if (SharedTransition.DEBUG) {
+                        console.log(`zIndex settings:`, snapshotData.map((s) => {
+                            return {
+                                sharedTransitionTag: s.view.sharedTransitionTag,
+                                zIndex: s.zIndex,
+                            };
+                        }));
                     }
-                    for (const independent of transition.sharedElements.independent) {
-                        independent.snapshot.alpha = independent.endOpacity;
-                        transitionContext.containerView.addSubview(independent.snapshot);
+                    // first loop through all the shared elements and fire the callback
+                    for (const data of snapshotData) {
+                        const pageEndProps = pageEndTags[data.view.sharedTransitionTag];
+                        if (pageEndProps?.callback) {
+                            await pageEndProps?.callback(data.view, 'dismiss');
+                        }
+                    }
+                    // now that all the callbacks had their chance to run, we can take the snapshots
+                    for (const data of snapshotData) {
+                        const view = data.view.ios;
+                        const currentAlpha = view.alpha;
+                        if (pageReturn?.useStartOpacity) {
+                            // when desired, reset the alpha to the start value so the view is visible in the snapshot
+                            view.alpha = data.startOpacity;
+                        }
+                        // take a new snapshot
+                        data.snapshot.image = iOSNativeHelper.snapshotView(view, Screen.mainScreen.scale);
+                        // find the currently visible view with the same sharedTransitionTag
+                        const fromView = transition.sharedElements.presented.find((p) => p.view.sharedTransitionTag === data.view.sharedTransitionTag)?.view;
+                        if (fromView) {
+                            // match the snapshot frame to the current frame of the fromView
+                            data.snapshot.frame = fromView.ios.convertRectToView(fromView.ios.bounds, transitionContext.containerView);
+                        }
+                        // snapshot has been taken, we can restore the alpha
+                        view.alpha = currentAlpha;
+                        // we recalculate the startFrame because the view might have changed its position in the background
+                        data.startFrame = view.convertRectToView(view.bounds, transitionContext.containerView);
+                        // add snapshot to animate
+                        transitionContext.containerView.addSubview(data.snapshot);
                     }
-                    const pageReturn = state.pageReturn;
                     const cleanupDismiss = () => {
                         for (const presenting of transition.sharedElements.presenting) {
                             presenting.view.opacity = presenting.startOpacity;
@@ -306,13 +368,10 @@ export class SharedTransitionHelper {
                         SharedTransition.finishState(transition.id);
                         transition.sharedElements = null;
                         transitionContext.completeTransition(true);
-                        SharedTransition.events().notify({
-                            eventName: SharedTransition.finishedEvent,
-                            data: {
-                                id: transition?.id,
-                                type,
-                                action: 'dismiss',
-                            },
+                        SharedTransition.notifyEvent(SharedTransition.finishedEvent, {
+                            id: transition.id,
+                            type,
+                            action: 'dismiss',
                         });
                     };
                     const animateProperties = () => {
@@ -323,11 +382,11 @@ export class SharedTransitionHelper {
                         const endFrame = getRectFromProps(pageReturn, getPageStartDefaultsForType(type));
                         transition.presented.view.frame = CGRectMake(endFrame.x, endFrame.y, endFrame.width, endFrame.height);
                         for (const presenting of transition.sharedElements.presenting) {
-                            iOSNativeHelper.copyLayerProperties(presenting.snapshot, presenting.view.ios);
+                            iOSNativeHelper.copyLayerProperties(presenting.snapshot, presenting.view.ios, presenting.propertiesToMatch);
                             presenting.snapshot.frame = presenting.startFrame;
                             presenting.snapshot.alpha = presenting.startOpacity;
                             if (SharedTransition.DEBUG) {
-                                console.log(`---> ${presenting.view.sharedTransitionTag} animate to: `, iOSNativeHelper.printCGRect(presenting.startFrame));
+                                console.log(`---> ${presenting.view.sharedTransitionTag} animate to: `, iOSNativeHelper.printCGRect(presenting.snapshot.frame));
                             }
                         }
                         for (const independent of transition.sharedElements.independent) {
@@ -339,13 +398,13 @@ export class SharedTransitionHelper {
                                 independent.snapshot.frame = independent.startFrame;
                             }
                             if (SharedTransition.DEBUG) {
-                                console.log(`---> ${independent.view.sharedTransitionTag} animate to: `, iOSNativeHelper.printCGRect(independent.startFrame));
+                                console.log(`---> ${independent.view.sharedTransitionTag} animate to: `, iOSNativeHelper.printCGRect(independent.snapshot.frame));
                             }
                         }
                     };
                     if (isNumber(pageReturn?.duration)) {
                         // override spring and use only linear animation
-                        UIView.animateWithDurationAnimationsCompletion(pageReturn?.duration / 1000, () => {
+                        UIView.animateWithDurationDelayOptionsAnimationsCompletion(pageReturn?.duration / 1000, 0, 0 /* UIViewAnimationOptions.CurveEaseInOut */, () => {
                             animateProperties();
                         }, () => {
                             cleanupDismiss();
@@ -368,13 +427,10 @@ export class SharedTransitionHelper {
         });
     }
     static interactiveStart(state, interactiveState, type) {
-        SharedTransition.events().notify({
-            eventName: SharedTransition.startedEvent,
-            data: {
-                id: state?.instance?.id,
-                type,
-                action: 'interactiveStart',
-            },
+        SharedTransition.notifyEvent(SharedTransition.startedEvent, {
+            id: state.instance.id,
+            type,
+            action: 'interactiveStart',
         });
         switch (type) {
             case 'page':
@@ -397,7 +453,7 @@ export class SharedTransitionHelper {
             interactiveState.propertyAnimator = UIViewPropertyAnimator.alloc().initWithDurationDampingRatioAnimations(1, 1, () => {
                 for (const p of state.instance.sharedElements.presenting) {
                     p.snapshot.frame = p.startFrame;
-                    iOSNativeHelper.copyLayerProperties(p.snapshot, p.view.ios);
+                    iOSNativeHelper.copyLayerProperties(p.snapshot, p.view.ios, p.propertiesToMatch);
                     p.snapshot.alpha = 1;
                 }
                 state.instance.presented.view.alpha = isNumber(state.pageReturn?.opacity) ? state.pageReturn?.opacity : 0;
@@ -405,19 +461,16 @@ export class SharedTransitionHelper {
             });
         }
         interactiveState.propertyAnimator.fractionComplete = percent;
-        SharedTransition.events().notify({
-            eventName: SharedTransition.interactiveUpdateEvent,
-            data: {
-                id: state?.instance?.id,
-                type,
-                percent,
-            },
+        SharedTransition.notifyEvent(SharedTransition.interactiveUpdateEvent, {
+            id: state?.instance?.id,
+            type,
+            percent,
         });
     }
     static interactiveCancel(state, interactiveState, type) {
         if (state?.instance && interactiveState?.added && interactiveState?.propertyAnimator) {
             interactiveState.propertyAnimator.reversed = true;
-            const duration = isNumber(state.pageEnd?.duration) ? state.pageEnd?.duration / 1000 : 0.35;
+            const duration = isNumber(state.pageEnd?.duration) ? state.pageEnd?.duration / 1000 : CORE_ANIMATION_DEFAULTS.duration;
             interactiveState.propertyAnimator.continueAnimationWithTimingParametersDurationFactor(null, duration);
             setTimeout(() => {
                 for (const p of state.instance.sharedElements.presented) {
@@ -431,12 +484,13 @@ export class SharedTransitionHelper {
                 interactiveState.added = false;
                 interactiveState.transitionContext.cancelInteractiveTransition();
                 interactiveState.transitionContext.completeTransition(false);
-                SharedTransition.events().notify({
-                    eventName: SharedTransition.interactiveCancelledEvent,
-                    data: {
-                        id: state?.instance?.id,
-                        type,
-                    },
+                SharedTransition.updateState(state?.instance?.id, {
+                    interactiveBegan: false,
+                    interactiveCancelled: true,
+                });
+                SharedTransition.notifyEvent(SharedTransition.interactiveCancelledEvent, {
+                    id: state?.instance?.id,
+                    type,
                 });
             }, duration * 1000);
         }
@@ -444,7 +498,7 @@ export class SharedTransitionHelper {
     static interactiveFinish(state, interactiveState, type) {
         if (state?.instance && interactiveState?.added && interactiveState?.propertyAnimator) {
             interactiveState.propertyAnimator.reversed = false;
-            const duration = isNumber(state.pageReturn?.duration) ? state.pageReturn?.duration / 1000 : 0.35;
+            const duration = isNumber(state.pageReturn?.duration) ? state.pageReturn?.duration / 1000 : CORE_ANIMATION_DEFAULTS.duration;
             interactiveState.propertyAnimator.continueAnimationWithTimingParametersDurationFactor(null, duration);
             setTimeout(() => {
                 for (const presenting of state.instance.sharedElements.presenting) {
@@ -456,13 +510,10 @@ export class SharedTransitionHelper {
                 interactiveState.added = false;
                 interactiveState.transitionContext.finishInteractiveTransition();
                 interactiveState.transitionContext.completeTransition(true);
-                SharedTransition.events().notify({
-                    eventName: SharedTransition.finishedEvent,
-                    data: {
-                        id: state?.instance?.id,
-                        type,
-                        action: 'interactiveFinish',
-                    },
+                SharedTransition.notifyEvent(SharedTransition.finishedEvent, {
+                    id: state?.instance?.id,
+                    type,
+                    action: 'interactiveFinish',
                 });
             }, duration * 1000);
         }