{"id":13682170,"url":"https://github.com/brutella/chatheads","last_synced_at":"2025-04-04T13:10:08.740Z","repository":{"id":8128592,"uuid":"9545808","full_name":"brutella/chatheads","owner":"brutella","description":"An implementation of Facebook's ChatHeads on iOS.","archived":false,"fork":false,"pushed_at":"2016-07-13T16:35:14.000Z","size":3957,"stargazers_count":874,"open_issues_count":9,"forks_count":132,"subscribers_count":58,"default_branch":"master","last_synced_at":"2025-03-28T12:06:33.151Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brutella.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-04-19T13:16:25.000Z","updated_at":"2024-11-17T14:44:28.000Z","dependencies_parsed_at":"2022-08-23T20:30:06.974Z","dependency_job_id":null,"html_url":"https://github.com/brutella/chatheads","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brutella%2Fchatheads","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brutella%2Fchatheads/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brutella%2Fchatheads/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brutella%2Fchatheads/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brutella","download_url":"https://codeload.github.com/brutella/chatheads/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182344,"owners_count":20897379,"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-02T13:01:41.755Z","updated_at":"2025-04-04T13:10:08.719Z","avatar_url":"https://github.com/brutella.png","language":"Objective-C","readme":"# ChatHeads\n\nChatHeads is a new feature in [Facebook.app 6.0](http://www.theverge.com/2013/4/16/4230274/facebook-6-0-for-ipad-and-iphone-hands-on-with-chat-heads-stickers) where little bubbles appear in the iOS app when somebody sends you a message. It's a nice little feature and uses very cool animations.\n\nThis project is an attempt to re-implement this feature and to figure out how the animations are done. \nI don't support this project in a way to completely implement all features of ChatHeads. It should only illustrate how parts of ChatHeads are done.\n\n## Make it Build\n\nDon't forget to run `git submodule update --init` before building the project. I've added [SKBounceAnimation][SKBounceAnimation-link] and [CAAnimationBlocks](https://github.com/xissburg/CAAnimationBlocks) in the last update.\n\n## The Design\n\nChatHeads in Facebook.app are little bubbles which show the Friends avatar. They can be dragged around and will snap to the left or right screen edge if they are released. If a ChatHead bubble is pressed, the conversation view appears and the bubbles are arranged at the top of the screen.\n\nThe goal of this project was to implement the interaction (drag and release, pressing) with the ChatHead bubbles as well as the animations.\n\n### Interaction Concept\n\nChatHead bubbles are always snapped to the left or right screen edge. They are partially moved outside of the screen to not cover too much space. The bubbles can be dragged around the screen and will always snap to the screen edge based on where they are released.\n\n![](Resources/Interaction.png)\n\nAll animations have nice bounce effects to make them feel more natural. For example when releasing a ChatHead in the center of the screen, the bubble will snap to the edge and bounce back and forth.\n\n![](Resources/Animation.png)\n\nThe animation bounce depends on the speed so when a bubble moves very fast it also bounce much more. \n\n### Animations\n\nI've tried to implement all animations similar to the Facebook.app and make them feel the same. There are a lot of small animations which I had overlooked at first. Here are some explained in more detail.\n\n#### Touching and Dragging\n\nWhen a bubble is touched, it's scaled down to give a nice feeling of depth. \nWhen the bubble is released or dragged it gets scaled up again with a nice bounce animation.\n\n[Video](https://dl.dropboxusercontent.com/u/2187517/Uploads/ChatHeads/touch.m4v)\n\n#### Dragging and Releasing\n\nThe bubbles can be dragged anywhere on the screen and doesn't block the underlyng UI. After releasing the bubble, it gets moved to the snap position. At the end of the animation, there is a little bounce effect. The intensity of the bounce effect depends on the distance between the release and destination location. \n\n[Video](https://dl.dropboxusercontent.com/u/2187517/Uploads/ChatHeads/move.m4v)\n\n#### Pressing\n\nIf a bubble is pressed (touched but not moved), it gets moved to the top of the screen and a new view appears below it. Facebook presents the conversation history in this view. It's nice that popup view also animates with the same bounce effect as all other animations.\n\n[Video](https://dl.dropboxusercontent.com/u/2187517/Uploads/ChatHeads/states.m4v)\n\n### Implementation\n\n#### Classes\nThe main two classes are `CHDraggableView` and `CHDraggingCoordinator`. `CHDraggableView` is (as the name already tells) a view which can be dragged around and can contain an arbitrary view. In this project the `CHAvatarView` represents a ChatHead bubble is added as a subview to the `CHDraggableView`. The `CHDraggingCoordinator` is a delegate of the `CHDraggableView` is coordinates where the view should be snapped it. The animation of the bubble is done in the `CHDraggableView`.\n\n#### Animations\n\u003cdel\u003eThe bouncing effect is calculated dynamically based on the distance between the release and destination location.\u003c/del\u003e\n\n\u003cdel\u003eTo get the intensity of the bounce, I calculated the `distance` and `angle` between the start and end point. The `bounceDistance` is 4% of the `distance`.\u003c/del\u003e\n\n\u003cdel\u003eBased on the angle I calculated `deltaX = sin(angle) * bounceDistance` and `deltaY = cos(angle) * bounceDistance`.\u003c/del\u003e\n\n![](Resources/math.pdf)\n\n\u003cdel\u003eThe bubble is first animated to the bounce location and then to the end point.\u003c/del\u003e\n\n**Update 2013-04-24**\nThe bounce animation is now based on a spring mass damper system. Thanks for the tip [Joe Ricioppo](https://twitter.com/joericioppo/status/325325036011520000).\n\nThere is an articel from [Soroush Khanlou](http://khanlou.com/2012/01/dampers-and-their-role-in-physical-models/) where he explains the math of a spring mass damper and builds the foundation for another [post](http://khanlou.com/2012/01/cakeyframeanimation-make-it-bounce/) where he implemented a bounce animation in Objective-C called [SKBounceAnimation][SKBounceAnimation-link]. This library calculates values for a bounce animation based on the following equation.\n\n![](Resources/equation.gif)\n\nWith this equation and correct values from omega (0.06) and alpha (0.04), a simple 1d animation from `x = 300` to `x = 100` could look like this.\n\n![](Resources/bounce_animation.png)\n\nThat's much better way of doing bounce animations.\n\n#### Avatar Drawing\n\n![](Resources/avatar.png)\n\nThe drawing of the bubble is done in `CHAvatarView` by using an image and adding a black drop shadow and a white inner shadow.\n\n[SKBounceAnimation-link]: https://github.com/khanlou/SKBounceAnimation\n","funding_links":[],"categories":["Objective-C","etc"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrutella%2Fchatheads","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrutella%2Fchatheads","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrutella%2Fchatheads/lists"}