Speaker: Nguyễn Minh Tuấn Work at: AI&T

1. • Công ty Cổ phần AI &T hoạt động chuyên nghiệp trong lĩnh vực sản xuất phần
mềm, thực hiện các dự án CNTT phục vụ trực tiếp cho khách hàng tại thị trường
Việt Nam và Nhật Bản.
• Thành lập: 23/09/2005
• Quy mô công ty: 140 nhân viên
• Trụ sở: Tầng 5, Tòa nhà Agribank, 266 Đội Cấn, Ba Đình, Hà Nội
• Tel: 84-4-3762-4015
• Fax: 84-4-3762-1594
• Website: http://www.ai-t.vn/

2. • Họ và tên : Nguyễn Minh Tuấn
• Công ty: Công ty cổ phần AI&T
• Vị trí: Project Manager
• Sở thích: đọc sách, chém gió với bạn bè
• Số điện thoại: 0988516666
• Email: tuannm1@ai-t.vn

3. Game Animation
with HTML5&CSS3
Nguyễn Minh Tuấn
0988516666
tuannm1@ai-t.vn

4. Nội dung chính
1. HTML 5 tương lai của lập trình web.
2. Một số ứng dụng thực tế trong game của AIT.
3. Tổng quan về HTML 5.
4. Animation với CSS3.
5. Kinh nghiệm làm animation với HTML 5.

5. HTML5 tương lai của lập trình web
Bảng thống kê tỷ lệ người dùng internet
40
35 32.7 34.3
30 28.8
26.6
25 23.5
20
20 15.7 16.7
15 11.1 12.7
8.6 9.4
10
5
0
2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 Jun-12
=> Sự bùng nổ của internet

6. Sự bùng nổ của internet
Thời gian Số người dùng Thời gian Số người dùng
1995 16 triệu 2004 817 triệu
1996 36 triệu 2005 1,018 triệu
1997 70 triệu 2006 1,093 triệu
1998 147 triệu 2007 1,319 triệu
1999 284 triệu 2008 1,574 triệu
2000 361 triệu 2009 1,802 triệu
2001 513 triệu 2010 1,971 triệu
2002 587 triệu 2011 2,267 triệu
2003 719 triệu 6/2012 2,405 triệu
2010 – 2011: Tăng 296 triệu người dùng
2011 – 6/2012: Tăng 138 triệu người dùng

7. Trái tim của internet là World Wide Web (WWW)
1974. Xuất hiện thuật ngữ internet
1986. Thời kỳ bùng nổ internet lần 1 với sự kết nối giữa các trường đại học.
Cho đến lúc này đối tượng sử dụng vẫn chủ yếu là các nhà nghiên cứu
1991. Thời kỳ bùng nổ internet lần 2 với sự ra đời của WWW.
Trong thời kỳ đầu, các trang web chỉ đơn thuần là kí tự và ảnh tĩnh.
Nhu cầu của con người ngày càng nâng cao, đòi hỏi các trang web phải cung cấp
nhiều nội dung hơn => nhiều công nghệ mới được ra đời.
Nhiều trình duyệt mới được ra đời

8. Trái tim của internet là World Wide Web (WWW)
Code của tôi chạy được trên IE nhưng ko chạy được trên chrome
Code của tôi chạy được trên chrome nhưng không chạy được trên Firefox
Plugins là gì, tôi có thể download ở đâu
=> Chúng ta cần phải có một chuẩn thống nhất => HTML5
Khi chúng ta nói về HTML5, chúng ta không chỉ nói về đặc tả HTML5 mà còn bao
gồm tất cả công nghệ đi cùng với nó. Ví dụ: CSS3, Web Workers, Web Storage…
Đây là các công nghệ được sử dụng cùng với HTML5 nhưng chúng là các công
nghệ độc lập và có các đặc tả riêng của mình.
HTML5
The future of web development

9. Trái tim của internet là World Wide Web (WWW)

10. Một số ứng dụng thực tế trong game của AIT
Movie 1: Race Movie 2: Battle

11. Một số ứng dụng thực tế trong game của AIT
Movie 3: VR Movie 4: Battle Noel

