{"id":13466583,"url":"https://github.com/KaoruMuta/IGStoryButtonKit","last_synced_at":"2025-03-25T21:32:43.363Z","repository":{"id":39650302,"uuid":"325588331","full_name":"KaoruMuta/IGStoryButtonKit","owner":"KaoruMuta","description":"IGStoryButtonKit provides an easy-to-use button with rich animation and multiple way inspired by instagram story/stories.","archived":false,"fork":false,"pushed_at":"2023-04-06T13:14:08.000Z","size":12324,"stargazers_count":36,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-13T14:46:50.163Z","etag":null,"topics":["button-animation","instagram","instagram-stories","instagram-story","ios","ios-animation","story","swift","uibutton-activity-indicator","uikit"],"latest_commit_sha":null,"homepage":"https://speakerdeck.com/kaorumuta/chu-meteosswozuo-tutegong-kai-sitahua","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/KaoruMuta.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-12-30T15:45:50.000Z","updated_at":"2024-06-03T09:05:11.000Z","dependencies_parsed_at":"2024-01-29T18:06:31.417Z","dependency_job_id":null,"html_url":"https://github.com/KaoruMuta/IGStoryButtonKit","commit_stats":{"total_commits":101,"total_committers":1,"mean_commits":101.0,"dds":0.0,"last_synced_commit":"5b2617f169275eac73545b281e8d69f98a172f1c"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaoruMuta%2FIGStoryButtonKit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaoruMuta%2FIGStoryButtonKit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaoruMuta%2FIGStoryButtonKit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaoruMuta%2FIGStoryButtonKit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KaoruMuta","download_url":"https://codeload.github.com/KaoruMuta/IGStoryButtonKit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222092169,"owners_count":16929803,"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":["button-animation","instagram","instagram-stories","instagram-story","ios","ios-animation","story","swift","uibutton-activity-indicator","uikit"],"created_at":"2024-07-31T15:00:46.780Z","updated_at":"2024-10-29T18:32:11.410Z","avatar_url":"https://github.com/KaoruMuta.png","language":"Swift","funding_links":[],"categories":["Libs","UI [🔝](#readme)"],"sub_categories":["UI"],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/KaoruMuta/IGStoryButtonKit/blob/master/assets/logo.png\"\u003e\n\u003c/p\u003e\n\n![Swift-version](https://img.shields.io/badge/swift-5.3%2B-orange)\n![CocoaPods](https://img.shields.io/badge/pod-v1.0.1-red)\n![Carthage](https://img.shields.io/badge/carthage-0.37.0%2B-blue)\n![License](https://img.shields.io/github/license/KaoruMuta/IGStoryButtonKit)\n\n# Introduction\n\nHave you ever seen UI like instagram story, haven't you?\nActually, features like instagram story have been implemented in many applications recently.\n\nIn order to implement these features like instagram story or rich UI quickly, IGStoryButtonKit provides an easy-to-use button so called `IGStoryButton` with rich animation and multiple way inspired by instagram story.\n\n# Usage and Example\n\n## Display Type\n\nIGStoryButton has four display types; `seen`, `unseen`, `status`, `none` as the part of `IGStoryButton.DisplayType`. (`status` has two type; one is set color as an argument, the other is set image as an argument.)\nThe appearance of IGStoryButton depends on these display types.\n\n## Color Type\n\nCircle ring which surrounds IGStoryButton has four color types: `default`, `black`, `clear`, `custom` as the part of `IGStoryButton.ColorType`.\n\n|              | default                                | black                                | clear             | custom(colors:)       |\n| ------------ | -------------------------------------- | ------------------------------------ | ----------------- | --------------------- |\n| actual value | `[UIColor.systemPink, UIColor.orange]` | `[UIColor.black, UIColor.lightGray]` | `[UIColor.clear]` | value set in argument |\n\n## Appearance by specific display and color types\n\nThe detail is as follows. Once you only set DisplayType, color of outside circle ring is automatically set as default color for the first time.\n\n|               | seen                                                                                              | unseen                                                                                              | status(color:)                                                                                            | status(image:)                                                                                            | none                                                                                              |\n| ------------- | ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| appearance    | \u003cimg src=\"https://github.com/KaoruMuta/IGStoryButtonKit/blob/master/assets/DisplayType.seen.png\"\u003e | \u003cimg src=\"https://github.com/KaoruMuta/IGStoryButtonKit/blob/master/assets/DisplayType.unseen.png\"\u003e | \u003cimg src=\"https://github.com/KaoruMuta/IGStoryButtonKit/blob/master/assets/DisplayType.status.color.png\"\u003e | \u003cimg src=\"https://github.com/KaoruMuta/IGStoryButtonKit/blob/master/assets/DisplayType.status.image.png\"\u003e | \u003cimg src=\"https://github.com/KaoruMuta/IGStoryButtonKit/blob/master/assets/DisplayType.none.png\"\u003e |\n| default color | ColorType.black                                                                                   | ColorType.default                                                                                   | ColorType.clear                                                                                           | ColorType.clear                                                                                           | ColorType.clear                                                                                   |\n\n## Customize Color and Image\n\nYou can customize which color is set to circle ring, status view in the lower right named in `statusView` after that and which image is set to status as follows. If you configure display and color type of IGStoryButton, you first import `IGStoryButtonKit` and set value to the property named `condition` derived from `IGStoryButton.TypeCondition` consisted of `IGStoryButton.DisplayType`, `IGStoryButton.ColorType`.\n\nPlease refer to these codes, comments and implementation of sample app named in `ExampleApp`.\n\n```swift\n// import this module\nimport IGStoryButtonKit\n\n// storyButton: instance after initialization via code or interface builder\n// set displayType as .seen, and default color is set to color of circle ring because colorType is not set specifically\nstoryButton.condition = .init(display: .seen)\n// same thing with above\nstoryButton.condition = IGStoryButton.TypeCondition(display: .seen)\n\n// if you set color to statusView, you set StatusView.DisplayType.color(of:) as type and specific color as UIColor in the argument of StatusView.DisplayType.color\nstoryButton.condition = .init(display: .status(type: .color(of: UIColor.green)))\n\n// if you set image to statusView, you set StatusView.DisplayType.image(of:) as TypeCondition.DisplayType and specific image as UIImage in the argument of StatusView.DisplayType.image\nstoryButton.condition = .init(display: .status(type: .image(of: UIImage(named: \"ramen\"))))\n\n// if you customize color of circle ring, you set ColorType.custom(colors:) in the argument as TypeCondition.ColorType and set the specific array consisted of UIColor to the argument of ColorType.custom\nstoryButton.condition = .init(display: .status(type: .color(of: UIColor.green)), color: .custom(colors: [UIColor.cyan, UIColor.yellow, UIColor.gray]))\n```\n\n## Indicator Manipulation\n\nYou can manipulate whether circle ring performs like activity indicator or not. If you want to start loading, execute `startAnimating(speed:, alpha:)`. Besides, if you want to stop loading, execute `stopAnimating`.\n\n```swift\n// storyButton: instance after initialization via code or interface builder\n// if you want to set rotation speed and alpha of button, set these in argument of startAnimating(speed:, alpha):\nstoryButton.startAnimating() // speed: 0.2, alpha: 0.7\nstoryButton.stopAnimating()\n```\n\n## Important Notification\n\nIGStoryButton is initialized by code or interface builder, but the size of width and height is `required to be equal`. If the size of width is different from one of width, `fatalError(\"The size of width and height are required to be equal\")` is expected to be occurred.\n\n# Requirements\n\nSwift 5.3+\u003cbr\u003e\niOS 13.0+\u003cbr\u003e\nXcode 12.0+\n\n# Installation\n\n## CocoaPods\n\nAdd following to your Podfile and execute `pod install`\n\n```rb\ntarget 'MyApp' do\n  pod 'IGStoryButtonKit'\nend\n```\n\n## Carthage\n\nAdd following to your Cartfile and execute `carthage bootstrap --platform iOS --use-xcframeworks`, and finally import xcframeworks in your project\n\n```\ngithub \"KaoruMuta/IGStoryButtonKit\"\n```\n\n## Swift Package Manager\n\nEnter this: `https://github.com/KaoruMuta/IGStoryButtonKit` as Swift Package\n\n# Contribution\n\nIf you find any issue, please let me know on Issues. Also, If you propose and implement new features, please open Pull Requests following templates.\n\nLet's discuss together to improve that this OSS becomes more convenient for developers!\np.s. I'm really happy and improve a motivation to give me star :)\n\n# Future Work\n\n- [ ] Introduce loading animation with dash line to make current animation richer (High Priority, but it seems difficult)\n- [ ] Styling design something else (ex. border's width)\n- [ ] Code refactor\n\n# License\n\nUnder MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKaoruMuta%2FIGStoryButtonKit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKaoruMuta%2FIGStoryButtonKit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKaoruMuta%2FIGStoryButtonKit/lists"}