-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react-motion): add support for params (#31566)
- Loading branch information
1 parent
46befc0
commit 1b681fc
Showing
11 changed files
with
405 additions
and
21 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-motion-74754f46-cdfd-42ee-8838-8389f353b5c6.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "feat: add support for params", | ||
| "packageName": "@fluentui/react-motion", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
.../react-motion/stories/src/CreateMotionComponent/MotionFunctionParams.stories.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| Atoms definitions can be also defined as functions that accept an animated element as an argument. This allows to define more complex animations that depend on the animated element's properties, for example: | ||
|
|
||
| ```ts | ||
| const Grow = createMotionComponent(({ element }) => ({ | ||
| duration: 300, | ||
| keyframes: [ | ||
| { opacity: 0, maxHeight: `${element.scrollHeight / 2}px` }, | ||
| { opacity: 1, maxHeight: `${element.scrollHeight}px` }, | ||
| { opacity: 0, maxHeight: `${element.scrollHeight / 2}px` }, | ||
| ], | ||
| iterations: Infinity, | ||
| })); | ||
| ``` |
151 changes: 151 additions & 0 deletions
151
...omponents/react-motion/stories/src/CreateMotionComponent/MotionFunctionParams.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import { | ||
| createMotionComponent, | ||
| Field, | ||
| makeStyles, | ||
| mergeClasses, | ||
| type MotionImperativeRef, | ||
| motionTokens, | ||
| Slider, | ||
| tokens, | ||
| } from '@fluentui/react-components'; | ||
| import * as React from 'react'; | ||
|
|
||
| import description from './MotionFunctionParams.stories.md'; | ||
|
|
||
| const useClasses = makeStyles({ | ||
| container: { | ||
| display: 'grid', | ||
| gridTemplate: `"cardA cardB" "controls ." / 1fr 1fr`, | ||
| gap: '20px 10px', | ||
| }, | ||
| card: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| justifyContent: 'end', | ||
|
|
||
| border: `${tokens.strokeWidthThicker} solid ${tokens.colorNeutralForeground3}`, | ||
| borderRadius: tokens.borderRadiusMedium, | ||
| boxShadow: tokens.shadow16, | ||
| padding: '10px', | ||
| }, | ||
| controls: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gridArea: 'controls', | ||
|
|
||
| border: `${tokens.strokeWidthThicker} solid ${tokens.colorNeutralForeground3}`, | ||
| borderRadius: tokens.borderRadiusMedium, | ||
| boxShadow: tokens.shadow16, | ||
| padding: '10px', | ||
| }, | ||
| field: { | ||
| flex: 1, | ||
| }, | ||
| sliderField: { | ||
| gridTemplateColumns: 'min-content 1fr', | ||
| }, | ||
| sliderLabel: { | ||
| textWrap: 'nowrap', | ||
| }, | ||
|
|
||
| cardA: { | ||
| gridArea: 'cardA', | ||
| }, | ||
| cardB: { | ||
| gridArea: 'cardB', | ||
| }, | ||
| item: { | ||
| backgroundColor: tokens.colorBrandBackground, | ||
| border: `${tokens.strokeWidthThicker} solid ${tokens.colorTransparentStroke}`, | ||
| borderRadius: '50%', | ||
|
|
||
| width: '100px', | ||
| height: '100px', | ||
| }, | ||
| description: { | ||
| fontFamily: tokens.fontFamilyMonospace, | ||
| borderRadius: tokens.borderRadiusMedium, | ||
| marginTop: '10px', | ||
| padding: '5px 10px', | ||
| backgroundColor: tokens.colorNeutralBackground1Pressed, | ||
| }, | ||
| }); | ||
|
|
||
| const Scale = createMotionComponent<{ startFrom?: number }>(({ startFrom = 0.5 }) => { | ||
| return { | ||
| keyframes: [ | ||
| { opacity: 0, transform: `scale(${startFrom})` }, | ||
| { opacity: 1, transform: 'scale(1)' }, | ||
| { opacity: 0, transform: `scale(${startFrom})` }, | ||
| ], | ||
| duration: motionTokens.durationUltraSlow, | ||
| iterations: Infinity, | ||
| }; | ||
| }); | ||
|
|
||
| export const MotionFunctionParams = () => { | ||
| const classes = useClasses(); | ||
|
|
||
| const motionBRef = React.useRef<MotionImperativeRef>(); | ||
| const motionARef = React.useRef<MotionImperativeRef>(); | ||
|
|
||
| const [playbackRate, setPlaybackRate] = React.useState<number>(20); | ||
|
|
||
| // Heads up! | ||
| // This is optional and is intended solely to slow down the animations, making motions more visible in the examples. | ||
| React.useEffect(() => { | ||
| motionARef.current?.setPlaybackRate(playbackRate / 100); | ||
| motionBRef.current?.setPlaybackRate(playbackRate / 100); | ||
| }, [playbackRate]); | ||
|
|
||
| return ( | ||
| <div className={classes.container}> | ||
| <div className={mergeClasses(classes.card, classes.cardA)}> | ||
| <Scale imperativeRef={motionARef} startFrom={0.1}> | ||
| <div className={classes.item} /> | ||
| </Scale> | ||
| <div className={classes.description}>startFrom=0.1</div> | ||
| </div> | ||
| <div className={mergeClasses(classes.card, classes.cardB)}> | ||
| <Scale imperativeRef={motionBRef} startFrom={0.8}> | ||
| <div className={classes.item} /> | ||
| </Scale> | ||
| <div className={classes.description}>startFrom=0.8</div> | ||
| </div> | ||
|
|
||
| <div className={classes.controls}> | ||
| <Field | ||
| className={mergeClasses(classes.field, classes.sliderField)} | ||
| label={{ | ||
| children: ( | ||
| <> | ||
| <code>playbackRate</code>: {playbackRate}% | ||
| </> | ||
| ), | ||
| className: classes.sliderLabel, | ||
| }} | ||
| orientation="horizontal" | ||
| > | ||
| <Slider | ||
| aria-valuetext={`Value is ${playbackRate}%`} | ||
| className={mergeClasses(classes.field, classes.sliderField)} | ||
| value={playbackRate} | ||
| onChange={(ev, data) => setPlaybackRate(data.value)} | ||
| min={0} | ||
| max={100} | ||
| step={5} | ||
| /> | ||
| </Field> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| MotionFunctionParams.parameters = { | ||
| docs: { | ||
| description: { | ||
| story: description, | ||
| }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
...ion/stories/src/CreatePresenceComponent/PresenceMotionFunctionParams.stories.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| Functions in presence definitions also can be used to define motion parameters, this is useful when motion has different variations. | ||
|
|
||
| ```tsx | ||
| const Scale = createPresenceComponent<{ startFrom?: number }>(({ startFrom = 0.5 }) => { | ||
| const keyframes = [ | ||
| { opacity: 0, transform: `scale(${startFrom})` }, | ||
| { opacity: 1, transform: 'scale(1)' }, | ||
| ]; | ||
|
|
||
| return { | ||
| enter: { | ||
| keyframes, | ||
| duration: motionTokens.durationUltraSlow, | ||
| }, | ||
| exit: { | ||
| keyframes: [...keyframes].reverse(), | ||
| duration: motionTokens.durationSlow, | ||
| }, | ||
| }; | ||
| }); | ||
| ``` |
Oops, something went wrong.