{"id":13640916,"url":"https://github.com/XBeats/and_cube_progress","last_synced_at":"2025-04-20T07:31:12.800Z","repository":{"id":217102148,"uuid":"74654982","full_name":"XBeats/and_cube_progress","owner":"XBeats","description":"正方体样式的loadingView","archived":false,"fork":false,"pushed_at":"2016-11-24T10:42:10.000Z","size":365,"stargazers_count":82,"open_issues_count":0,"forks_count":11,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-06T00:04:44.938Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","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/XBeats.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,"dei":null}},"created_at":"2016-11-24T08:52:04.000Z","updated_at":"2024-07-22T02:17:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"09598076-d0e0-446a-914c-898c13ef5ebb","html_url":"https://github.com/XBeats/and_cube_progress","commit_stats":null,"previous_names":["xbeats/and_cube_progress"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XBeats%2Fand_cube_progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XBeats%2Fand_cube_progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XBeats%2Fand_cube_progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XBeats%2Fand_cube_progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XBeats","download_url":"https://codeload.github.com/XBeats/and_cube_progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249864229,"owners_count":21336717,"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-08-02T01:01:15.730Z","updated_at":"2025-04-20T07:31:12.527Z","avatar_url":"https://github.com/XBeats.png","language":"Java","readme":"# and_cube_progress\n正方体样式的loadingView\n\n在[dribbble上看到的一个gif效果](https://dribbble.com/shots/1927432-PCPP-Loading-Boxes-Update)，觉得还不错。主要用动画控制，思路还是比较简单的。\n![image](http://ww2.sinaimg.cn/mw690/88120a10gw1f9wp5p7kn9g20b408cwkn.gif) \n\n## 思路   \n\n\n 1. 先要确定一个正方体如何画，由图可以看出来一个正方体有三部分组成，上部分（色值#FDFDE3）、左下部分（色值#EEDC70）和右下部分（色值#FAECA4）  \n  ![image](https://raw.githubusercontent.com/XBeats/and_cube_progress/master/screenshot/one_cube.png)  \n 2. 这三个部分其实都是一个四边相等的平行四边形（菱形），这里用path来确定每个的四边形，然后通过Canvas的变换，分配各个四边形到各自的位置，就能行成一个正方体的样式\n 3. 接下来就是要确定每个正方体的移动轨迹，就是一个选择参考点的过程，如图中选择每个正方体中的A点作为参考点，控制A点的移动，就能达到整体的移动效果  \n ![image](https://raw.githubusercontent.com/XBeats/and_cube_progress/master/screenshot/one_cube_a.png)\n 4. 阴影部分其实和上部分一致，只是位置移动到了正方体的下面，处理起来还是比较简单的\n 5. 将四个立方体按照从右往左，从上往下，依次编号（1，2，3，4） \n 6. 动画分成两部分，一是上下平移，二是左右平移；并用变量`mIsFirstPart`来区分（解决多层覆盖绘制过程）\n 7. 实际上整个过程只用了一个动画来完成的，编号1，4的立方体只移动了动画的上半部分，所以需要控制其最大/最小值。编号2，3的立方体移动了动画的完整过程。\n \n\u003e注：在立方体移动过程中，需要注意四个立方体绘制的先后顺序，不然会出现重叠情况，难以产生立体感。\n\n\n## 效果图  \n![image](https://raw.githubusercontent.com/XBeats/and_cube_progress/master/screenshot/cube_progress.gif)\n\n","funding_links":[],"categories":["进度条"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FXBeats%2Fand_cube_progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FXBeats%2Fand_cube_progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FXBeats%2Fand_cube_progress/lists"}