{"id":19875086,"url":"https://github.com/gaohaoyang/rax-keyframes-to-animation","last_synced_at":"2025-05-02T10:31:52.675Z","repository":{"id":65482580,"uuid":"125992702","full_name":"Gaohaoyang/rax-keyframes-to-animation","owner":"Gaohaoyang","description":"convert keyframes code to animation, use keyframes in rax. 使用 CSS 3 中的 keyframes 语法来写 rax 动画","archived":false,"fork":false,"pushed_at":"2018-12-27T12:45:45.000Z","size":93,"stargazers_count":14,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T01:11:12.262Z","etag":null,"topics":["alibaba","animation","keyframes","plugin","rax","weex"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Gaohaoyang.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":"2018-03-20T09:27:52.000Z","updated_at":"2022-04-12T11:53:42.000Z","dependencies_parsed_at":"2023-01-25T10:45:30.522Z","dependency_job_id":null,"html_url":"https://github.com/Gaohaoyang/rax-keyframes-to-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/Gaohaoyang%2Frax-keyframes-to-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaohaoyang%2Frax-keyframes-to-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaohaoyang%2Frax-keyframes-to-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaohaoyang%2Frax-keyframes-to-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gaohaoyang","download_url":"https://codeload.github.com/Gaohaoyang/rax-keyframes-to-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252023319,"owners_count":21682164,"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":["alibaba","animation","keyframes","plugin","rax","weex"],"created_at":"2024-11-12T16:26:48.860Z","updated_at":"2025-05-02T10:31:52.386Z","avatar_url":"https://github.com/Gaohaoyang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Keyframes to Animation in Rax\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gw.alicdn.com/tfs/TB1Kbc3e1uSBuNjy1XcXXcYjFXa-536-536.png\" width=\"320px\" /\u003e\n\u003c/p\u003e\n\n在 rax 中使用 CSS3 中的 @keyframes 语法来写 rax/weex 动画。\n\n- 使用 keyframes 语法提供更友好的编程体验\n- weex 端使用 `@weex-module/animation` 执行动画\n- web 端直接使用 webView 层执行 CSS3 keyframes 动画\n\n## Demo\n\n- web 版\n  - https://gaohaoyang.github.io/rax-keyframes-to-animation/demo/\n  - ![](https://gw.alicdn.com/tfs/TB1nfHpe1SSBuNjy0FlXXbBpVXa-200-200.png)\n\n\n- weex 版（请使用具有 weex 环境的 app 扫码预览，如手淘）:\n  - https://gaohaoyang.github.io/rax-keyframes-to-animation/demo/bundle.min.js?_wx_tpl=https://gaohaoyang.github.io/rax-keyframes-to-animation/demo/bundle.min.js\n  - ![](https://gw.alicdn.com/tfs/TB1jRTse7yWBuNjy0FpXXassXXa-200-200.png)\n\n## Usage\n\n安装组件\n\n``` bash\nyarn add rax-keyframes-to-animation\n```\n\n或\n\n``` bash\nnpm i rax-keyframes-to-animation -S\n```\n\n使用示例\n\n``` jsx\n// App.js\nimport { createElement, Component, render, findDOMNode } from 'rax';\nimport View from 'rax-view';\nimport Text from 'rax-text';\nimport keyframesToAnimation from 'rax-keyframes-to-animation';\n\nimport './App.css';\n\nconst animationStr = `\n  .element-animation{\n    animation: tada linear 1s;\n    animation-iteration-count: 2;\n    transform-origin: 50% 50%;\n  }\n`;\nconst keyframesStr = `\n  @keyframes tada{\n    0% {\n      transform: rotate(0deg) scale(1.00);\n    }\n    10% {\n      transform: rotate(-3deg) scale(0.80);\n    }\n    20% {\n      transform: rotate(-3deg) scale(0.80);\n    }\n    30% {\n      transform: rotate(3deg) scale(1.20);\n    }\n    40% {\n      transform: rotate(-3deg) scale(1.20);\n    }\n    50% {\n      transform: rotate(3deg) scale(1.20);\n    }\n    60% {\n      transform: rotate(-3deg) scale(1.20);\n    }\n    70% {\n      transform: rotate(3deg) scale(1.20);\n    }\n    80% {\n      transform: rotate(-3deg) scale(1.20);\n    }\n    90% {\n      transform: rotate(3deg) scale(1.20);\n    }\n    100% {\n      transform: rotate(0deg) scale(1.20);\n    }\n  }\n`;\n\nclass App extends Component {\n\n  componentDidMount = () =\u003e {\n    this.runAnimation();\n  }\n\n  runAnimation = () =\u003e {\n    const box = findDOMNode(this.box); // 获取元素\n    // 调用动画方法\n    keyframesToAnimation(box, animationStr, keyframesStr, () =\u003e {\n      console.log('animation end');\n    });\n  }\n\n  render() {\n    return (\n      \u003cView className=\"container\"\u003e\n        \u003cView\n          ref={(ref) =\u003e {\n            this.box = ref;\n          }}\n          className=\"box\"\n        \u003e\n          \u003cText className=\"boxText\"\u003ehello\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n``` css\n/* App.css */\n.container {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.box {\n  width: 100;\n  height: 100;\n  margin-left: 160;\n  margin-top: 300;\n  background-color: #5c8fdb;\n  border-radius: 10;\n  justify-content: center;\n  align-items: center;\n}\n.boxText {\n  color: #fff;\n  font-size: 30;\n}\n```\n\n## Api\n\n### keyframesToAnimation(node, animationStr, keyframesStr, callback)\n\n功能：用于执行动画\n\n参数：\n\n- node\n\n  dom 节点\n\n\n- animationStr\n\n  animation CSS 代码字符串，注意 animation name 要与 keyframes 中的 name 对应\n\n\n- keyframesStr\n\n  keyframes CSS 代码字符串，注意 keyframes name 要与 animation 中的 name 对应\n\n\n- callback\n\n  回调函数，注意当 `animation-iteration-count` 值为 infinite 时，回调函数永远不会执行\n\n## 原理\n\n首先将输入的 animationStr 和 keyframesStr 进行解析。\n\nweex 中使用 `@weex-module/animation` 进行动画调用，使用递归的方式执行每一个关键帧的样式。\n\nweb 中直接将 keyframesStr 直接插入到样式表中，在 dom 元素上修改 animation 属性进行动画。\n\n## Contribute\n\n开源项目，欢迎使用，欢迎找 bug，欢迎贡献代码~\n\nhttps://github.com/Gaohaoyang/rax-keyframes-to-animation\n\n`yarn`\n\nInstall all dependencies.\n\n`yarn run start`\n\nRuns the app in development mode.\n\nOpen [http://localhost:9999](http://localhost:9999) to view it in the browser.\n\nThe page will reload if you make edits.\n\n`yarn run lint`\n\nYou will see the lint errors in the console.\n\n`yarn run build-demo`\n\nbuild demo.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaohaoyang%2Frax-keyframes-to-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaohaoyang%2Frax-keyframes-to-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaohaoyang%2Frax-keyframes-to-animation/lists"}