Tạo hiệu ứng React Native Animation với LayoutAnimation

0
107

 

Tạo hiệu ứng React Native Animation với LayoutAnimation
Animation là gì ? Animation (Tạm dịch là: Hoạt hình hay diễn hoạt), rất nhiều cute animation gif được sử dụng thường xuyên trên các ứng dụng. Với bất kì nền tảng nào thì animation luôn là một phần không thể thiếu để tăng trải nghiệm người dùng.

Lập trình cross-platform cũng vậy, nếu bạn muốn tạo React Native Animation và chưa thử LayoutAnimation thì đúng là bạn đang bỏ lỡ một animation api hết sức tuyệt vời. Việc tạo React Native Animation với LayoutAnimation không hề khó khăn như bạn tưởng đâu.

Với nhiều năm phát triển ứng dụng iOS và khi chuyển sang React Native, mình đã rất lo lắng rằng bên React Native không có những tiện ích kiểu như CoreAnimation như iOS, như Animation trong Android. Các UIView animation rất đẹp mắt, chỉ cần thiết lập các properties cho animation lả xong.

Animation API của React Native cũng gần tương tự, nhưng React Native Animatable phức tạp hơn chút khi cần phải state cho mỗi animation. Đối với các view phức tạp thì điều này thật sự là địa ngục.

Và thật là may mắn khi cộng đồng đã thấu hiểu điều đó và cho ra đời LayoutAnimation. Tài liệu hướng dẫn chính thức về nó tương đối sơ sài. Nhưng đừng sợ, đã có mình ở đây, mình sẽ hướng dẫn các bạn  ^_^

Khi có rất nhiều layout trong view bị thay đổi, chỉ cần một dòng code là có thể xử lý được tất cả. Thiết lập state, cho phép view được re-render lại. Và LayoutAnimation sẽ xử lý tất cả các interpolation cho bạn. Với các view phức tạp thì thực sự LayoutAnimation thể hiện sức mạnh tuyệt đối.

Thực hành tạo React Native Animation với LayoutAnimation

#1. Tạo hiệu ứng chuyển màn hình

Để các bạn dễ hiểu về LayoutAnimation, mình sẽ minh họa bằng một ví dụ cụ thể. Mình có một view khá phức tạp với 3 state: Chiều cao, chiều rộng và item count sẽ được hiển thị dựa trên ”index” state và được xác định tab mà người dùng chọn.
Đây là giao diện ứng dụng khi thay đổi thay đổi trạng thái mà không có bất cứ animation nào:

Tạo hiệu ứng React Native Animation với LayoutAnimation

Code của nó sẽ như sau:

// Được gọi khi nút ở trên được nhấn, với chỉ số tương ứng với nút tiêu đề. 
  onPress(index) {
    this.setState({index: index});
  }

Bây giờ, hãy thử thêm LayoutAnimation vào xem nó thế nào nhé. Chỉ một dòng code là đủ:

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

Đoạn code trên mình sử dụng hiệu ứng “spring” và đã được thiết lập sẵn cho bất kì sự thay đổi layout nào xảy ra trong suốt chu trình render tiếp theo.
Tạo hiệu ứng React Native Animation với LayoutAnimation
WOW! Uyển chuyển hơn rất nhiều rồi phải không?

Lưu ý: LayoutAnimation Deletion được hổ trợ trên iOS là React Native version 0.26, Android là React Native version 0.28-rc.

#2. Tạo deletion animation bằng LayoutAnimation

Đây là một ví dụ khác khi không sử dụng deletion animation.

// Được gọi khi nút ở trên được nhấn, với chỉ số tương ứng với nút tiêu đề.
  onPress(index) {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    this.setState({index: index});
  }

LayoutAnimation đi kèm với ba hiệu ứng:

  • easeInEaseOut
  • linear
  • spring

Hoặc bạn có thể tự roll.

Ví dụ bên dưới mình tùy chỉnh LayoutAnimations với những option có sẵn. Bạn có thể tham khảo thêm tại trang github source code, có rất nhiều ví dụ hay.

// Spring 
var CustomLayoutSpring = {
    duration: 400,
    create: {
      type: LayoutAnimation.Types.spring,
      property: LayoutAnimation.Properties.scaleXY,
      springDamping: 0.7,
    },
    update: {
      type: LayoutAnimation.Types.spring,
      springDamping: 0.7,
    },
  };
  
// Linear với easing
var CustomLayoutLinear = {
    duration: 200,
    create: {
      type: LayoutAnimation.Types.linear,
      property: LayoutAnimation.Properties.opacity,
    },
    update: {
      type: LayoutAnimation.Types.curveEaseInEaseOut,
    },
  };
  
 
 // Được thực hiện bởi việc gọi trước khi có sự thay đổi trạng thái
 // LayoutAnimation.configureNext(CustomLayoutSpring);
  

LayoutAnimation hoạt động bằng cách xác định các views bởi unique key của chúng, tính toán vị trí mong đợi và dựa vào native framework( trên iOS thì là CoreAnimation) để thay đổi hiệu ứng. Opacity và Scale là hai properties bổ sung duy nhất được hỗ trợ. Nhưng có thể thêm một vài properties khác như backgroundColor và transformations.

Đợi chút: Mấy ví dụ trên chủ yếu là mình thử trên iOS. Với Android thì mình chưa thử, chắc là cơ chế nó cũng tương tự, có chăng chỉ khác đôi chút.

LayoutAnimation chắc chắn đáng được công nhận là một điểm thay đổi tích cực rất lớn đối với React Native Animation. Hãy dùng thử và bạn sẽ thấy.

LayoutAnimation chắc chắn là một điểm cộng lớn cho React Native. Nó làm cho ứng dụng trở lên bóng bẩy và thân thiện với người dùng hơn rất nhiều. Hãy dùng thử và cảm nhận nhé

Mình rất vui khi nhận được những góp ý từ các bạn. Hãy để lại comment cho biết ý kiến của bạn nhé

Bình luận. Đặt câu hỏi cũng là một cách học

avatar
  Theo dõi bình luận  
Thông báo