Giúp tính toán CSS Animation Timing

Minh_Meo · May 21, 2021, 5:34am

mình đang làm một cái loading animation như thế này

bạn nào có thể giúp mình timing thời gian cũng như delay cảu class letter để cho nó chạy khớp với cái coast không. mình làm mãi mà vẫn chưa khớp. lúc đầu nó chạy đc nhưng sau một thwoif gian nó lại chệch nhau tùm lum

thank you.

jimidark · November 24, 2016, 3:31pm

Vì bạn đang thêm gía trị thủ công nên chắc chắn sẽ bị sai lệch (chậm hơn hoặc nhanh hơn chỉ một vài chục ms) và sau một số lần lặp đi lặp lại sự chênh lệch đó đã tăng theo số lần lặp -> thời gian timing giữa animation của các letters với animated dot ở dưới bị lệch là điều không thể tránh khỏi.

Nếu bạn muốn làm thì mình khuyên bạn nên làm hẳn thành một plugin để sau này có thể thay thế hoặc thêm nhiều style hơn (như animated dot sẽ ở bên trên, trái, phải, …) Đó là chưa nói tới việc mỗi ký tự có độ rộng khác nhau, font-size khác nhau sẽ dẫn tới -> đường đi, thời gian đi qua các ký tự đó cũng khác nhau.

Mình có một ví dụ về cách tính toán:

Tổng chiều dài: 700px
Số ký tự: 7
Thời gian: 7s
Đầu tiên cần tính để đi một quãng đường hết 1 ký tự mất bao nhiêu s (7s/7 = 1s/1 letter đi được 100px) -> Trường hợp này là coi độ rộng các ký tự = nhau (nhưng độ rộng ký tự trong một bộ font là khác nhau nên cái này mình phải tự định nghĩa độ rộng cho từng ký tự với những bộ fonts mình cho phép sử dụng với plugin của mình này nếu có ý định làm plugin để dễ customize và reuse được sau này)
Sau khi biết được khoảng thời gian cần thiết để đi hết đoạn đường là 1 ký tự rồi ta sẽ bắt đầu thiết lập độ trễ cho animated dot (VD ở đây là mình sẽ để = 1s/2 = 0.5s thì điều kiện sẽ phải tạo keyframe cho letter sao cho trong 0.5s đầu letter đó phải được di chuyển lên trên sẵn rồi ( ở đây mình sẽ đặt duration cho animation của mỗi letter là = 2s thì trong 0.5s đầu letter được di chuyển lên trên rồi và giữ trạng thái đó cho đến khi animated đi qua là 1s -> thời gian hạ xuống là ở giây thứ 1.5 của ký tự đó.

Và ở giây thứ 1 của letter trước ta bắt đầu animation của letter tiếp theo tức là mỗi letter sau có time delay là 1s.)

Cứ như vậy thì ta sẽ có được animation với timing chính xác.

P/s: Mình vì vừa đọc qua code của bạn và chưa có time ngồi tự code ví dụ cho bạn xem ý tưởng trên của mình nhưng mình nghĩ rằng bạn chỉ cần bỏ thời gian ra tính toán một chút là làm được thôi.

Minh_Meo · November 25, 2016, 6:00am

cảm ơn câu trả lời của bạn
mình đang tính dùng google web designer để keyfame cho nó dễ.