共享元素过渡

import { SharedTransition, PageTransition } from '@nativescript/core'

page.frame.navigate({
  moduleName: `views/detail`,
  transition: SharedTransition.custom(new PageTransition()),
})

import { SharedTransition, ModalTransition } from '@nativescript/core'

page.showModal('views/modal', {
  transition: SharedTransition.custom(new ModalTransition()),
  closeCallback(args) {
    // ... modal closed
  },
})

SharedTransition.custom(new PageTransition(), {
  pageEnd: {
    opacity: 1,
    sharedTransitionTags: {
      spaceman: {
        opacity: 0,
        y: 20,
        scale: {
          x: 6,
          y: 6,
        },
      },
      title: {
        opacity: 0,
        x: -200,
      },
    },
  },
  // ...
})

SharedTransition.custom(
  transition: Transition,
  options?: SharedTransitionConfig
)

interface SharedTransitionConfig {
  /**
   * State applied to the incoming page transition on start
   */
  pageStart?: SharedTransitionPageProperties
  /**
   * State that the incoming page transitions to.
   */
  pageEnd?: SharedTransitionPageProperties
  /**
   * State that the outgoing page transitions to.
   * (from it's current state)
   */
  pageReturn?: SharedTransitionPageProperties & {
    /**
     * In some cases you may want the returning animation to start with the original opacity,
     * instead of beginning where it ended up on pageEnd.
     * Note: you can try enabling this property in cases where your return animation doesn't appear correct.
     */
    useStartOpacity?: boolean;
  };

  /** @ios - only supported on iOS */
  interactive?: {
    dismiss?: {
      /**
       * A threshold (percentage) that if exceeded by the pan gesture
       * will finish the transition once the touch is released.
       *
       * Default: 0.5
       */
      finishThreshold?: number
      /**
       * You can create your own percent formula used for determing
       * the interactive value. By default, we handle this with the
       * following formula:
       *
       *   eventData.deltaX / (eventData.ios.view.bounds.size.width / 2)
       *
       * @param eventData PanGestureEventData
       * @returns The percentage value to be used as the finish/cancel threshold
       */
      percentFormula?: (eventData: PanGestureEventData) => number
    }
  }
}

interface SharedProperties {
  x?: number
  y?: number
  width?: number
  height?: number
  opacity?: number
  scale?: {
    x?: number
    y?: number
  }
}

interface SharedTransitionTagProperties = SharedProperties & {
  /**
   * (iOS only) The visual stacking order where 0 is at the bottom.
   * Shared elements are stacked one on top of the other during each transition.
   * By default they are not ordered in any particular fashion.
   */
  zIndex?: number;
  /**
   * (iOS only) Collection of properties to match and animate on each shared element.
   *
   * Defaults to: {
   *   view: ['backgroundColor'],
   *   layer: ['cornerRadius', 'borderWidth', 'borderColor']
   * }
   *
   * Tip: Using an empty array, [], for view or layer will avoid copying any properties if desired.
   */
  propertiesToMatch?: {
    /**
     * View related properties
     */
    view?: Array<string>;
    /**
     * specific CALayer related properties
     */
    layer?: Array<string>;
  };
  /**
   * (iOS only) Ability to modify other visuals while handling the transition.
   * Callback will be fired before the shared element is positioned and added to the transition.
   * For example: scroll a CollectionView based on the element's position
   */
  callback?: (view: View, action: SharedTransitionEventAction) => Promise<void>;
};

type SharedTransitionPageProperties = SharedProperties & {
  /**
   * @ios - only supported on iOS
   * Allow "independent" elements found only on one of the
   * pages to take part in the animation.
   */
  sharedTransitionTags?: Record<string, SharedTransitionTagProperties>
  /**
   * Spring animation settings.
   * Defaults:
   *  tension: 140
   *  friction: 10
   */
  spring?: {
    tension?: number
    friction?: number
    mass?: number
    delay?: number
    velocity?: number
    /** @ios - UIViewAnimationOptions */
    animateOptions?: any
  }
}

SharedTransition.events(): Observable

interface SharedTransitionEventData {
  id: number // transition instance id
  type: 'page' | 'modal'
  action?: 'present' | 'dismiss' | 'interactiveStart' | 'interactiveFinish'
  percent?: number
}

SharedTransition.events().on(
  SharedTransition.finishedEvent,
  (data: SharedTransitionEventData) => {
    //
  }
)

SharedTransition.getSharedElements(fromPage: View, toPage: View): {
  sharedElements: Array<View>
  presented: Array<View>
  presenting: Array<View>
}

SharedTransition.getState(id: number): SharedTransitionState

interface SharedTransitionState extends SharedTransitionConfig {
  /**
   * @internal the preconfigured transition instance
   */
  instance?: Transition
  /**
   * the Page which will start the transition.
   */
  page?: ViewBase
  activeType?: SharedTransitionAnimationType
  toPage?: ViewBase
  /**
   * Whether interactive transition has began.
   */
  interactiveBegan?: boolean
  /**
   * Whether interactive transition was cancelled.
   */
  interactiveCancelled?: boolean
}

enum SharedTransitionAnimationType {
  present,
  dismiss,
}

SharedTransition.updateState(id: number, state: SharedTransitionState): void

SharedTransition.finishState(id: number): void