{"id":21195635,"url":"https://github.com/qiqiboy/water-wave","last_synced_at":"2025-07-10T04:30:29.947Z","repository":{"id":67843692,"uuid":"100493396","full_name":"qiqiboy/water-wave","owner":"qiqiboy","description":"一个创建点击后产生水波纹效果的React组件","archived":false,"fork":false,"pushed_at":"2020-12-11T04:21:44.000Z","size":143,"stargazers_count":20,"open_issues_count":1,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-27T06:05:48.035Z","etag":null,"topics":["click-effect","material-design","material-effect","react","react-component","submit-button","water-ripple","water-wave"],"latest_commit_sha":null,"homepage":"http://github.boy.im/water-wave","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/qiqiboy.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-08-16T13:38:53.000Z","updated_at":"2024-01-02T15:43:14.000Z","dependencies_parsed_at":"2023-12-15T20:11:11.232Z","dependency_job_id":"61e85780-4d1b-4c60-a40b-0829d418dffa","html_url":"https://github.com/qiqiboy/water-wave","commit_stats":{"total_commits":39,"total_committers":3,"mean_commits":13.0,"dds":0.4871794871794872,"last_synced_commit":"928621a0af6a178a7d2a1967a9215c3efa524972"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Fwater-wave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Fwater-wave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Fwater-wave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Fwater-wave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qiqiboy","download_url":"https://codeload.github.com/qiqiboy/water-wave/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225618295,"owners_count":17497495,"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":["click-effect","material-design","material-effect","react","react-component","submit-button","water-ripple","water-wave"],"created_at":"2024-11-20T19:29:22.871Z","updated_at":"2024-11-20T19:29:23.557Z","avatar_url":"https://github.com/qiqiboy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# water-wave\n一个创建点击后产生水波纹效果的React组件\n\n### 安装\n    $ npm install --save water-wave\n\n### 使用\n`water-wave`是一个react组件，所以是需要在react项目环境中调用（推荐在`create-react-app`或者`tiger-new`生成的项目中使用）。组件中调用了`classlist`，为了兼容更多浏览器环境，推荐项目中也要引入`classlist`的polyfill。\n\n也有一段很小的css需要引入到项目中（主要是去掉ios上的tap阴影、设置渲染水波纹的canvas的位置等）。\n\n`water-wave`对使用位置没有任何限制，可以自由应用于button、链接、div等任意节点中。\n\n示例如下：\n\n```jsx\nimport React from 'react';\nimport WaterWave from 'water-wave';\nimport 'water-wave/style.css';\n\nconst MyComponent = () =\u003e\n    \u003cbutton className=\"btn\"\u003e\n        按钮\n        \u003cWaterWave color=\"#fff\" duration={800} /\u003e\n    \u003c/button\u003e;\n```\n\n#### 组件属性参数说明\n* `color` 颜色值，默认值：#ffffff\n* `alpha` 透明度，默认值：0.3\n* `duration` 动画持续毫秒数，默认值：500\n* `disabled` 是否禁用效果。默认情况下根据父节点是否被disabled决定\n* `radius` 波浪半径。默认为最大的宽度或长度。手动指定只支持传入一个确定的数字\n* `origin` 波浪圆心位置，以父节点为参考，类似`background-origin`，例如`auto`、 `left center`、 `30% 70%`、 `100 100`。默认值：auto\n* `press` 触发时机，可选值 `up`（离开时才触发mouseup touchend）、`down`（按下去立即触发tocuhstart mousedown）。默认值：up\n* `effect` 触发效果，可选值 `ripple`（中心点圆形荡漾效果）、`wave`（横向线行波纹）、`starLight`（星光发散效果）、`petal`（花瓣旋转效果）、`helix`（螺旋效果）。默认值：ripple,\n* `stopPropagation` 阻止效果冒泡。通过设置该参数为true，可以阻止父级节点触发效果。默认值：无\n\n#### waterwave事件\n当组件触发了效果时，会在当前节点派生一个名为 `waterwave` 的自定义事件。这是一个标准的DOM事件，所以可以通过 `addEventListener` 来监听。如果调用了事件的 `preventDefault`，也可以同时阻止当前节点以及所有父节点触发效果。\n\n### 效果\n#### effect = \"ripple\"\n![](https://user-images.githubusercontent.com/3774036/29410146-e8f2e4d8-8381-11e7-98ed-661c798a8d65.gif)\n\ngif图中效果代码示例：\n```jsx\n\u003cbutton className=\"btn1\"\u003eBUTTON \u003cWater /\u003e\u003c/button\u003e\n\u003cbutton className=\"btn2\"\u003eBUTTON \u003cWater /\u003e\u003c/button\u003e\n\u003cbutton className=\"btn3\"\u003eBUTTON \u003cWater color=\"#ff4081\"/\u003e\u003c/button\u003e\n\u003cbutton className=\"btn4\"\u003eBUTTON \u003cWater color=\"#26a69a\" /\u003e\u003c/button\u003e\n\u003cbutton className=\"btn5\"\u003eBUTTON \u003cWater duration={2000} /\u003e\u003c/button\u003e\n\u003cbutton className=\"btn6\"\u003eBUTTON \u003cWater duration={200} /\u003e\u003c/button\u003e\n\u003cbutton className=\"btn7\"\u003eBUTTON \u003cWater color=\"rgba(0,0,0,.5)\" duration={2000} /\u003e\u003c/button\u003e\n\u003cbutton className=\"btn8\"\u003eBUTTON \u003cWater color=\"rgba(0,0,0,.5)\" duration={200} /\u003e\u003c/button\u003e\n```\n\n#### effect = \"wave\"\n![](https://user-images.githubusercontent.com/3774036/29657635-cf385e88-88ea-11e7-9722-8ced31052ac5.gif)\n\n#### effect = \"starLight\"\n![](https://user-images.githubusercontent.com/3774036/29701337-aee4201e-899d-11e7-9390-ee0fa3d5de0c.gif)\n\n#### effect = \"petal\"\n![](https://user-images.githubusercontent.com/3774036/29701343-b94f9862-899d-11e7-825b-d5cc57c802fc.gif)\n\n### 示例\n\n点此[查看示例](http://github.boy.im/water-wave)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiqiboy%2Fwater-wave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqiqiboy%2Fwater-wave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiqiboy%2Fwater-wave/lists"}