• Stars
    star
    883
  • Rank 51,702 (Top 2 %)
  • Language
    Objective-C
  • License
    ISC License
  • Created over 11 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An implementation of Facebook's ChatHeads on iOS.

ChatHeads

ChatHeads is a new feature in Facebook.app 6.0 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.

This project is an attempt to re-implement this feature and to figure out how the animations are done. I 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.

Make it Build

Don't forget to run git submodule update --init before building the project. I've added SKBounceAnimation and CAAnimationBlocks in the last update.

The Design

ChatHeads 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.

The goal of this project was to implement the interaction (drag and release, pressing) with the ChatHead bubbles as well as the animations.

Interaction Concept

ChatHead 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.

All 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.

The animation bounce depends on the speed so when a bubble moves very fast it also bounce much more.

Animations

I'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.

Touching and Dragging

When a bubble is touched, it's scaled down to give a nice feeling of depth. When the bubble is released or dragged it gets scaled up again with a nice bounce animation.

Video

Dragging and Releasing

The 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.

Video

Pressing

If 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.

Video

Implementation

Classes

The 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.

Animations

The bouncing effect is calculated dynamically based on the distance between the release and destination location.

To 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.

Based on the angle I calculated deltaX = sin(angle) * bounceDistance and deltaY = cos(angle) * bounceDistance.

The bubble is first animated to the bounce location and then to the end point.

Update 2013-04-24 The bounce animation is now based on a spring mass damper system. Thanks for the tip Joe Ricioppo.

There is an articel from Soroush Khanlou where he explains the math of a spring mass damper and builds the foundation for another post where he implemented a bounce animation in Objective-C called SKBounceAnimation. This library calculates values for a bounce animation based on the following equation.

With 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.

That's much better way of doing bounce animations.

Avatar Drawing

The drawing of the bubble is done in CHAvatarView by using an image and adding a black drop shadow and a white inner shadow.

More Repositories

1

hc

hc is a lightweight framework to develop HomeKit accessories in Go.
Go
1,741
star
2

hkcam

Open-Source HomeKit Surveillance Camera
Go
881
star
3

hap

The HomeKit Accessory Protocol (hap) implemented in Go
Go
289
star
4

can

Connect to a CAN bus in Go
Go
198
star
5

dnssd

This library implements Multicast DNS (mDNS) and DNS-Based Service Discovery (DNS-SD) for Zero Configuration Networking in Go.
Go
174
star
6

hklifx

LIFX HomeKit bridge
Go
106
star
7

hkknx-public

hkknx is a HomeKit KNX bridge for KNX.
89
star
8

swift-csv

Fast and memory-efficient CSV library in Swift.
Swift
80
star
9

hklight

Example project of a HomeKit light bulb using HomeControl
Go
39
star
10

canopen

Communicate with other CANopen nodes in Go
Go
26
star
11

TextViewLineNumbers

Implementation of NSTextView with line numbers
Swift
25
star
12

simplediff-swift

simplediff is a simple diff algorithm implementation in Swift.
Swift
16
star
13

nsuserdefaults-macros

Some handy NSUserDefaults macros/functions
Objective-C
15
star
14

NSTreePopUpButton

An NSPopUpButton subclass which supports binding to NSTreeController
Swift
15
star
15

uvr

Communicate with an UVR1611 over the CAN bus
Go
10
star
16

hkuvr1611

UVR1611 HomeKit bridge
Go
9
star
17

log-swift

Logging to console and file
Swift
9
star
18

Axt

A forgiving HTML SAX Parser for iOS
Objective-C
9
star
19

gouvr

Library to decode the data bus of UVR 1611 and similar devices
Go
7
star
20

hkuvr

HomeKit bridge for UVR1611
Go
5
star
21

hksymo

HomeKit bridge for Fronius Symo inverter
Go
3
star
22

Journal

Easy file logging in Swift
Swift
3
star
23

XCollectionData

Swift
2
star
24

comment-generator

Ruby classes to generate comment templates from source code
Ruby
2
star
25

git-diff

Compare git branches, tags and commits in your favourite diff tool.
Shell
1
star
26

C3Presentation

Slides about C++ programming built with deck.js and deckem
JavaScript
1
star
27

geizhals

Fetch prices from Geizhals
Go
1
star