IDG UX World 2016 Fall

Press | November 10, 2016 | Comment
5u4a0156

5u4a0157

How to make a Prey on Animation

Lab | October 22, 2016 | 3 Comments

DEMO

GET CANVAS

First of all, We need to know the full stage size and half stage size for the canvas drawing. So _sw, _sh is the stage size variable, and _cx, _cy is the half stage size variable. >> is a bitshift operator, x >> 1 is the same as Math.floor(x/2), but faster.

DRAW MOUTH

kklw
To draw the mouth animation, I’m using quadraticCurveTo for the mouth shape. During the animation, Y points (start, end, and control points) change, and we can make the mouth close/open animation using the points. For easy control of the animation, I made _guide object variable and added a tween to it. So _guide changes from 0 to 1, 0 is open mouse state, 1 is close mouse state.
Each Y points change from _open position to _close position, so using getCurrent function to get the right value. X = getCurrent(A, 10, 200); means, When A is changed 0 to 1, X changes from 10 to 200. You can set a tween to _points variable directly, in this case, I just wanted to control the animation both on Tween and mouse/finger move.
This is the code that set a tween to _points variable directly.

DRAW TOOTH

canvas-size
Draw a triangle for the tooth shape, and add grey color shadow area (1/4 width) to enhance the detail.

DRAW TEETH

cc23
To draw teeth, we need to know each position of tooth on the curved line. You can get the position using the getPointOnQuad function, set the last p parameter from 0 to 1, 0 is the first point, 1 is the last point, so 0.5 is the middle point.
One important thing of the teeth drawing, the total number should be even. We are going to draw both upper and lower teeth, and the upper teeth mesh with lower teeth.
The drawing starts from 1, not 0, and draw upper and lower by turns. See the below image for better understanding.
tott2
Draw upper teeth with y1 and c1 variables when i is an odd number, draw lower teeth with y2 and c2 variables when i is an even number.
i / _teethTotal is used to get the tooth position on the curved line.
Drawing 2d objects on Canvas shows quite good performance, you don’t even need to use WebGL. This animation works well both on desktop and mobile devices. You can download all source code at my git.
This article is a part of my new book – Code Animation : Build Animated Websites with HTML, CSS, and JavaScript. I’m writing the book these days, I hope it will be published soon.

USED LIBRARIES

  • TweenLite by GreenSock – for Open and Close animation
  • js-signals by Miller Medeiros – for the controller events dispatch

LICENSE

Copyright (c) 2016 Jongmin Kim
Licensed under the MIT license.

RELATED POSTS

  • +MON

Baby Face Emotion – I LOVE SSOL

Apps | October 13, 2016 | Comment

DESIGN

ss-1
ss-2

PICTURES

dsc08031
dsc08052

RELATED PROJECTS

  • +I love SSOL

ROLE

  • Illustrator : Sanghee Cho
  • IOS Developer : Jongmin Kim


ss-icon
 

$0.99
Category: Stickers
Released: Oct 14, 2016
Version: 1.0
Size: 0.9 MB
Language: English
© Jongmin Kim & Sanghee Cho