Browse Source

Add typed interface for customTransition (#4519)

Add typed interface for customTransition
Minh Tran 6 years ago
parent
commit
6c1414ee81
1 changed files with 54 additions and 1 deletions
  1. 54
    1
      lib/src/interfaces/Options.ts

+ 54
- 1
lib/src/interfaces/Options.ts View File

202
   color?: Color;
202
   color?: Color;
203
 }
203
 }
204
 
204
 
205
-export interface  OptionsTopBarBackground {
205
+export interface OptionsTopBarBackground {
206
   /**
206
   /**
207
    * Background color of the top bar
207
    * Background color of the top bar
208
    */
208
    */
711
   dismissModal?: OptionsAnimationProperties;
711
   dismissModal?: OptionsAnimationProperties;
712
 }
712
 }
713
 
713
 
714
+export interface OptionsCustomTransition {
715
+  animations: OptionsCustomTransitionAnimation[];
716
+  duration?: number;
717
+}
718
+
719
+export interface OptionsCustomTransitionAnimation {
720
+  /**
721
+   * Animation type, only support sharedElement currently
722
+   */
723
+  type: 'sharedElement';
724
+  /**
725
+   * Transition from element Id
726
+   */
727
+  fromId: string;
728
+  /**
729
+   * Transition to element Id
730
+   */
731
+  toId: string;
732
+  /**
733
+   * Animation delay
734
+   */
735
+  startDelay?: number;
736
+  /**
737
+   * Animation spring Velocity
738
+   */
739
+  springVelocity?: number;
740
+  /**
741
+   * Animation duration
742
+   */
743
+  duration?: number;
744
+}
745
+
714
 export interface Options {
746
 export interface Options {
715
   /**
747
   /**
716
    * Configure the status bar
748
    * Configure the status bar
772
 ```
804
 ```
773
    */
805
    */
774
   animations?: OptionsAnimations;
806
   animations?: OptionsAnimations;
807
+
808
+  /**
809
+   * Custom Transition used for animate shared element between two screens
810
+   * Example:
811
+  ```js
812
+  Navigation.push(this.props.componentId, {
813
+    component: {
814
+      name: 'second.screen',
815
+      options: {
816
+        customTransition: {
817
+          animations: [
818
+            { type: 'sharedElement', fromId: 'image1', toId: 'image2', startDelay: 0, springVelocity: 0.2, duration: 0.5 }
819
+          ],
820
+          duration: 0.8
821
+        }
822
+      }
823
+    }
824
+  });
825
+  ```
826
+  */
827
+  customTransition?: OptionsCustomTransition;
775
   /**
828
   /**
776
    * Preview configuration for Peek and Pop
829
    * Preview configuration for Peek and Pop
777
    * #### (iOS specific)
830
    * #### (iOS specific)