< Return to Video

Animating styles with RAF (Video Version)

  • 0:01 - 0:03
    Ta lại quay lại về cái đếm ngược Oh Noes.
  • 0:04 - 0:07
    Giờ nếu ta muốn ảnh của Oh Noes to dần ra
  • 0:07 - 0:10
    khi đếm ngược dần về 0,
  • 0:10 - 0:12
    thì phải làm thế nào?
  • 0:13 - 0:15
    Một cách làm là tạo ảnh động
  • 0:15 - 0:19
    với CSS của ảnh này với window.setInterval.
  • 0:21 - 0:23
    Bước đầu tiên, tôi sẽ tìm ảnh này
  • 0:23 - 0:25
    và gán nó vào một biến.
  • 0:25 - 0:30
    ohnoes = document.getElemenyById("ohnoes");
  • 0:32 - 0:34
    Ta đặt style khởi điểm,
  • 0:34 - 0:37
    tức là sẽ bắt đầu từ chiều rộng này.
  • 0:37 - 0:39
    Rồi ảnh sẽ lớn dần ra từ đó.
  • 0:40 - 0:44
    Giờ ta viết một hàm makeItBigger
  • 0:45 - 0:48
    để làm ảnh to ra từng chút một.
  • 0:48 - 0:53
    Ở đây ta lấy giá trị style.width,
  • 0:53 - 0:58
    lấy giá trị style.width từ trước và cộng thêm 1 vào.
  • 1:00 - 1:05
    Cuối cùng tôi sẽ gọi hàm setInterval với hàm này.
  • 1:05 - 1:08
    window.setInterval(makeItBigger),
  • 1:08 - 1:10
    Ta muốn nó to lên từng nào nào?
  • 1:10 - 1:12
    Hỏi cách khác là cứ bao lâu thì sẽ to lên 1 lần?
  • 1:12 - 1:14
    Nếu ta ma muốn tạo một hình ảnh động thật mượt,
  • 1:14 - 1:15
    thì tức là sẽ cần thay đổi trong khoảng tần suất
  • 1:15 - 1:18
    24 khung hình mỗi giây tới 60 khung hình mỗi giây.
  • 1:19 - 1:24
    Tôi sẽ thử với 30 khung hình mỗi giây, tức là 1000/3.
  • 1:26 - 1:28
    Không được rồi.
  • 1:29 - 1:31
    Bạn biết tại sao không? Hơi rắc rối đấy.
  • 1:31 - 1:34
    Ta sẽ xem lại xem nào.
  • 1:34 - 1:39
    Giá trị của ohnoes.style.width
  • 1:39 - 1:41
    sau khi chạy dòng lệnh này là bao nhiêu nào?
  • 1:42 - 1:46
    Chắc là 50px rồi sẽ đến 51px rồi,
  • 1:46 - 1:50
    nhưng ta cứ log ra xem ohnoes.style.width là bao nhiêu.
  • 1:50 - 1:53
    Ta đặt cái này vào trong infoDiv.
  • 1:53 - 1:56
    Nó sẽ bằng...
  • 1:59 - 2:01
    50px, okay.
  • 2:01 - 2:05
    Rồi khi ta cộng thêm 1 vào 50px,
  • 2:06 - 2:08
    50px thêm 1 là gì?
  • 2:08 - 2:11
    Bạn đoán là 51px, nhưng JS
  • 2:11 - 2:15
    coi 50px là 1 string,
  • 2:16 - 2:20
    nên thêm 1 sẽ thành 50px1,
  • 2:20 - 2:23
    tức là chả có ý nghĩa gì.
  • 2:23 - 2:26
    Như vậy là trình duyệt sẽ không
  • 2:26 - 2:29
    thay đổi thuộc tính width theo giá trị dở hơi này được rồi.
  • 2:30 - 2:34
    Vậy là ta sẽ cần chuyển đổi string với đơn vị pixel này
  • 2:34 - 2:36
    về kiểu số,
  • 2:36 - 2:38
    rồi cộng 1 vào số đó,
  • 2:38 - 2:40
    rồi lại thêm "px" vào sau.
  • 2:41 - 2:45
    Ta có thể đặt cái này vào trong parseFloat,
  • 2:46 - 2:48
    thế là đổi được về dạng số.
  • 2:48 - 2:50
    Rồi ta đóng ngoặc cụm này lại,
  • 2:50 - 2:53
    và thêm "px" vào sau.
  • 2:53 - 2:56
    Được rồi. Ảnh đang to dần lên rồi.
  • 2:58 - 3:00
    Bạn thấy cái lằng nhằng
  • 3:00 - 3:01
    trong việc tạo hình động với CSS
  • 3:01 - 3:04
    là thường nó sẽ có cả chữ đơn vị ở sau giá trị số nữa, bạn sẽ phải
  • 3:04 - 3:06
    chuyển bỏ đơn vị đó đi... trời ơi ảnh to quá...
  • 3:06 - 3:10
    bạn phải bỏ chữ đơn vị đó ra rồi lại đưa nó lại vào sau.
  • 3:13 - 3:15
    Ảnh này to ra quá rồi.
  • 3:15 - 3:17
    Còn một vài vấn đề thường gặp
  • 3:17 - 3:21
    khi sử dụng setInterval để thay đổi thuộc tính CSS.
  • 3:22 - 3:24
    Đầu tiên là trình duyệt sẽ không phải lúc nào cũng
  • 3:24 - 3:28
    đợi đúng theo số interval này.
  • 3:29 - 3:32
    Nếu có event gì khác xảy ra, như là khi người dùng sử dụng trình duyệt,
  • 3:32 - 3:36
    gõ gì đó chẳng hạn, thì có thể trình duyệt sẽ đợi xong event đó mới gọi hàm callback này,
  • 3:36 - 3:38
    thì hoạt hình động trông sẽ không được mượt.
  • 3:39 - 3:42
    Thứ 2 nữa là trình duyệt sẽ gọi hàm này
  • 3:42 - 3:43
    kể cả khi tab này ẩn đi,
  • 3:43 - 3:47
    tức là sẽ tiêu tốn tài nguyên của máy tính.
  • 3:48 - 3:50
    Vì vậy nên là các trình duyệt hiện đại
  • 3:50 - 3:52
    có một hàm mới,
  • 3:52 - 3:56
    chuyên dùng để tạo hoạt hình với DOM,
  • 3:56 - 3:59
    gọi là window.requestAnimationFrame.
  • 3:59 - 4:03
    Làm việc với hàm đó, đầu tiên ta sẽ bỏ dòng setInterval này đi
  • 4:03 - 4:08
    và gọi hàm requestAnimationFrame()
  • 4:09 - 4:12
    ở trong hàm này.
  • 4:12 - 4:15
    Và ta sẽ chỉ nó đến
  • 4:15 - 4:18
    hàm makeItBigger.
  • 4:19 - 4:24
    Rồi sẽ sẽ gọi hàm makeItBigger() ngay khi tải trang web.
  • 4:28 - 4:31
    Oh! Ảnh này đang to lên nahnh quá.
  • 4:31 - 4:35
    Trình duyệt đang gọi hàm makeItBigger liên tục
  • 4:35 - 4:38
    mỗi khi cập nhật ảnh, tức là vào khoảng 60 khung hình một giây,
  • 4:38 - 4:40
    tức là gấp đôi tần số vừa rồi.
  • 4:40 - 4:43
    Hàm này cứ mỗi lần lại cộng thêm 1px vào chiều rộng,
  • 4:43 - 4:45
    tính toán ra thì
  • 4:45 - 4:48
    là cộng thêm 60px mỗi giây.
  • 4:48 - 4:51
    Chỉ vài giây là ảnh đã to hơn cả trang rồi.
  • 4:51 - 4:53
    Giờ to quá đi mất rồi.
  • 4:53 - 4:56
    Vậy làm sao để làm chậm hoạt hình này lại?
  • 4:56 - 4:59
    Có một vài cách, nhưng một cách tôi thích dùng
  • 4:59 - 5:01
    là kiểm tra xem đã chạy bao nhiêu giây rồi,
  • 5:01 - 5:03
    rồi tính giá trị của chiều rộng
  • 5:03 - 5:05
    dựa theo giá trị đó.
  • 5:05 - 5:09
    Ta bắt đầu chép lại thời gian khởi điểm, tính theo ms,
  • 5:09 - 5:11
    trước khi hàm này được gọi.
  • 5:11 - 5:15
    var startTime... ảnh lại to ra nữa rồi.
  • 5:15 - 5:17
    new Date().getTime();
  • 5:17 - 5:21
    Trong makeItBigger9) thì ta lưu giá trị của thời gian hiện tại.
  • 5:21 - 5:26
    var currTime = new Date().getTime();
  • 5:27 - 5:29
    Giờ ta phải tính,
  • 5:29 - 5:32
    ví dụ nếu muốn ảnh to ra 30px/s,
  • 5:32 - 5:34
    và bắt đầu từ 50px,
  • 5:34 - 5:37
    ta tính toán ở đây.
  • 5:38 - 5:43
    newWidth bằng 50 + ..., 50 là giá trị khởi điểm...
  • 5:44 - 5:49
    cộng thêm currentTime trừ đi startTime.
  • 5:49 - 5:51
    Giá trị này là millisecond, nên ta sẽ
  • 5:51 - 5:53
    chia cho 1000,
  • 5:53 - 5:57
    rồi nhân với 30,
  • 5:57 - 6:00
    bỏi vì ta muốn tăng lên 30px mỗi giây.
  • 6:00 - 6:02
    Đây là newWidth rồi.
  • 6:02 - 6:07
    Giờ ta sẽ đặt style.width cho bằng newWidth.
  • 6:10 - 6:14
    newWidth... đây được rồi,
  • 6:14 - 6:19
    thế này là được 30px/s thật mượt rồi.
  • 6:20 - 6:24
    Ta có thể thay đổi số này nếu muốn nó chạy
  • 6:24 - 6:29
    nhanh hơn chậm hơn.
  • 6:31 - 6:34
    Còn nếu muốn dừng hoạt hình lại khi to đủ rồi thì sao?
  • 6:35 - 6:38
    Ta có thể cho dòng này vào trong điều kiện 'if'.
  • 6:39 - 6:41
    Dòng này đây, và chỉ chạy dòng này
  • 6:41 - 6:45
    nếu currentWidth nhỏ hơn 1 giá trị nào đó,
    if the currentWidth is
  • 6:45 - 6:49
    như là 300, thử xem nào.
  • 6:54 - 6:58
    Thực ra không phải là currentWidth mà là newWidth mới được.
  • 6:59 - 7:02
    Thử xem có dừng ở 300 không.
  • 7:02 - 7:06
    Oh Noes ơi, to ra xem nào.
  • 7:07 - 7:09
    Đẹp rồi.
  • 7:10 - 7:13
    Kĩ thuật sử dụng requestAnimationFrame này
  • 7:13 - 7:15
    hoàn toàn dùng được với Chrome,
  • 7:15 - 7:18
    Firefox và IE10 trở lên.
  • 7:18 - 7:22
    Còn có những thư viện JS
  • 7:22 - 7:25
    để dùng requestAnimationFrame nếu được,
  • 7:25 - 7:30
    và quay lai jdungf setInterval nếu là trình duyệt cũ.
  • 7:30 - 7:33
    Đấy là một vấn đề của việc lập trình web:
  • 7:33 - 7:35
    Mạng web thay đổi liên tục,
  • 7:35 - 7:37
    các trình duyệt liên tục cung cấp các chức năng mới,
  • 7:37 - 7:40
    lập trình viên cũng phát triển các kĩ thuật mới.
  • 7:40 - 7:44
    Bạn cần liên tục học về những cái mới này
  • 7:44 - 0:00
    thì sử dụng mới hiệu quả tối đa được.
Title:
Animating styles with RAF (Video Version)
Description:

more » « less
Video Language:
English, British
Duration:
07:48

Vietnamese subtitles

Incomplete

Revisions