---
title: "رموز الحركة"
description: "المدد بحسب الدور، وسلّم المدد، ومنحنيات التسارع بحسب الدور، ومن أين يظهر السطح، والنوابض."
url: "https://tanrei.chnotchy.com/ar/tokens/motion/"
last_updated: 2026-10-23T17:33:05.000Z
---

# رموز الحركة

> المدد بحسب الدور، وسلّم المدد، ومنحنيات التسارع بحسب الدور، ومن أين يظهر السطح، والنوابض.

رموز الحركة (tokens) تحت `tanrei.sys.motion`. للإرشادات، اقرأ [الحركة](https://tanrei.chnotchy.com/ar/foundations/motion/).

## المدد بحسب الدور

المدة التي يستغرقها التغيّر تحدّدها طبيعة ما يتحرك: لتغيّر الحالة، وللتحديد، وللصندوق الذي يتغيّر حجمه، وللمحتوى الذي ينفتح في مكانه، ولكل نوع من الأسطح التي تظهر ثم تغيب، دورٌ خاص به. رمز المدة في المكوّن اسمٌ بديل لدوره، فتستطيع الطبقة بسطر واحد أن تغيّر توقيت كل مكوّنات الدور الواحد. يغيب السطح أسرع مما يظهر. وتتبع الأدوار قرص الحركة.

| الرمز | القيمة | معاينة |
| --- | --- | --- |
| `--tanrei-sys-motion-role-appear-anchored-enter` | 300ms |  |
| `--tanrei-sys-motion-role-appear-anchored-exit` | 250ms |  |
| `--tanrei-sys-motion-role-appear-hint-enter` | 250ms |  |
| `--tanrei-sys-motion-role-appear-hint-exit` | 200ms |  |
| `--tanrei-sys-motion-role-appear-modal-enter` | 350ms |  |
| `--tanrei-sys-motion-role-appear-modal-exit` | 300ms |  |
| `--tanrei-sys-motion-role-appear-sheet-enter` | 400ms |  |
| `--tanrei-sys-motion-role-appear-sheet-exit` | 350ms |  |
| `--tanrei-sys-motion-role-appear-toast-enter` | 350ms |  |
| `--tanrei-sys-motion-role-appear-toast-exit` | 300ms |  |
| `--tanrei-sys-motion-role-disclosure` | 400ms |  |
| `--tanrei-sys-motion-role-feedback` | 450ms |  |
| `--tanrei-sys-motion-role-reduced` | 100ms |  |
| `--tanrei-sys-motion-role-resize-default` | 300ms |  |
| `--tanrei-sys-motion-role-resize-large` | 400ms |  |
| `--tanrei-sys-motion-role-selection-mark` | 250ms |  |
| `--tanrei-sys-motion-role-selection-travel` | 250ms |  |
| `--tanrei-sys-motion-role-show-delay` | 300ms |  |
| `--tanrei-sys-motion-role-state-compact` | 200ms |  |
| `--tanrei-sys-motion-role-state-default` | 250ms |  |
| `--tanrei-sys-motion-role-state-large` | 250ms |  |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## المدد

السلّم الذي صُنعت منه الأدوار.

| الرمز | القيمة | معاينة |
| --- | --- | --- |
| `--tanrei-sys-motion-duration-short1` | 50ms |  |
| `--tanrei-sys-motion-duration-press-hold` | 100ms |  |
| `--tanrei-sys-motion-duration-short2` | 100ms |  |
| `--tanrei-sys-motion-duration-stagger` | 100ms |  |
| `--tanrei-sys-motion-duration-short3` | 150ms |  |
| `--tanrei-sys-motion-duration-short4` | 200ms |  |
| `--tanrei-sys-motion-duration-medium1` | 250ms |  |
| `--tanrei-sys-motion-duration-medium2` | 300ms |  |
| `--tanrei-sys-motion-duration-medium3` | 350ms |  |
| `--tanrei-sys-motion-duration-medium4` | 400ms |  |
| `--tanrei-sys-motion-duration-long1` | 450ms |  |
| `--tanrei-sys-motion-duration-long2` | 500ms |  |
| `--tanrei-sys-motion-duration-long3` | 550ms |  |
| `--tanrei-sys-motion-duration-long4` | 600ms |  |
| `--tanrei-sys-motion-duration-extra-long1` | 700ms |  |
| `--tanrei-sys-motion-duration-extra-long2` | 800ms |  |
| `--tanrei-sys-motion-duration-extra-long3` | 900ms |  |
| `--tanrei-sys-motion-duration-extra-long4` | 1000ms |  |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## منحنيات التسارع

المنحنيات، والأدوار الأربعة التي يختار بها المكوّن تسارع التغيّر: `enter` للسطح الذي يظهر، و`exit` للسطح الذي يغيب، و`state` لتغيّر الحالة في المكان نفسه، و`spatial` لما يتحرك أو يتغيّر حجمه في مكانه. كل دور يسمّي منحنى من منحنيات السلّم.

| الرمز | القيمة | المنحنى |
| --- | --- | --- |
| `--tanrei-sys-motion-easing-emphasized-accelerate` | cubic-bezier(0.3, 0, 0.8, 0.15) |  |
| `--tanrei-sys-motion-easing-emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1) |  |
| `--tanrei-sys-motion-easing-enter` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-exit` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-linear` | cubic-bezier(0, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-spatial` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard-accelerate` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-standard-decelerate` | cubic-bezier(0, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-state` | cubic-bezier(0.2, 0, 0, 1) |  |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## من أين يظهر السطح

كل سطح يظهر — القائمة، والقائمة المنسدلة، والنافذة المنبثقة، والتلميح، ومربع الحوار، والإشعار المؤقت — يبدأ من الشفافية نفسها والمقياس نفسه والمسافة نفسها والتمويه نفسه، ويغيب عائدًا في الطريق نفسه. اختيارٌ واحد من نوعه يحدّدها معًا؛ ويمكن للطبقة أن تختار غيره، أو أن تثبّت إحدى القيم.

`tanrei.sys.behavior.appearance`

How a surface appears and leaves: a menu, a select's or a combobox's list, a popover, a tooltip, a dialog, a snackbar. fade-scale: it fades in and grows from 0.96 of its size toward its origin. fade: it only fades in. fade-slide: it fades in and travels a short way into place (sys.space.space100). blur-slide: it fades in, travels the same way and comes into focus from a 4 px blur. unfold: it fades in and unfolds from its anchored edge, scaled from 0 along the axis that leaves the anchor. The choice sets sys.motion.appear.\*; a layer that pins one of those keeps it whatever the choice. A surface that leaves runs its appearance back. A sheet slides in from its edge under every choice.

fade-scale fade fade-slide blur-slide unfold

fade-scale — القيمة الافتراضية، وهي البديل في المنصة التي لا تستطيع رسم الخيار

مولَّد من `tokens/sys/behavior.tokens.json`

| الرمز | القيمة |
| --- | --- |
| `--tanrei-sys-motion-appear-blur` | 0px |
| `--tanrei-sys-motion-appear-distance` | 0px |
| `--tanrei-sys-motion-appear-opacity` | 0 |
| `--tanrei-sys-motion-appear-origin` | anchor |
| `--tanrei-sys-motion-appear-scale` | 0.96 |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## النوابض

لكل نابض أربعة رموز فرعية. الرمزان `stiffness` و `damping` يحرّكان المنصات التي فيها حركة نابضية؛ والرمزان `duration` و `easing` هما التقريب المستخدم حيث لا تتوفر النوابض، كما في CSS.

| الرمز | stiffness | damping | duration | easing | المنحنى |
| --- | --- | --- | --- | --- | --- |
| `tanrei.sys.motion.spring.expressive.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.default-spatial` | 380 | 0.8 | 500ms | cubic-bezier(0.38, 1.21, 0.22, 1) |  |
| `tanrei.sys.motion.spring.expressive.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.fast-spatial` | 800 | 0.6 | 350ms | cubic-bezier(0.42, 1.67, 0.21, 0.9) |  |
| `tanrei.sys.motion.spring.expressive.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.slow-spatial` | 200 | 0.8 | 650ms | cubic-bezier(0.39, 1.29, 0.35, 0.98) |  |
| `tanrei.sys.motion.spring.standard.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.default-spatial` | 700 | 0.9 | 500ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |
| `tanrei.sys.motion.spring.standard.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.fast-spatial` | 1400 | 0.9 | 350ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |
| `tanrei.sys.motion.spring.standard.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.slow-spatial` | 300 | 0.9 | 750ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`