{"id":19346105,"url":"https://github.com/jiantin/switch-animation","last_synced_at":"2025-02-24T09:42:01.564Z","repository":{"id":65510410,"uuid":"435208053","full_name":"JianTin/switch-animation","owner":"JianTin","description":"支持做出复杂的切换动画","archived":false,"fork":false,"pushed_at":"2021-12-14T08:08:25.000Z","size":562,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-07T05:05:32.096Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JianTin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-05T15:41:26.000Z","updated_at":"2021-12-17T03:05:34.000Z","dependencies_parsed_at":"2023-01-26T17:55:15.461Z","dependency_job_id":null,"html_url":"https://github.com/JianTin/switch-animation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JianTin%2Fswitch-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JianTin%2Fswitch-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JianTin%2Fswitch-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JianTin%2Fswitch-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JianTin","download_url":"https://codeload.github.com/JianTin/switch-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240457944,"owners_count":19804489,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T04:08:57.361Z","updated_at":"2025-02-24T09:42:01.533Z","avatar_url":"https://github.com/JianTin.png","language":"TypeScript","readme":"# switch-animation\n___\n封装的一个动画类。用于做动画 切换，保证中间切换 按照原动画逻辑进行过度。  \n支持typescript。  \n支持动画曲线（贝塞尔曲线）目前已内置了部分。  \n分为两种模式：整段动画、阶段动画  \n插件例子：[menu动画](https://codesandbox.io/s/menudong-hua-li-zi-9p1ww?file=/src/components/menuItem.tsx)    [input提示动画](https://codesandbox.io/s/jian-dan-li-zi---zu-jian-cdykh)      [整段动画](https://codesandbox.io/s/jian-dan-dong-hua-bdusy?file=/src/App.tsx)     [分段动画](https://codesandbox.io/s/fu-za-dong-hua-li-zi-3cuzm?file=/src/App.tsx)   \n\n\u003e css问题：  \n\u003e 0-1000ms（left: 0-1000px ) 100-200ms (background-color: red-\u003egreen )  \n\u003e 当你走到 200ms，需要让他恢复到初始状态。此时单靠 css 是无法实现的。  \n\u003e transtion: 无法保证 100-200ms 做background切换，保持left同步运行。  \n\u003e animation：直接增加新animation类，会导致 动画从初始化开始运行。不会出现动画效果。  \n\n#### 安装\n```\nnpm i switch-animation\n    /\nyarn add switch-animation\n```\n\n#### 基本使用\n```\n（整段动画）\nhtml:\n\u003cdiv style=\"border: 1px solid red; width: 100px; height: 100px; \" \u003e\u003c/div\u003e\njs:\nimport {wholeAnimation} from 'switch-animation'\n...\nconst {switchAnimation} = wholeAnimation({\n    element: document.querySelector('div'),\n    duration: 500,\n    easing: 'easeInOutBack', // 可不传，默认 linear 曲线。\n    animation: {\n        translateX: {\n            startValue: '0',\n            endValue: '100',\n            unit: 'px'\n        },\n        'border-color': {\n            startValue: 'red',\n            endValue: '#373D49',\n            unit: ''\n        }\n    }\n})\nswitchAnimation()\n...\n```\n\n```\n(分段动画)\nhtml:\n\u003cdiv style='width:100px; height:100px; background-color:red;'\u003e\u003c/div\u003e\njs:\nimport {segmentedAnimation} from 'switch-animation'\n...\nconst {switchAnimation} = segmentedAnimation({\n    element: document.querySelector('div'),\n    duration: 800,\n    easing: 'linear', // 默认linear，可不传递。将应用于每个时间段 动画曲线\n    animation: {\n        '0-800': {\n            easing: 'easeOutBack', // 每个时间段可以单独设置，做到覆盖全局 动画曲线\n            translateX: {\n                startValue: '0',\n                endValue: '500',\n                unit: 'px'\n            },\n            width: {\n                startValue: '100',\n                endValue: '150',\n                unit: 'px'\n            }\n        },\n        '0-200': {\n            'background-color': {\n                startValue: 'red',\n                endValue: 'rgba(0,0,0,1)',\n                unit: ''\n            }\n        },\n        '200-600': {\n            rotate: {\n                startValue: '0',\n                endValue: '360',\n                unit: 'deg'\n            } \n        }\n    }\n})\nswitchAnimation()\n...\n```\n\n#### cssName支持情况\n不支持：  \ntransform：我这边拆分为 单个变换，如 translateX、translateY、rotate、scaleX...  \ntranslate: 可以通过 translateX + translateY 代替  \nscale: 可以通过 scaleX + scaleY 代替  \nborder: 可以通过 border-color + border-width 代替，需要预先设置 element border样式  [border 例子](https://codesandbox.io/s/border-li-zi-jf2tl)  \n支持，但有限制：  \nbox-shadow: 支持，但有格式限制（详情见下方） [阴影例子](https://codesandbox.io/s/yin-ying-li-zi-99cn7)  \nborder-radius: 如果要设置单边 请通过 border-top-left-radius、border-top-right-radius... 等来设置。[border-radius例子](https://codesandbox.io/s/border-radius-li-zi-e4fvk)   \n支持：  \n'margin' | 'margin-top' | 'margin-bottom' | 'margin-left' | 'margin-right'  \n'border-width' | 'border-color'  \n'border-radius' | 'border-top-left-radius' | 'border-top-right-radius' | 'border-bottom-right-radius' | 'border-bottom-left-radius'  \n'padding' | 'padding-top' | 'padding-bottom' | 'padding-left' | 'padding-right'  \n'width' | 'height'  \n'left' | 'right' | 'top' | 'bottom'  \n'color' | 'background-color'  \n'rotate' | 'rotateX' | 'rotateY' | 'rotateZ'   \n'translateX' | 'translateY' | 'translateZ'  \n'scaleX' | 'scaleY' | 'scaleZ'  \n'skewX' | 'skewY'  \n'perspective' | 'font-size' | 'opacity'  \n\n#### 基本参数\nwholeAnimation 和 segmentedAnimation 基本参数\n```\n    {\n        element: 必传，dom元素 --- element\n        duration：必传，动画时间 --- number\n        easing：非必传，默认 linear，作用于全局动画的曲线 --- [number, number, number, number] | string（详情下方 动画曲线）\n        onStart: 非必传，默认 null，动画开始运行时 触发 --- (element)=\u003evoid\n        onAnimation: 非必传, 默认null，动画进行更改element.style时 (不建议使用，会频繁调用) 触发 --- (element)=\u003evoid\n        onEnd: 非必传，默认null，动画结束时 触发 --- (element)=\u003evoid\n        animation: ...\n    }\n```\nwholeAnimation: 整段动画\n```\nimport {wholeAnimation} from 'switch-animation'\nconst animationEvent = wholeAnimation({\n    ... (基本参数)\n    animation: {\n         cssName: { // 必传，设置的cssName （例： left | translateX | 'background-color' ）\n            startValue: 必传, 开始cssValue值 --- string\n            endValue: 必传，结束cssValue值 --- string\n            unit: 必传，单位 --- string （例：'px' | '%' | 'deg' | '' ）\n        }\n        cssName...\n    }\n})\n```\nsegmentedAnimation: 分段动画\n```\nimport {segmentedAnimation} from 'switch-animation'\nconst animationEvemt = segmentedAnimation({\n    ...(基本参数)\n    animation: {\n        // 必传开始运行 和 结束运行的时间。例: ( '0-1000' | '300-700' )\n        'startDuration-endDuration': { \n            easing: 非必传，默认以 全局动画曲线为主。可单独设置分段动画曲线\n            onStart: 非必传，开始运行分段动画触发。\n            onAnimation：...\n            onEnd:...\n            cssName: {\n                startValue: string,\n                endValue: string,\n                unit: string\n            },\n            cssName...\n        }\n        'startDuration-endDuration'...\n    }\n})\n```\n返回事件\n```\nanimationEvemt {\n    // isAnimationShow方法，调用后返回 boolean。true: 动画在显示中 / 已经显示， false：动画在关闭中 / 已关闭\n    isAnimationShow:()=\u003eboolean\n    // startAnimation方法，需要动画重新开始使用（大概率少用）\n    startAnimation: ()=\u003evoid \n    // switchAnimation方法，通过他调用动画 切换（开始 -\u003e 结束、结束 -\u003e 开始、中间切换）\n    switchAnimation: ()=\u003evoid \n}\n```\n#### 特殊cssName 设置\n颜色 --- color、'background-color'、'border-color'\n```\n    startValue、endValue: rgb(x,x,x)、rgba(x,x,x,x)、##373D49、hsl(360, 100%, 50%)、hwb(60, 3%, 60%)、red(color-name)...\n    例：\n        color: {\n            startValue: 'green',\n            endValue: 'rgba(255, 0, 0, 0.5)',\n            unit: ''\n        }\n```\nbox-shadow\n```\n    startValue、endValue： \"0 0 0 0 black\"(x偏移、y偏移、阴影模糊半径、阴影扩散半径、阴影颜色)\n                        \"inset 0 0 0 0 balck\"(阴影在框内)\n                        \"0 0 5 5 black, 2 2 0 0 red\"（多个阴影以 逗号， 进行分割）\n    unit: 单位 --- 'px' | 'em' ...\n    例:\n        'box-shadow': {\n            startValue: '0 0 0 0 black',\n            endValue: '0 0 30 2 white',\n            unit: 'px'\n        }\n```\nborder-radius  \n```\n    border-radius 只支持设置4角的值  \n    例:\n        'border-radius': {\n            startValue: '0',\n            endValue: '10',\n            unit: 'px'\n        }\n    单独 设置两个角\n    例:\n        'border-top-left-radius': {\n            startValue: '0',\n            endValue: '10',\n            unit: 'px'\n        },\n        'border-bottom-right-radius': {\n            startValue: '0',\n            endValue: '10',\n            unit: 'px'\n        }\n```\n#### 动画曲线\neasing: [number, number, number, number] | string (代表内置的动画曲线)   \n\u003e (内置动画曲线 效果查看  ---  [https://easings.net/cn](https://easings.net/cn) )  \n\u003e string 支持参数  \n\u003e 'linear' | 'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' |   \n\u003e    'easeInCubic' | 'easeOutCubic'  | 'easeInOutCubic' | 'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' |   \n\u003e    'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo'|   \n\u003e    'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack'  \n\n\u003e 自定义动画曲线  \n\u003e easing: [.42, -0.54, .42, .99]  \n\u003e (可以通过该网站预设效果 --- [https://cubic-bezier.com/](https://cubic-bezier.com/) )   \n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiantin%2Fswitch-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjiantin%2Fswitch-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiantin%2Fswitch-animation/lists"}