All
Jobs
Companies

Get job alert for this search

1 jobAnimation 3D

Related posts

View all
3D Artist Là Gì? Các Mức Lương Hấp Dẫn Trong Nghề 3D Artist

3D Artist Là Gì? Các Mức Lương Hấp Dẫn Trong Nghề 3D Artist

Nghề 3D Artist cũng được xem là họ hàng chung của “Art” trong giới mỹ thuật nhưng khác với “Art”, người nghệ sĩ có thể diễn đạt, trình bày những tác phẩm của họ ở bất cứ đâu thì “3D Artist” chỉ có thể được những người nghệ sĩ thể hiện trên các hình ảnh máy tính, được tạo nên nhờ những công cụ phần mềm hỗ trợ. Có thể nói những tác phẩm của một dân trong “Nghề 3D Artist” được tạo nên từ những dòng thuật toán trên nền tảng dữ liệu.  Nghề 3D Artist là gì? 3D Artist là một nhà thiết kế đồ họa chuyên biệt, họ là những người thông thạo công nghệ máy tính và phần mềm thiết kế mới nhất. Với một 3D Artist, trách nhiệm và nghĩa vụ của bạn bao gồm thiết kế và tạo hoạt ảnh 3D cho các ngành khác nhau bao gồm ứng dụng di động, y học, khoa học, trò chơi điện tử và [...]

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

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( [...]

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

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ô [...]

Read more
Tạo một animation cho component trong React

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 [...]

Read more