{"id":25144556,"url":"https://github.com/liangdrime/rlparallaxview","last_synced_at":"2025-06-17T10:41:36.231Z","repository":{"id":199370299,"uuid":"201574076","full_name":"liangdrime/RLParallaxView","owner":"liangdrime","description":"网易云歌单头部过渡效果","archived":false,"fork":false,"pushed_at":"2019-08-10T04:02:33.000Z","size":44,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T06:14:05.811Z","etag":null,"topics":["parallax-header","wang-yi-yun"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","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/liangdrime.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}},"created_at":"2019-08-10T03:29:30.000Z","updated_at":"2023-07-25T14:28:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"d323d810-b980-4e49-be0c-a77cb10366f0","html_url":"https://github.com/liangdrime/RLParallaxView","commit_stats":null,"previous_names":["liangdrime/rlparallaxview"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/liangdrime/RLParallaxView","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liangdrime%2FRLParallaxView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liangdrime%2FRLParallaxView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liangdrime%2FRLParallaxView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liangdrime%2FRLParallaxView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liangdrime","download_url":"https://codeload.github.com/liangdrime/RLParallaxView/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liangdrime%2FRLParallaxView/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260342596,"owners_count":22994837,"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":["parallax-header","wang-yi-yun"],"created_at":"2025-02-08T19:46:43.729Z","updated_at":"2025-06-17T10:41:31.217Z","avatar_url":"https://github.com/liangdrime.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RLParallaxView\n\n\n### 简介\n\n网易云歌单头部实现了高斯、视差、导航内容遮挡的效果。\u003cdel\u003e记得早期网易云的高斯还有 blur 度跟随滚动变化，类似 QQ 音药那个样子...\u003c/del\u003e\n\n### 原理\n\n- 分析了网易云的图层，看出头部背景图是单独的一个 `imageview`，同时并没有做导航与头部设置相同图片做跟随处理的操作，同时，如果这样处理也是很麻烦的。\n- 所以，想到可以在头图的基础上设置一个 `contentView`，所有的布局内容都放在这个 `contentView` 上，然后设置一个作为 `mask` 的 `layer`，用于裁减掉延伸到导航位置的内容，造成一种穿透的效果。同时，监听滚动视图的 `offset` 变化，来改变 `mask` 的大小，让遮罩始终裁切掉多余的内容，只显示导航下面的内容。\n\n### 使用\n\n```swift\nlet headerView = RLParallaxView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 300))\n// 配置视差变化的最低高度\nheaderView.backgroundMinumHeight = headerView.frame.height\n// 设置背景图\nheaderView.backgroundImage = UIImage(named: \"header.jpeg\")\n// 引用 scrollview 监听滚动变化\nheaderView.scrollView = scrollView\n// 开启背景高斯模糊效果\nheaderView.blurBackgroundImageEnabled = true\n// 顶部穿透的间隙高度，此处设置导航的高度\nheaderView.translucentHeight = 64\n// 开启顶部穿透效果\nheaderView.backgroundTranslucent = true\n\nscrollView.addSubview(headerView)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliangdrime%2Frlparallaxview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliangdrime%2Frlparallaxview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliangdrime%2Frlparallaxview/lists"}