12. Một số ứng dụng thực tế trong game của AIT
Movie 3: Cafeidol Movie 4: 3012

13. Một số ứng dụng thực tế trong game của AIT
Movie nào được làm hoàn toàn bằng HTML 5

14. Tổng quan về HTML 5

15. Animation với CSS3&HTML5
Transform: CSS3_Function1() CSS3_Function2()
-webkit-transform: css_function…
-moz-transform: css_function…
-o-transform: css_function…
-ms-transform: css_function…
-webkit-transform: scale(2,2) translate(100,100)

16. Animation with CSS3&HTML5
CSS Function (2D Transformation)
Translate(x,y)
Rotate(degree)
Scale(x,y)
transform example

17. Animation with CSS3&HTML5
CSS Function (3D Transformation)
TranslateX(x) RotateX(x)
TranslateY(y) Translate3d(x,y,z) RotateY(y) Rotate3d(x,y,z)
TranslateZ(z) RotateZ(z)
ScaleX(x)
Skew3d(x,y,z) ScaleY(y) Scale3d(x,y,z)
ScaleZ(z)

18. Animation with CSS3&HTML5
Transition
Transition-property : Tên thuộc tính được áp dụng transition (all)
Transition-duration : thời gian thi hành hiệu ứng (5s) (500ms)
Transition-delay : thời gian trễ của hiệu ứng, có thể nhận giá trị âm ???
Transition-timming-function :
Ease : chậm – nhanh – chậm Ease-in : chậm - nhanh
Ease-in-out : nhanh – chậm Linear : đều
-webkit-transion: all 5s 0s linear

19. Animation with CSS3&HTML5
Animation
Tạo ra animation trong CSS3 có 2 bước:
1. Khai báo frame
2. Áp dụng frame vào trong animation

20. Animation with CSS3&HTML5
Animation – Tạo frame
@keyframes „vidu1‟ {
0% {width: 100px, opacity: 0}
30% {width: 150px, opacity: 0.5}
100% {width: 150px, opacity: 1}
Tại thời điểm bắt đầu animation phần tử có width = 100px, và opacity = 0
Đến khi thời gian thi hành animation được 1/3 phần tử có width = 150px,
opacity = 0.5
Tại thời điểm kết thúc animation phần tử có width = 150px, opacity = 1

21. Animation with CSS3&HTML5
Animation – Thi hành animation
Một số thuộc tính của animation trong CSS3
Animation-name: tên của keyframes được định nghĩa trước
Animation-duration: thời gian thi hành animation
Animation-delay: thời gian trễ của animation, có thể âm
Animation-timming-function: giống transition
Animation-iteration-count: số lần lặp lại animation, (infinite lặp vô hạn)
<div style=“-webkit-animation: vidu1 12s 0ms linear”>

22. Kinh nghiệm làm animation với HTML5
1. Animation không thể làm hoàn toàn bằng tay (flash,
wallaby)
2. Android 2.x không hỗ trợ SVG
3. Android 2.x không hỗ trợ thời gian delay âm
4. Android 2.x không hỗ trợ fill-out
5. translate3d(x,y,z) có hardware accelerate trên iphone
nhưng chết trên Android 2.x
6. Cùng một phiên bản hệ điều hành android, sự hỗ trợ
animation khác nhau tùy theo vendor

23. Kinh nghiệm làm animation với HTML5
7. Hiện tại xử lý canvas trong HTML 5 bằng cpu nên xử
lý chậm, với iOS 6 có hỗ trợ GPU nên canvas chạy tốt
hơn.
8. Xử lý CSS3 với hàm rotateX, rotateY, rotateZ trong
iOS dễ dẫn đến hiện tượng memleak. Tránh sử dụng
các hàm này khi làm animation nếu bạn không muốn
game bị die đột ngột.
9. Thiết kế animation ở mức 8-10 FPS là khá đảm bảo
về độ mượt trên iPhone và performance.
10. Việc quản lý bộ nhớ khi lập trình game HTML5 là rất
quan trọng, có thể sử dụng công cụ WebDevTool của
Chrome để theo dõi bộ nhớ và khoanh vùng xử lý từng
màn hình.