animation.ts 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. import type { TurningMode } from '@/types/slides'
  2. export const ANIMATION_DEFAULT_DURATION = 1000
  3. export const ANIMATION_DEFAULT_TRIGGER = 'click'
  4. export const ANIMATION_CLASS_PREFIX = 'animate__'
  5. export const ENTER_ANIMATIONS = [
  6. {
  7. type: 'bounce',
  8. name: '弹跳',
  9. children: [
  10. { name: '弹入', value: 'bounceIn' },
  11. { name: '向右弹入', value: 'bounceInLeft' },
  12. { name: '向左弹入', value: 'bounceInRight' },
  13. { name: '向上弹入', value: 'bounceInUp' },
  14. { name: '向下弹入', value: 'bounceInDown' },
  15. ],
  16. },
  17. {
  18. type: 'fade',
  19. name: '浮现',
  20. children: [
  21. { name: '浮入', value: 'fadeIn' },
  22. { name: '向下浮入', value: 'fadeInDown' },
  23. { name: '向下长距浮入', value: 'fadeInDownBig' },
  24. { name: '向右浮入', value: 'fadeInLeft' },
  25. { name: '向右长距浮入', value: 'fadeInLeftBig' },
  26. { name: '向左浮入', value: 'fadeInRight' },
  27. { name: '向左长距浮入', value: 'fadeInRightBig' },
  28. { name: '向上浮入', value: 'fadeInUp' },
  29. { name: '向上长距浮入', value: 'fadeInUpBig' },
  30. { name: '从左上浮入', value: 'fadeInTopLeft' },
  31. { name: '从右上浮入', value: 'fadeInTopRight' },
  32. { name: '从左下浮入', value: 'fadeInBottomLeft' },
  33. { name: '从右下浮入', value: 'fadeInBottomRight' },
  34. ],
  35. },
  36. {
  37. type: 'rotate',
  38. name: '旋转',
  39. children: [
  40. { name: '旋转进入', value: 'rotateIn' },
  41. { name: '绕左下进入', value: 'rotateInDownLeft' },
  42. { name: '绕右下进入', value: 'rotateInDownRight' },
  43. { name: '绕左上进入', value: 'rotateInUpLeft' },
  44. { name: '绕右上进入', value: 'rotateInUpRight' },
  45. ],
  46. },
  47. {
  48. type: 'zoom',
  49. name: '缩放',
  50. children: [
  51. { name: '放大进入', value: 'zoomIn' },
  52. { name: '向下放大进入', value: 'zoomInDown' },
  53. { name: '从左放大进入', value: 'zoomInLeft' },
  54. { name: '从右放大进入', value: 'zoomInRight' },
  55. { name: '向上放大进入', value: 'zoomInUp' },
  56. ],
  57. },
  58. {
  59. type: 'slide',
  60. name: '滑入',
  61. children: [
  62. { name: '向下滑入', value: 'slideInDown' },
  63. { name: '从右滑入', value: 'slideInLeft' },
  64. { name: '从左滑入', value: 'slideInRight' },
  65. { name: '向上滑入', value: 'slideInUp' },
  66. ],
  67. },
  68. {
  69. type: 'flip',
  70. name: '翻转',
  71. children: [
  72. { name: 'X轴翻转进入', value: 'flipInX' },
  73. { name: 'Y轴翻转进入', value: 'flipInY' },
  74. ],
  75. },
  76. {
  77. type: 'back',
  78. name: '放大滑入',
  79. children: [
  80. { name: '向下放大滑入', value: 'backInDown' },
  81. { name: '从左放大滑入', value: 'backInLeft' },
  82. { name: '从右放大滑入', value: 'backInRight' },
  83. { name: '向上放大滑入', value: 'backInUp' },
  84. ],
  85. },
  86. {
  87. type: 'lightSpeed',
  88. name: '飞入',
  89. children: [
  90. { name: '从右飞入', value: 'lightSpeedInRight' },
  91. { name: '从左飞入', value: 'lightSpeedInLeft' },
  92. ],
  93. },
  94. ]
  95. export const EXIT_ANIMATIONS = [
  96. {
  97. type: 'bounce',
  98. name: '弹跳',
  99. children: [
  100. { name: '弹出', value: 'bounceOut' },
  101. { name: '向左弹出', value: 'bounceOutLeft' },
  102. { name: '向右弹出', value: 'bounceOutRight' },
  103. { name: '向上弹出', value: 'bounceOutUp' },
  104. { name: '向下弹出', value: 'bounceOutDown' },
  105. ],
  106. },
  107. {
  108. type: 'fade',
  109. name: '浮现',
  110. children: [
  111. { name: '浮出', value: 'fadeOut' },
  112. { name: '向下浮出', value: 'fadeOutDown' },
  113. { name: '向下长距浮出', value: 'fadeOutDownBig' },
  114. { name: '向左浮出', value: 'fadeOutLeft' },
  115. { name: '向左长距浮出', value: 'fadeOutLeftBig' },
  116. { name: '向右浮出', value: 'fadeOutRight' },
  117. { name: '向右长距浮出', value: 'fadeOutRightBig' },
  118. { name: '向上浮出', value: 'fadeOutUp' },
  119. { name: '向上长距浮出', value: 'fadeOutUpBig' },
  120. { name: '从左上浮出', value: 'fadeOutTopLeft' },
  121. { name: '从右上浮出', value: 'fadeOutTopRight' },
  122. { name: '从左下浮出', value: 'fadeOutBottomLeft' },
  123. { name: '从右下浮出', value: 'fadeOutBottomRight' },
  124. ],
  125. },
  126. {
  127. type: 'rotate',
  128. name: '旋转',
  129. children: [
  130. { name: '旋转退出', value: 'rotateOut' },
  131. { name: '绕左下退出', value: 'rotateOutDownLeft' },
  132. { name: '绕右下退出', value: 'rotateOutDownRight' },
  133. { name: '绕左上退出', value: 'rotateOutUpLeft' },
  134. { name: '绕右上退出', value: 'rotateOutUpRight' },
  135. ],
  136. },
  137. {
  138. type: 'zoom',
  139. name: '缩放',
  140. children: [
  141. { name: '缩小退出', value: 'zoomOut' },
  142. { name: '向下缩小退出', value: 'zoomOutDown' },
  143. { name: '从左缩小退出', value: 'zoomOutLeft' },
  144. { name: '从右缩小退出', value: 'zoomOutRight' },
  145. { name: '向上缩小退出', value: 'zoomOutUp' },
  146. ],
  147. },
  148. {
  149. type: 'slide',
  150. name: '滑出',
  151. children: [
  152. { name: '向下滑出', value: 'slideOutDown' },
  153. { name: '从左滑出', value: 'slideOutLeft' },
  154. { name: '从右滑出', value: 'slideOutRight' },
  155. { name: '向上滑出', value: 'slideOutUp' },
  156. ],
  157. },
  158. {
  159. type: 'flip',
  160. name: '翻转',
  161. children: [
  162. { name: 'X轴翻转退出', value: 'flipOutX' },
  163. { name: 'Y轴翻转退出', value: 'flipOutY' },
  164. ],
  165. },
  166. {
  167. type: 'back',
  168. name: '缩小滑出',
  169. children: [
  170. { name: '向下缩小滑出', value: 'backOutDown' },
  171. { name: '从左缩小滑出', value: 'backOutLeft' },
  172. { name: '从右缩小滑出', value: 'backOutRight' },
  173. { name: '向上缩小滑出', value: 'backOutUp' },
  174. ],
  175. },
  176. {
  177. type: 'lightSpeed',
  178. name: '飞出',
  179. children: [
  180. { name: '从右飞出', value: 'lightSpeedOutRight' },
  181. { name: '从左飞出', value: 'lightSpeedOutLeft' },
  182. ],
  183. },
  184. ]
  185. export const ATTENTION_ANIMATIONS = [
  186. {
  187. type: 'shake',
  188. name: '晃动',
  189. children: [
  190. { name: '左右摇晃', value: 'shakeX' },
  191. { name: '上下摇晃', value: 'shakeY' },
  192. { name: '摇头', value: 'headShake' },
  193. { name: '摆动', value: 'swing' },
  194. { name: '晃动', value: 'wobble' },
  195. { name: '惊恐', value: 'tada' },
  196. { name: '果冻', value: 'jello' },
  197. ],
  198. },
  199. {
  200. type: 'other',
  201. name: '其他',
  202. children: [
  203. { name: '弹跳', value: 'bounce' },
  204. { name: '闪烁', value: 'flash' },
  205. { name: '脉搏', value: 'pulse' },
  206. { name: '橡皮筋', value: 'rubberBand' },
  207. { name: '心跳(快)', value: 'heartBeat' },
  208. ],
  209. },
  210. ]
  211. interface SlideAnimation {
  212. label: string
  213. value: TurningMode
  214. }
  215. export const SLIDE_ANIMATIONS: SlideAnimation[] = [
  216. { label: '无', value: 'no' },
  217. { label: '随机', value: 'random' },
  218. { label: '左右推移', value: 'slideX' },
  219. { label: '上下推移', value: 'slideY' },
  220. { label: '左右推移(3D)', value: 'slideX3D' },
  221. { label: '上下推移(3D)', value: 'slideY3D' },
  222. { label: '淡入淡出', value: 'fade' },
  223. { label: '旋转', value: 'rotate' },
  224. { label: '上下展开', value: 'scaleY' },
  225. { label: '左右展开', value: 'scaleX' },
  226. { label: '放大', value: 'scale' },
  227. { label: '缩小', value: 'scaleReverse' },
  228. ]