{"id":2337,"url":"https://github.com/alsedi/RippleEffectView","last_synced_at":"2025-08-02T23:33:34.914Z","repository":{"id":62452957,"uuid":"66220179","full_name":"alsedi/RippleEffectView","owner":"alsedi","description":"RippleEffectView - A Neat Rippling View Effect","archived":false,"fork":false,"pushed_at":"2016-12-15T15:48:52.000Z","size":17383,"stargazers_count":316,"open_issues_count":1,"forks_count":21,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-24T14:47:58.168Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://blog.alsedi.com","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alsedi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-21T20:52:44.000Z","updated_at":"2024-04-05T11:18:59.000Z","dependencies_parsed_at":"2022-11-01T23:45:50.442Z","dependency_job_id":null,"html_url":"https://github.com/alsedi/RippleEffectView","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alsedi%2FRippleEffectView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alsedi%2FRippleEffectView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alsedi%2FRippleEffectView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alsedi%2FRippleEffectView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alsedi","download_url":"https://codeload.github.com/alsedi/RippleEffectView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228503208,"owners_count":17930538,"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-01-05T20:16:11.219Z","updated_at":"2024-12-06T17:31:04.553Z","avatar_url":"https://github.com/alsedi.png","language":"Swift","funding_links":[],"categories":["UI","Animation"],"sub_categories":["Animation","Other free courses"],"readme":"# RippleEffectView\nNot only Uber-like animated screen background.\n\n[![Swift 3.0](https://img.shields.io/badge/Swift-3.x-orange.svg?style=flat)](https://developer.apple.com/swift/)\n[![Pod](https://img.shields.io/cocoapods/p/RippleEffectView.svg?style=flat)](http://cocoapods.org/pods/RippleEffectView)\n[![Twitter](https://img.shields.io/badge/Twitter-@ALSEDI-blue.svg?style=flat)](http://twitter.com/alsedi)\n[![Blog](https://img.shields.io/badge/Blog-ALSEDI-green.svg?style=flat)](http://blog.alsedi.com)\n\nRippleEffectView inspired by RayWenderlich.com article [How To Create an Uber Splash Screen](https://www.raywenderlich.com/133224/how-to-create-an-uber-splash-screen)\n\n## How it may looks like \n### Basic customization (color randomization)\n``` swift\nrippleEffectView.tileImageRandomizationClosure = { rows, columns, row, column, image in\n  let newImage = image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)\n  UIGraphicsBeginImageContextWithOptions(image.size, false, newImage.scale)\n  UIColor.random.set()\n  newImage.drawInRect(CGRectMake(0, 0, image.size.width, newImage.size.height));\n  if let titledImage = UIGraphicsGetImageFromCurrentImageContext() {\n    UIGraphicsEndImageContext()\n    return titledImage\n  }\n  UIGraphicsEndImageContext()\n  return image\n}\n```\n``` swift \nrippleEffectView.magnitude = -0.6\n```\n![rippleEffectView.magnitude = -0.6](rippleEffectView1.gif)\n\n``` swift \nrippleEffectView.magnitude = 0.2\n```\n![rippleEffectView.magnitude = 0.2](rippleEffectView2.gif)\n\n### Complex customization\n``` swift\nrippleEffectView.tileImageCustomizationClosure = { rows, columns, row, column, image in\n  let newImage = image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)\n  UIGraphicsBeginImageContextWithOptions(image.size, false, newImage.scale)\n      \n  let xmiddle = (columns % 2 != 0) ? columns/2 : columns/2 + 1\n  let ymiddle = (rows % 2 != 0) ? rows/2 : rows/2 + 1\n      \n  let xoffset = abs(xmiddle - column)\n  let yoffset = abs(ymiddle - row)\n      \n  UIColor(hue: 206/360.0, saturation: 1, brightness: 0.95, alpha: 1).colorWithAlphaComponent(1.0 - CGFloat((xoffset + yoffset)) * 0.1).set()\n      \n  newImage.drawInRect(CGRectMake(0, 0, image.size.width, newImage.size.height));\n  if let titledImage = UIGraphicsGetImageFromCurrentImageContext() {\n    UIGraphicsEndImageContext()\n    return titledImage\n  }\n  UIGraphicsEndImageContext()\n  return image\n}\n```\n``` swift\nrippleEffectView.rippleType = .Heartbeat\nrippleEffectView.magnitude = 0.2\n```\n![rippleEffectView.magnitude = 0.2](rippleEffectView3.gif)\n\n\n## Requirements\n- Swift 3.0+\n- iOS 9.3+\n- Xcode 8.0+\n\n# Installation\n\n## CocoaPods\nRippleEffectView is available through [CocoaPods](http://cocoapods.org/pods/RippleEffectView). To install\nit, simply add the following line to your Podfile:\n\n```ruby\ntarget 'Your Project' do\n   use_frameworks!\n   pod \"RippleEffectView\"\nend\n```\n\n### Manual\nCopy `RippleEffectView.swift`to your project, then \n\n#Usage\nAdd new RippleEffectView, assign `tileImage` and call `startAnimating()`.\n``` swift\nrippleEffectView = RippleEffectView()\nrippleEffectView.tileImage = UIImage(named: \"some image\")\nrippleEffectView.magnitude = 0.2\nrippleEffectView.cellSize = CGSize(width:50, height:50)\nrippleEffectView.rippleType = .heartbeat\nview.addSubview(rippleEffectView)\n```\nNB! startAnimating doesn't work if called in viewDidLoad and viewWillAppear. Working on fix. Place `startAnimating()` in `viewDidAppear()`\n\n## Configurable properties\nNB! RippleEffectView initialize itself with parent view bounds automatically, so you do not need to set it manually. If you need to use it in limited view, then use auxiliary view, e.g.\n\nAnimation uses `transform`, `scale` and `opacity`. \n\n### Special properties\n1. `tileImage` UIImage that will displayed in every title. RippleEffectView uses size of image to calculate grid size. No default value.\n2. `animationDuraton`. Default `3.5`\n3. `magnitude` force that will be applied to every circle to create ripple effect. Uber-like effect is about `0.1` - `0.2`. GIF example `-0.8`\n4. `cellSize` size of tile. Could be helpful if vector image used. Property is optional, if not set then tileImage size will be used.\n5. `rippleType` Type of ripple effect. `.OneWave` and `.Heartbeat`. Default `.OneWave`\n\n##Read-only properties\n1. `rows` rows count\n2. `columns` columns count\n\n## Methods\n`stopAnimating` Start ripple animation\n`startAnimating` Stop all animations\n\n### Manual control of the grid.\nYou will need this if you change `tileImageRandomizationClosure`. When you call `renderGrid` to recreate all items.\nIf you want just remove all items (e.g. memory warning) then call `removeGrid`\n\n## Callbacks\n### Tile image customization.\n\nYou may setup image for each grid view individually, or customize one that assigned in `tileImage`. (See Demo project for example code)\n``` swift\nvar tileImageRandomizationClosure: RandomizationClosure? = (totalRows:Int, totalColumns:Int, currentRow:Int, currentColumn:Int, originalImage:UIImage)-\u003e(UIImage)\n```\n\n### Animation Finished\nMain purpose of this component is to create animated screen background. You may stop animation and hide a screen as soon as data available, or wait for the animation end and the show the data.\n``` swift\nrippleEffectView.animationDidStop = { _ in \n  // do something\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falsedi%2FRippleEffectView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falsedi%2FRippleEffectView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falsedi%2FRippleEffectView/lists"}