Skip to content

Instantly share code, notes, and snippets.

@djfumberger
Last active February 28, 2016 23:28
Show Gist options
  • Save djfumberger/822af179f81a66b2b6e9 to your computer and use it in GitHub Desktop.
Save djfumberger/822af179f81a66b2b6e9 to your computer and use it in GitHub Desktop.
Emoji Face Spec
Face Movement (Container around all face elements apart from heat)
- Three States Types
- Sad (Looks up and down)
Animation
First Part (Time 1.0, Curve: Ease Out)
y = 9
Second Part (Time 1.5, Curve: Ease Out)
y = 0
x = 0
Repeat
- Neutral (Looks side to side)
Animation
First Part (Time 0.35, Curve: Ease Out)
x = 8
Second Part (Time 0.35, Delay 0.4, Curve: Ease Out)
x = -8
Third Part (Time 0.2, Delay 0.4, Curve: Ease Out)
x = 0
* Repeat after 0.8
- Happy (Bounces side to side)
Animation
First Part (Time 0.5, Curve: Ease Out)
x = 8
y = -4
rotation = 8 degrees
Second Part (Time 0.4, Curve: Ease In)
x = 0
y = 3
rotation: 0
Third Part (Time 0.5, Curve: Ease Out)
x: -8
y: -4
rotation: -8 degrees
Fourth Part (Time 0.4, Curve Ease In)
x: 0
y: 3
rotation: 0 degrees
* Repeat
Heat
- Animation
- Fade in
- Method: Opacity
- Values
[50,0.0], [45,0.1], [40,0.2], [35,0.3], [30,0.4], [25,0.5], [20,0.6],[15,0.7],[10,0.8],[5,0.9],[0,1.0]
- Image
- face-heat.png
- 121x121
- Comments
- Not applied to ‘face movements’
Left Eye & Right Eye
- Animation
-Blinking
- Method: Frame
- Rule is every second blink 2 out of 3 times.
- Eyes blink in all states, apart from when the eyes transition into the ‘smile’ mode.
- Y Shift from Center
- Method: Position Y
- Values
[95,1], [90,2], [85,3], [80,3], [75,3], [70,4], [65,4],[60,4],[55,4], [50,4],[45,5],[40,6],[35,6.5],[30,7]
- X Shift from Center of each eye
- Method: Position X (Negative for left eye)
- Values
[95,1], [90,1], [85,2], [80,2], [75,3], [70,3], [65,4],[60,4],[55,5],[50,4],[45,4], [40,3], [35,3], [30,2], [25,2], [20,1] , [15,1] , [10,1]
- Smile States
- Method: Frames
- Values
[80,0],[85,1],[86,2],[87,3],[88,4]
- Image
- eye1.png
- 16x18
- Position
- Left Eye: x: 37, y: 40
- Right Eye: x: 67, y: 40
Mouth
- Animation
- Sad to happy transition
- Method: Frame
- Values [95,1], [90,2], [85,3], [80,4], [75,5], [70,6], [65,7],[62,8],[60,9],[58,10],[55,11],[50,11],[45,12],[43,13],[40,14],[35,15],[30,16],[25,17],[20,18]
- Y Offset
- Method: PositionY
- Values: [95,1], [90,2], [85,3], [80,3], [75,3], [70,4], [65,4],[60,5],[55,5],[50,6], [45,7], [40,7], [35,8], [30,8], [25,10], [20,10]
- Image:
- mouth1.png
- 77x40
- Position
- x: 23, y:66
Left Eyebrow & Right eyebrow
- Animation
- Fade In
- Method: Opacity
- Modulation: [15,18],[1,0]
- X Offset (Negative for left eyebrow)
- Method: Position X
- Modulation: [15,20],[3,0]
- Y Offset
- Method: Position Y
- Modulation: [15,20],[3,0]
- Position
- Left Eyebrow: x: 21, y: 28, rotationZ: -10
- Right Eyebrow: x: 60, y: 28, rotationZ: -10 rotationY: 180 (flipped)
Sweat
- Animation (Container)
- Fade In
- Method: Opacity
- Modulation: ([15,25], [1,0]) + ([80,100], [0,1])
- Animation (Sweat Bubble)
Animation Delay
- 1.0 seconds for first sweat bubble
- 2.0 seconds for second sweat bubble
First Part (Time 0.8, Linear Curve)
- Scale from 0 to randomChoice([0.7, 0.6,0.8,0.9,0.5]
- Y Transform = Original Y + 50
Second Part (Time 0.6)
Properties
- Opacity 0
- Y Transform = 70
- Notes
- Two bubbles for sad, one bubble for happy (only the right one
- Image
- sweat.png
- 34x58
- Position
- Sweat One: x: -15 y: -10
- Sweat Two: x: 80 y: -26
@djfumberger
Copy link
Author

‘Modulation’ means the Y value should be smoothed between the X input.
‘Values’ means it should just take the closest Y value based on the X input.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment