Sau đây là bài viết của khách mời Zach Saucier. Zach đã viết thư cho tôi nói với tôi rằng, với tư cách là người thường xuyên tham gia các diễn đàn mã hóa như Stack Overflow, anh ấy thấy các câu hỏi luôn xuất hiện về việc kiểm soát hoạt ảnh CSS bằng JavaScript và đã chứng minh điều đó bằng một loạt các liên kết. Tôi đã có điều này trong danh sách của mình để viết quá lâu, vì vậy tôi rất vui khi để Zach đào sâu vào nó và viết hướng dẫn toàn diện này
Các nhà thiết kế web đôi khi tin rằng hoạt ảnh trong CSS khó hơn hoạt ảnh trong JavaScript. Mặc dù hoạt ảnh CSS có một số hạn chế, nhưng hầu hết thời gian hoạt ảnh đó có nhiều khả năng hơn chúng tôi đánh giá cao. Chưa kể, thường hiệu quả hơn
Kết hợp với một chút JavaScript, hoạt ảnh và chuyển tiếp CSS có thể thực hiện các hoạt ảnh và tương tác được tăng tốc phần cứng hiệu quả hơn hầu hết các thư viện JavaScript
Hãy nhảy thẳng vào
Sổ tay. Hoạt ảnh và chuyển tiếp là khác nhau
Các chuyển đổi trong CSS được áp dụng cho một phần tử và chỉ định rằng khi một thuộc tính thay đổi, nó sẽ thực hiện dần dần trong một khoảng thời gian. Hoạt hình là khác nhau. Khi áp dụng, họ chỉ chạy và làm việc của họ. Chúng cung cấp khả năng kiểm soát chi tiết hơn vì bạn có thể kiểm soát các điểm dừng khác nhau của hoạt ảnh
Trong bài viết này, chúng tôi sẽ đề cập đến từng người trong số họ một cách riêng biệt
Thao tác chuyển tiếp CSS
Có vô số câu hỏi trên các diễn đàn mã hóa liên quan đến việc kích hoạt và tạm dừng quá trình chuyển đổi của một phần tử. Giải pháp thực sự khá đơn giản khi sử dụng JavaScript
Để kích hoạt quá trình chuyển đổi của một phần tử, hãy bật tên lớp trên phần tử đó để kích hoạt nó
Để tạm dừng quá trình chuyển đổi của một phần tử, hãy sử dụng
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Sau đây là một ví dụ về cách tiếp cận đó
Dự phòng nhúng CodePen
Kỹ thuật tương tự này có thể được sử dụng theo những cách nâng cao hơn. Ví dụ sau cũng kích hoạt quá trình chuyển đổi bằng cách thay đổi tên lớp, nhưng lần này một biến theo dõi tốc độ thu phóng hiện tại
Dự phòng nhúng CodePen
Lưu ý rằng chúng tôi đang thay đổi kích thước nền lần này. Có nhiều thuộc tính CSS khác nhau có thể được chuyển đổi hoặc hoạt ảnh, điển hình là thuộc tính có giá trị số hoặc màu. Rodney Rehm cũng đã viết một bài báo đặc biệt hữu ích và cung cấp thông tin về quá trình chuyển đổi CSS có thể tìm thấy tại đây
Sử dụng CSS “Hàm gọi lại”
Một số thủ thuật JavaScript hữu ích nhưng ít được biết đến nhất để thao tác chuyển đổi CSS và hoạt ảnh là các sự kiện DOM mà chúng kích hoạt. Thích.
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Những sự kiện này cần phải có tiền tố nhà cung cấp tại thời điểm này, vì vậy, trong bản trình diễn này, chúng tôi sử dụng một chức năng do Craig Buckler phát triển có tên là
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Ý tưởng trong bản demo này là phóng to trái tim và dừng hoạt ảnh khi nó được di chuột qua
Dự phòng nhúng CodePen
Phiên bản CSS thuần túy rất nhanh. Trừ khi bạn di chuột qua nó vào thời điểm hoàn hảo, nó sẽ chuyển sang một trạng thái cụ thể trước khi phóng to đến trạng thái di chuột cuối cùng. Phiên bản JavaScript mượt mà hơn nhiều. Nó loại bỏ bước nhảy bằng cách để hoạt ảnh hoàn thành trước khi áp dụng trạng thái mới
Thao tác CSS Animations
Giống như chúng ta vừa học, chúng ta có thể xem các yếu tố và phản ứng với các sự kiện liên quan đến hoạt ảnh.
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Thuộc tính animation-play-state
Thuộc tính
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Tuy nhiên, khi hoạt ảnh CSS bị tạm dừng bằng cách sử dụng
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Lấy phần trăm giá trị chính hiện tại
Thật không may, tại thời điểm này, không có cách nào để có được "tỷ lệ hoàn thành" chính xác hiện tại của hoạt ảnh khung hình chính CSS. Phương pháp tốt nhất để tính gần đúng là sử dụng hàm
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Cách tiếp cận này không phải là lý tưởng vì chức năng này thực sự chạy ít thường xuyên hơn cứ sau 40 mili giây. Tôi thấy rằng đặt nó thành 39 mili giây thì chính xác hơn, nhưng dựa vào đó là một cách làm không tốt, vì nó có thể thay đổi tùy theo trình duyệt và không hoàn toàn phù hợp với bất kỳ trình duyệt nào
Lấy các giá trị thuộc tính CSS hiện tại của Animation
Trong một thế giới hoàn hảo, chúng ta có thể chọn một phần tử đang sử dụng hoạt ảnh CSS, xóa hoạt ảnh đó và tạo cho nó một hoạt ảnh mới. Sau đó, nó sẽ bắt đầu hoạt ảnh mới, bắt đầu từ trạng thái hiện tại của nó. Chúng ta không sống trong thế giới hoàn hảo đó, nên nó phức tạp hơn một chút
Dưới đây, chúng tôi có một bản demo để kiểm tra kỹ thuật lấy và thay đổi hoạt ảnh CSS “giữa luồng”. Hoạt ảnh di chuyển một phần tử theo đường tròn với vị trí bắt đầu ở giữa trên cùng [“mười hai giờ”, nếu bạn thích] Khi nhấp vào nút, nó sẽ thay đổi vị trí bắt đầu của hoạt ảnh thành vị trí hiện tại của phần tử. Nó di chuyển trên cùng một con đường, chỉ bây giờ "bắt đầu" tại vị trí của nó khi bạn nhấn nút. Sự thay đổi nguồn gốc này và do đó thay đổi hình ảnh động, được biểu thị bằng cách thay đổi màu của phần tử thành màu đỏ trong khung hình chính đầu tiên
Dự phòng nhúng CodePen
Chúng ta cần phải đi khá sâu để hoàn thành việc này. Chúng ta sẽ phải đào sâu vào bản định kiểu để tìm hoạt ảnh gốc
Bạn có thể truy cập các biểu định kiểu được liên kết với một trang bằng cách sử dụng
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Khi chúng ta gọi hàm trên [e. g.
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Tại thời điểm này,
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Thay đổi Animation thực tế [cuối cùng. ]
Trong trường hợp demo hoạt hình tròn của chúng tôi, chúng tôi cần hai biến. một để theo dõi số độ mà vòng tròn đã di chuyển kể từ vị trí bắt đầu gần đây nhất của nó và một để theo dõi số độ mà nó đã di chuyển kể từ vị trí bắt đầu ban đầu. Chúng ta có thể thay đổi biến đầu tiên bằng hàm
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Sau đó, chúng ta có thể sử dụng chức năng sau để tìm khung hình chính nào của hoạt ảnh gần nhất với tổng phần trăm hiện tại, dựa trên mảng phần trăm khung hình chính có thể có mà chúng tôi đã thu được ở trên
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Để có được giá trị khung hình chính đầu tiên của hoạt ảnh mới để sử dụng trong các phép tính sau này, chúng ta có thể sử dụng phương thức
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Tiếp theo, chúng ta cần thay đổi % thành độ của hình tròn. Chúng ta có thể làm điều này bằng cách nhân phần trăm mới đầu tiên với 3. 6 [vì 10 0 * 3. 6 = 360]
Cuối cùng, chúng tôi tạo các quy tắc mới dựa trên các biến thu được ở trên. Sự khác biệt 45 độ giữa mỗi quy tắc là do chúng tôi có 8 khung hình chính khác nhau đi quanh vòng tròn. 360 [độ trong một vòng tròn] chia cho 8 là 45
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Sau đó, chúng tôi đặt lại phần trăm hiện tại
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Nếu bạn muốn điều tra thêm, câu trả lời của Russell Uresti trong bài đăng StackOverflow này và ví dụ tương ứng rất hữu ích
Biến hoạt hình thành chuyển tiếp
Như chúng ta đã thấy, thao tác chuyển tiếp CSS có thể được đơn giản hóa bằng JavaScript. Nếu cuối cùng bạn không nhận được kết quả mong muốn với hoạt ảnh CSS, thay vào đó, bạn có thể thử biến nó thành một quá trình chuyển đổi và làm việc với nó theo cách đó. Chúng có cùng độ khó để viết mã, nhưng chúng có thể dễ dàng thiết lập và chỉnh sửa hơn
Vấn đề lớn nhất trong việc biến hoạt ảnh CSS thành hiệu ứng chuyển tiếp là khi chúng ta biến
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Liên hệ điều này với bản demo xoay vòng của chúng tôi, một mẹo nhỏ là nhân cả
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Trong ví dụ của chúng tôi, chúng tôi làm điều đó khi tải trang
Dự phòng nhúng CodePen
Thao tác ma trận CSS
Thao tác hoạt hình CSS cũng có thể được thực hiện thông qua việc sử dụng
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Nhưng quá trình này có thể gây nhầm lẫn, đặc biệt là với những người mới bắt đầu sử dụng hoạt hình CSS
Để biết thêm thông tin về Ma trận CSS, hãy xem tài liệu [mặc dù phải thừa nhận là không quá hữu ích], công cụ này cho phép bạn khám phá các giá trị ma trận hoặc các bài viết về chủ đề này, chẳng hạn như tại đây
Đặt lại hoạt ảnh CSS
Bạn có thể tìm thấy thủ thuật để thực hiện việc này đúng cách tại đây trên Thủ thuật CSS. Thủ thuật về cơ bản là [nếu có thể] loại bỏ lớp đã bắt đầu hoạt ảnh, kích hoạt chỉnh lại dòng trên đó bằng cách nào đó, sau đó áp dụng lại lớp. Nếu vẫn thất bại, hãy tách phần tử ra khỏi trang và đặt lại phần tử đó
Sử dụng đầu của bạn
Trước khi bắt đầu viết mã, suy nghĩ và lập kế hoạch về cách chạy chuyển tiếp hoặc hoạt ảnh là cách tốt nhất để giảm thiểu sự cố của bạn và đạt được hiệu quả như mong muốn. Thậm chí còn tốt hơn Google để tìm các giải pháp sau này. Các kỹ thuật và thủ thuật được tổng quan trong bài viết này có thể không phải lúc nào cũng là cách tốt nhất để tạo hoạt ảnh mà dự án của bạn yêu cầu
Dưới đây là một ví dụ nhỏ về việc chỉ sử dụng HTML và CSS thông minh có thể giải quyết vấn đề mà bạn có thể đã nghĩ đến việc chuyển sang JavaScript
Giả sử chúng tôi muốn đồ họa xoay liên tục và sau đó chuyển hướng quay khi được di chuột. Tìm hiểu những gì được đề cập trong bài viết này, bạn có thể muốn tham gia và sử dụng sự kiện
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];Mẹo nhỏ là để hình xoắn ốc quay với tốc độ
var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];var showPercent = window.setInterval[function[] {
if [currentPercent < 100] {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40];