LayoutAnimation.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @flow
  8. * @format
  9. */
  10. 'use strict';
  11. const UIManager = require('../ReactNative/UIManager');
  12. import Platform from '../Utilities/Platform';
  13. type Type =
  14. | 'spring'
  15. | 'linear'
  16. | 'easeInEaseOut'
  17. | 'easeIn'
  18. | 'easeOut'
  19. | 'keyboard';
  20. type Property = 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY';
  21. type AnimationConfig = $ReadOnly<{|
  22. duration?: number,
  23. delay?: number,
  24. springDamping?: number,
  25. initialVelocity?: number,
  26. type?: Type,
  27. property?: Property,
  28. |}>;
  29. export type LayoutAnimationConfig = $ReadOnly<{|
  30. duration: number,
  31. create?: AnimationConfig,
  32. update?: AnimationConfig,
  33. delete?: AnimationConfig,
  34. |}>;
  35. function configureNext(
  36. config: LayoutAnimationConfig,
  37. onAnimationDidEnd?: Function,
  38. ) {
  39. if (!Platform.isTesting) {
  40. UIManager.configureNextLayoutAnimation(
  41. config,
  42. onAnimationDidEnd ?? function() {},
  43. function() {} /* unused onError */,
  44. );
  45. }
  46. }
  47. function create(
  48. duration: number,
  49. type: Type,
  50. property: Property,
  51. ): LayoutAnimationConfig {
  52. return {
  53. duration,
  54. create: {type, property},
  55. update: {type},
  56. delete: {type, property},
  57. };
  58. }
  59. const Presets = {
  60. easeInEaseOut: (create(
  61. 300,
  62. 'easeInEaseOut',
  63. 'opacity',
  64. ): LayoutAnimationConfig),
  65. linear: (create(500, 'linear', 'opacity'): LayoutAnimationConfig),
  66. spring: {
  67. duration: 700,
  68. create: {
  69. type: 'linear',
  70. property: 'opacity',
  71. },
  72. update: {
  73. type: 'spring',
  74. springDamping: 0.4,
  75. },
  76. delete: {
  77. type: 'linear',
  78. property: 'opacity',
  79. },
  80. },
  81. };
  82. /**
  83. * Automatically animates views to their new positions when the
  84. * next layout happens.
  85. *
  86. * A common way to use this API is to call it before calling `setState`.
  87. *
  88. * Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
  89. *
  90. * UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
  91. */
  92. const LayoutAnimation = {
  93. /**
  94. * Schedules an animation to happen on the next layout.
  95. *
  96. * @param config Specifies animation properties:
  97. *
  98. * - `duration` in milliseconds
  99. * - `create`, `AnimationConfig` for animating in new views
  100. * - `update`, `AnimationConfig` for animating views that have been updated
  101. *
  102. * @param onAnimationDidEnd Called when the animation finished.
  103. * Only supported on iOS.
  104. * @param onError Called on error. Only supported on iOS.
  105. */
  106. configureNext,
  107. /**
  108. * Helper for creating a config for `configureNext`.
  109. */
  110. create,
  111. Types: Object.freeze({
  112. spring: 'spring',
  113. linear: 'linear',
  114. easeInEaseOut: 'easeInEaseOut',
  115. easeIn: 'easeIn',
  116. easeOut: 'easeOut',
  117. keyboard: 'keyboard',
  118. }),
  119. Properties: Object.freeze({
  120. opacity: 'opacity',
  121. scaleX: 'scaleX',
  122. scaleY: 'scaleY',
  123. scaleXY: 'scaleXY',
  124. }),
  125. checkConfig(...args: Array<mixed>) {
  126. console.error('LayoutAnimation.checkConfig(...) has been disabled.');
  127. },
  128. Presets,
  129. easeInEaseOut: (configureNext.bind(null, Presets.easeInEaseOut): (
  130. onAnimationDidEnd?: any,
  131. ) => void),
  132. linear: (configureNext.bind(null, Presets.linear): (
  133. onAnimationDidEnd?: any,
  134. ) => void),
  135. spring: (configureNext.bind(null, Presets.spring): (
  136. onAnimationDidEnd?: any,
  137. ) => void),
  138. };
  139. module.exports = LayoutAnimation;