1 việc làmAnimation 2D

Unity Animator
VRILLAR VIETNAM
Junior, Middle, Senior
Quận Bình Thạnh, Hồ Chí Minh
(In Office)
Đăng 6 ngày trước

Thông tin công ty

Bài viết liên quan

Xem tất cả

Hướng dẫn kỹ thuật FLIP animation với React

Bài viết được sự cho phép của tác giả Lưu Bình An Trước đây mình đã có một bài về FLIP animation, các bạn có thể đọc lại ở đây để biết kỹ thuật này là gì và tại sao nó lại giúp tối ưu tốc độ. [irp posts="14654" name="9 CSS animation mới mãn nhãn" cho các project"] [irp posts="13043" name="Animation - dụng cụ “vàng” trong làng UX"] Có thể tóm tắt kỹ thuật FLIP bằng hình minh họa bên dưới Những gì trong ô màu tím, cần diễn ra trước sự kiện paint của trình duyệt. Tuyển dụng lập trình viên React lương cao cho bạn Để đạt mục đích transform trước khi trình duyệt thực hiện paint, chúng ta sẽ sử dụng useLayoutEffect, những gì diễn ra ở đây sẽ xảy ra sau khi DOM cập nhập, trước khi paint Với lần render đầu tiên, chúng ta cần cache lại vị trí cuối cùng của animation useEffect(() => { // ... const rects = useRef(new Map()).current; const squares = document.querySelectorAll('.square'); for (const square of squares) { rects.set( [...]

Đọc thêm

Hướng dẫn inspect animation với Chrome DevTools

Bài viết được sự cho phép của tác giả Lưu Bình An Ấn Ctrl + Shift + I để mở Chrome DevTools. Nhìn lên góc phải, chỗ có 3 dấu chấm, chọn vào More tools > Animations F5 lại trang để bắt đầu xem phân tích animation Di chuyển nút tròn màu đỏ (gọi là playhead) trên timeline đến vị trí tương ứng với thời gian của animation Mỗi element đang chạy animate sẽ được đại diện bằng một màu line khác nhau. Trên mỗi line này sẽ có các keyframe Delay và Duration 2 thay đổi này sẽ update lại css trên tab Styles Để thay đổi delay, rê chuột lên đường line đến khi nào nhìn thấy trỏ chuột chuyển thành hình bàn tay, kéo rê qua lại để thấy giá trị css được update Tăng duration của animation, rê chuột lên trên keyframe cuối cùng đến khi thấy chuyển thành mũi tên 2 đầu, kéo rê qua lại để tăng hoặc giảm thời gian. Cubic bezier Inspect đến element có animation, phía trước thuộc tính animation, có một ô vuô [...]

Đọc thêm

Tạo một animation cho component trong React

Sử dụng React, styled-components, react-flip-toolkit để tạo animation giống như mên trên trang chủ của Stripe Phân tích See the Pen React Stripe Menu Before Animation by Alex (@aholachek) on CodePen. Trước tiên phân tích cái animation này ra thành nhiều phần để dể hình dung. Có thể xem dạng slow motion trên Codepen để xem nhé. container dropdown màu trắng sẽ thay đổi kích thước và vị trí background màu xám ở phía dưới của dropdown transition độ cao Khi di chuyển chuột khỏi dropdown, fade out nội dung trước đó đi và chuyển vị trí nó sang element mới, sau đó đưa nội dung mới lên. Tìm việc React lương cao trong tháng up to 25M Một vài lưu ý khi làm animation với React, cứ để browser quản lý layout. Thay vì sử dụng các dropdown khác nhau, chúng ta dùng 1 dropdown và thay đổi vị trí của nó, dùng Flip technique để giả lập như có 3 dropdown khác nhau. Dựng component thô chưa có animate See the Pen React Stripe Menu Before Animation by Alex (@aholachek) on CodePen. Để bắt đầu ta dựng một component navbar sử dụng styled-component Ở đây thì chưa [...]

Đọc thêm

Làm animate siêu đơn giản với hook khi react component mount và unmount

Có rất nhiều lúc chúng ta muốn thêm/xóa một element trên trình duyệt, nó rất chi là trực quan dễ dàng với jQuery, tuy nhiên vì không còn đụng chạm trực tiếp vào DOM, việc đơn giản đó lại hơi kỳ công // những ngày xa xưa ấy còn đâu $("#my-element").fadeIn("slow"); Tại sao lại khó khăn ấy nhỉ? Hãy mường tượng nó qua một ví dụ /* styles.css */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } // index.js const App = ({ show = true }) => ( show ? <div style={{ animation: `fadeIn 1s` }}>HELLO</div> : null ) Đó là tất cả những gì chúng ta cần làm để animate lúc component đang mount với fadeIn, tuy nhiên lại không có cách nào để animate unmount, vì chúng ta đã xóa cái DOM ngay khi show chuyển thành false. Element đã ra đi ngay lập tức. Tuyển dụng lập trình viên React Vậy chúng ta cần làm gì show thay đổi, báo react khoan hãy unmount, delay nó lại một chút Chạy animate Animate vừa chạy xong, unmount Đây là cách làm đơn giả [...]

Đọc thêm