From 5120cd97a4e8f0579170d0f930db08da38f7d399 Mon Sep 17 00:00:00 2001 From: awmleer Date: Tue, 31 May 2022 10:39:03 +0800 Subject: [PATCH] doc: add reduce motion guide --- config/menus.tsx | 8 +++++ docs/guide/reduce-motion.en.md | 46 +++++++++++++++++++++++++ docs/guide/reduce-motion.zh.md | 46 +++++++++++++++++++++++++ src/utils/demos/reduce-motion/demo1.tsx | 28 +++++++++++++++ src/utils/demos/reduce-motion/demo2.tsx | 25 ++++++++++++++ 5 files changed, 153 insertions(+) create mode 100644 docs/guide/reduce-motion.en.md create mode 100644 docs/guide/reduce-motion.zh.md create mode 100644 src/utils/demos/reduce-motion/demo1.tsx create mode 100644 src/utils/demos/reduce-motion/demo2.tsx diff --git a/config/menus.tsx b/config/menus.tsx index ce96e566ea..7f41501334 100644 --- a/config/menus.tsx +++ b/config/menus.tsx @@ -54,6 +54,10 @@ export const menus = { title: 'SSR (Experimental)', path: '/guide/ssr', }, + { + title: 'Reduce Motion (Experimental)', + path: '/guide/reduce-motion', + }, ], '/zh/guide': [ { @@ -96,6 +100,10 @@ export const menus = { title: '服务端渲染 / SSR（试验性）', path: '/zh/guide/ssr', }, + { + title: '减弱动效（试验性）', + path: '/zh/guide/reduce-motion', + }, ], '/components': [ { diff --git a/docs/guide/reduce-motion.en.md b/docs/guide/reduce-motion.en.md new file mode 100644 index 0000000000..aa7801e82c --- /dev/null +++ b/docs/guide/reduce-motion.en.md @@ -0,0 +1,46 @@ +# Reduce Motion + +In some scenarios, you may not want various complex animation effects on the interface, so you can control the animation effects of components through the `reduceMotion` and `restoreMotion` functions provided by antd-mobile. + +When you call `reduceMotion()`, the antd-mobile component will skip the animation as much as possible. + +```jsx +import { reduceMotion } from 'antd-mobile' + +reduceMotion() +``` + +It should be noted that `reduceMotion()` will only control the components provided by antd-mobile, and will not affect your own components in your business project. + +When you want to restore the animation effect, you can call `restoreMotion()`. + +## Demos + + + + + +## Follow System Settings + +In some cases, you may want the animation compatibility to follow the system settings directly, such as the "Accessibility - Compatible Motion Effects" setting under iOS: + +reduce-motion-en + +Then you can use it with [react-reduce-motion](https://github.com/infiniteluuke/react-reduce-motion): + +```jsx +import { useReducedMotion } from 'react-reduce-motion' +import { reduceMotion, restoreMotion } from 'antd-mobile' + +const MyApp = () => { + const prefersReducedMotion = useReducedMotion() + React.useEffect(() => { + if (prefersReducedMotion) { + reduceMotion() + } else { + restoreMotion() + } + }, [prefersReducedMotion]) + // ... +} +``` diff --git a/docs/guide/reduce-motion.zh.md b/docs/guide/reduce-motion.zh.md new file mode 100644 index 0000000000..f202e31b1b --- /dev/null +++ b/docs/guide/reduce-motion.zh.md @@ -0,0 +1,46 @@ +# 减弱动效 + +在一些场景下，你可能并不希望界面上存在各种复杂的动画效果，那么可以通过 antd-mobile 提供的 `reduceMotion` 和 `restoreMotion` 函数，来控制组件的动画效果。 + +当你调用 `reduceMotion()` 之后，antd-mobile 的组件会尽可能的跳过动画效果。 + +```jsx +import { reduceMotion } from 'antd-mobile' + +reduceMotion() +``` + +需要注意的是，`reduceMotion()` 只会控制 antd-mobile 提供的组件，不会影响你业务项目中自己的组件。 + +当你希望恢复动画效果时，可以调用 `restoreMotion()`。 + +## 示例 + + + + + +## 跟随系统设置 + +一些情况下，你可能会希望动画是否兼容直接跟随系统设置，例如 iOS 下的 "辅助功能 - 兼容动态效果" 设置： + +reduce-motion-zh + +那么可以配合 [react-reduce-motion](https://github.com/infiniteluke/react-reduce-motion) 使用： + +```jsx +import { useReducedMotion } from 'react-reduce-motion' +import { reduceMotion, restoreMotion } from 'antd-mobile' + +const MyApp = () => { + const prefersReducedMotion = useReducedMotion() + React.useEffect(() => { + if (prefersReducedMotion) { + reduceMotion() + } else { + restoreMotion() + } + }, [prefersReducedMotion]) + // ... +} +``` diff --git a/src/utils/demos/reduce-motion/demo1.tsx b/src/utils/demos/reduce-motion/demo1.tsx new file mode 100644 index 0000000000..e7be6519d0 --- /dev/null +++ b/src/utils/demos/reduce-motion/demo1.tsx @@ -0,0 +1,28 @@ +import React, { useEffect } from 'react' +import { Collapse, reduceMotion } from 'antd-mobile' +import { DemoBlock, lorem } from 'demos' + +export default () => { + useEffect(() => { + reduceMotion() + }, []) + return ( + + + + {mockContents[0]} + + + {mockContents[1]} + + + {mockContents[2]} + + + + ) +} + +const mockContents = Array(5) + .fill(null) + .map(() => lorem.generateParagraphs(1)) diff --git a/src/utils/demos/reduce-motion/demo2.tsx b/src/utils/demos/reduce-motion/demo2.tsx new file mode 100644 index 0000000000..a47584dfb1 --- /dev/null +++ b/src/utils/demos/reduce-motion/demo2.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import { Collapse } from 'antd-mobile' +import { DemoBlock, lorem } from 'demos' + +export default () => { + return ( + + + + {mockContents[0]} + + + {mockContents[1]} + + + {mockContents[2]} + + + + ) +} + +const mockContents = Array(5) + .fill(null) + .map(() => lorem.generateParagraphs(1))