Khoảng 5 phút · React 16.8+ · React DOM

Bắt đầu

Từ cài đặt đến cử chỉ và chuyển động vào ra trong sáu bước. Mỗi bước là một component nhỏ chạy được.

1
Cài đặt
Animated không có phụ thuộc runtime. React 16.8+ là peer dependency.
Điểm vào của gói được đánh dấu 'use client'. Trong Next.js App Router, layout phía máy chủ có thể render AnimatedProvider; hãy dùng hook và Animated.<tag> bên trong Client Components.
$
```
npm install @kkwaenggwari/animated
```
Import @kkwaenggwari/animated được nhận diện trong trình soạn thảo của bạn.
Cho giá trị đầu tiên chuyển động
useAnimatedValue(1) sở hữu một con số sống suốt vòng đời component. Đặt nó thẳng vào style: nó trở thành biến CSS, nên React không render khi nó thay đổi.
timing(value, { toValue, duration }).start() di chuyển nó. Nhấn lại giữa chừng sẽ bắt đầu từ độ mờ hiện tại.
Đang chuẩn bị ví dụ…
Khung mờ dần rồi trở lại, và lần nhấn thứ hai giữa chừng đảo chiều ngay từ vị trí hiện tại.
Suy ra nhiều đầu ra từ một giá trị
interpolate ánh xạ giá trị sang độ dài, góc hay số. Không có easing, nó trở thành calc() chính xác của cùng biến, nên năm làn tốn như một làn.
Các khoảng đầu vào khác nhau của cùng một giá trị tạo hiệu ứng so le mà không cần năm hoạt ảnh riêng.
Đang chuẩn bị ví dụ…
Một lần nhấn di chuyển năm làn so le nhau; đổi độ trải chỉ đổi các khoảng.
Mô tả đích đến
Animated.button render một nút bình thường. seed là khung hình đầu tiên, pose là nơi nó cần ở lúc này, và tempo là cách nó đến đó.
Khi pose đổi giữa chừng, phần tử rẽ từ vị trí trên màn hình và, với lò xo, giữ nguyên vận tốc.
Đang chuẩn bị ví dụ…
Nhấp tab thật nhanh cũng không làm tab nào nhảy.
Nối đầu vào
input(ref, moveInput(...)) ghi tọa độ con trỏ vào các giá trị. follow(target, source) khiến một giá trị đuổi theo giá trị khác bằng lò xo.
Mọi thứ khai báo trong factory của useAnimated thuộc về component: listener và lò xo dừng khi unmount hoặc khi phụ thuộc thay đổi.
Đang chuẩn bị ví dụ…
Thẻ nghiêng về phía con trỏ và lắng lại khi con trỏ rời đi.
Tạo hoạt ảnh khi rời đi
Gỡ một child React thường xóa nó ngay lập tức. Animated.Keep giữ các children có key cho đến khi pose depart của chúng kết thúc.
wait chỉ render children mới khi mọi lần rời đi đã xong.
Đang chuẩn bị ví dụ…
Tin nhắn bị loại rời đi theo chuyển động đã chọn trước khi biến mất.

Bạn đã có toàn bộ mô hình

Giá trị, đích đến, đầu vào và việc rời đi dùng chung bộ điều khiển, quy tắc ngắt và cách dọn dẹp. Các hướng dẫn đi sâu vào từng phần.

Cài đặt

Cho giá trị đầu tiên chuyển động

Suy ra nhiều đầu ra từ một giá trị

Mô tả đích đến

Nối đầu vào

Tạo hoạt ảnh khi rời đi

Bạn đã có toàn bộ mô hình