Tween.js
Công cụ tweening JavaScript (TypeScript) cho việc tạo hoạt hình dễ dàng, tích hợp các phương trình tối ưu hóa của Robert Penner.
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
<div id="box"></div>
<style>
#box {
background-color: deeppink;
width: 100px;
height: 100px;
}
</style>
<script>
const box = document.getElementById('box') // Get the element we want to animate.
const coords = {x: 0, y: 0} // Start at (0, 0)
const tween = new TWEEN.Tween(coords, false) // Create a new tween that modifies 'coords'.
.to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
.easing(TWEEN.Easing.Quadratic.InOut) // Use an easing function to make the animation smooth.
.onUpdate(() => {
// Called after tween.js updates 'coords'.
// Move 'box' to the position described by 'coords' with a CSS translation.
box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
})
.start() // Start the tween immediately.
// Setup the animation loop.
function animate(time) {
tween.update(time)
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
</script>
Cài đặt
Từ CDN
Cài đặt từ một mạng phân phối nội dung (CDN) như trong ví dụ ở trên.
Từ cdnjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
Hoặc từ unpkg.com:
<script src="https://unpkg.com/@tweenjs/tween.js@^20.0.0/dist/tween.umd.js"></script>
Lưu ý rằng unpkg.com hỗ trợ phiên bản semver trong URL, trong đó ^ trong URL cho biết unpkg sẽ cung cấp cho bạn phiên bản mới nhất 20.x.x.
Xây dựng và bao gồm vào dự án của bạn bằng thẻ script
Hiện nay, cần có npm để xây dựng dự án.
git clone https://github.com/tweenjs/tween.js
cd tween.js
npm install
npm run build
Điều này sẽ tạo ra một số bản build trong thư mục dist. Hiện tại có hai phiên bản khác nhau của thư viện:
- UMD :
tween.umd.js - ES6 Module :
tween.es.js
Bây giờ bạn có thể sao chép tween.umd.js vào dự án của bạn, sau đó bao gồm nó bằng thẻ script, sẽ thêm TWEEN vào phạm vi toàn cục,
<script src="path/to/tween.umd.js"></script>
hoặc nhập TWEEN như một mô-đun JavaScript,
<script type="module">
import * as TWEEN from 'path/to/tween.es.js'
</script>
nơi path/to được thay thế bằng vị trí bạn đã đặt tệp.
Với npm install và import từ node_modules
Bạn có thể thêm tween.js như một phụ thuộc npm:
npm install @tweenjs/tween.js
Với công cụ xây dựng
Nếu bạn đang sử dụng Node.js, Parcel, Webpack, Rollup, Vite, hoặc một công cụ xây dựng khác, bạn có thể sử dụng các lệnh sau để bao gồm tween.js:
import * as TWEEN from '@tweenjs/tween.js'
Không sử dụng công cụ xây dựng
Bạn có thể nhập từ node_modules nếu bạn phục vụ node_modules như một phần của trang web của bạn, bằng cách sử dụng một thẻ script importmap. Trước hết, giả sử node_modules nằm ở gốc trang web của bạn, bạn có thể viết một bản đồ nhập:
<script type="importmap">
{
"imports": {
"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.es.js"
}
}
</script>
Bây giờ trong bất kỳ tệp module nào của bạn, bạn có thể nhập nó bằng tên gói của nó:
import * as TWEEN from '@tweenjs/tween.js'
Tính năng
- Chỉ thực hiện một việc và chỉ một việc: tween thuộc tính
- Không quản lý đơn vị CSS (ví dụ: nối thêm
px) - Không nội suy màu sắc
- Hàm dễ dàng được sử dụng bên ngoài Tween
- Cũng có thể sử dụng các hàm dễ dàng tùy chỉnh
Tài liệu
- Hướng dẫn sử dụng
- Hướng dẫn đóng góp
- Tutorial sử dụng tween.js với three.js
- Cũng: libtween, một phiên bản của tween.js cho C bởi jsm174
- Understanding tween.js
Ví dụ
| Xin chào thế giới
(nguồn)| 
| Thanh
(nguồn)
—|—|—|—
| Đen và đỏ
(nguồn)| 
| Biểu đồ
(nguồn)
| Ví dụ đơn giản nhất
(nguồn)| 
| Video và thời gian
(nguồn)
| Nội suy mảng
(nguồn)| 
| Đối tượng đến, đối tượng
(nguồn)
| Đối tượng đến, nội suy mảng
(nguồn)| 
| Đối tượng đến, nội suy mảng lớn
(nguồn)
| Lặp lại
(nguồn)| 
| Giá trị tương đối
(nguồn)
| Yoyo
(nguồn)| 
| Dừng tất cả các tween được liên kết
(nguồn)
| Hàm tùy chỉnh
(nguồn)| 
| Thời gian bắt đầu tương đối
(nguồn)
| Tạm dừng tween
(nguồn)| 
| Thuộc tính phức tạp
(nguồn)
| Tạo hoạt hình một mảng giá trị
(nguồn)| |
Kiểm tra
Trước tiên, bạn cần cài đặt npm – điều này đi kèm với node.js, vì vậy hãy cài đặt nó trước. Sau đó, chuyển đến thư mục tween.js (hoặc bất kỳ nơi bạn đã sao chép repo) và chạy:
[[ĐẢO_NGƯỢC_CHO_MÃ_10]]
Để chạy các bài kiểm tra, hãy chạy:
[[ĐẢO_NGƯỢC_CHO_MÃ_11]]
Nếu bạn muốn thêm bất kỳ tính năng nào hoặc thay đổi các tính năng hiện có, bạn phải chạy các bài kiểm tra để đảm bảo rằng bạn không gây lỗi cho bất kỳ thứ gì khác. Mọi yêu cầu kéo (PR) cần phải có các bài kiểm tra đã cập nhật và chạy thành công cho các thay đổi tính năng (hoặc các bài kiểm tra chạy thành công mới cho các tính năng mới hoặc sửa lỗi) trong src/tests.ts để được chấp nhận. Xem phần đóng góp để biết thêm thông tin.
Người tham gia
Người duy trì: [[ĐỂ_DÀNH_CHO_LINK_10]], [[ĐỂ_DÀNH_CHO_LINK_11]], [[ĐỂ_DÀNH_CHO_LINK_12]].
[[ĐỂ_DÀNH_CHO_LINK_13]].
Các dự án sử dụng tween.js
Thêm ngôn ngữ: Tiếng Anh, Tiếng Trung giản thể
Thông tin tải xuống:
Tác giả: Tweenjs
Mã nguồn: [[ĐỂ_DÀNH_CHO_LINK_14]]
Giấy phép: [[ĐỂ_DÀNH_CHO_LINK_15]]
