React Native Reanimated là gì- Khám phá thông tin ngay

React Native Reanimated là gì?

React Native Reanimated là một thư viện Mã nguồn mở được sử dụng trong quá trình phát triển React Native dành cho thiết bị di động để tạo ra các hoạt ảnh và tương tác mượt mà chạy trên chuỗi giao diện người dùng. Thư viện cho phép các nhà phát triển khai báo hoạt ảnh trên chuỗi JavaScript và chạy chúng trên chuỗi gốc để đạt được hình ảnh động mượt mà bất kể chuỗi JS có bận hay không.

Mặc dù thực sự mạnh mẽ, library có earn curve khá cao, đầu tiên, bạn cần học một ngôn ngữ cụ thể để tạo ra hoạt ảnh.

Cách kích thích React Native Reanimated

Để làm hoạt ảnh chạy, lập trình viên phải thực hiện kích hoạt nó, để kích hoạt bặn cần phải kích hoạt ảnh mềm trong thư viên react native reanimated bằng cách sử dụng setValue 

Animated kích hoạt thông qua hàm setValue

Cách  làm hoạt ảnh mở dần sau khic kích hoạt nút hide:

import React from "react";
import { StyleSheet, View, Button } from "react-native";
import Animated, { Value } from "react-native-reanimated";
 
const AnimatedComponent = () => {
  const opacity = new Value(1);
  return (
				<>
	        <Animated.View
						 style={{
							width: 300,
						  height: 300,
							backgroundColor: 'red',
							opacity 
						 }}
					/>
					<Button title="Hide" onPress={() => opacity.setValue(0)} />
				</>
  );
};

Thay đổi duy nhất so với ví dụ trước là khi chúng ta đã nhấn nút Hide thì Animated.View của chúng ta ngay lập tức biến mất. Điều gì đã xảy ra ở đây? Nhìn vào sơ đồ dưới đây.

Kích hoạt animated bằng Clock

```tsx
import React, { useState } from 'react';
import { Button } from 'react-ative';
import Animated, {
  Value,
  Easing,
  startClock,
  timing,
  Clock,
  useCode,
  cond,
  eq,
} from 'react-native-reanimated';
 
const AnimatedComponent = () => {
  const [counter, setCounter] = useState(0);
  const startAnimation = new Value<0 | 1>(0);
  const opacity = new Value(1);
	const clock = new Clock();
  const state = {
    finished: new Value(0),
    position: opacity,
    frameTime: new Value(0),
    time: new Value(0),
  };
  const config = {
    toValue: 0,
    easing: Easing.inOut(Easing.ease),
    duration: 500,
  };
 
  useCode(
    () => [
      cond(eq(startAnimation, 1), [
        startClock(clock),
        timing(clock, state, config),
      ]),
    ],
    [counter],
  );
 
  return (
    <>
      <Animated.View
        style={{
          width: 300,
          height: 300,
          backgroundColor: 'red',
          opacity,
        }}
      />
      <Button title="Hide" onPress={() => startAnimation.setValue(1)} />
      <Button title="Reset" onPress={() => setCounter((s) => s + 1)} />
    </>
  );
}
```

Có một số điều cần giải thích sâu hơn, vì vậy chúng ta hãy đi qua từng bước:

• Chúng ta tạo một biến bộ đếm chỉ được sử dụng để đặt lại trạng thái hoạt ảnh (kích hoạt kết xuất lại)
• Chúng ta tạo startAnimation là một phiên bản của  Animated.Value . Nó sẽ được sử dụng để kích hoạt hoạt ảnh sau khi nhấn nút Hide .
• Chúng ta tạo độ mờ như trong ví dụ trước.
• Chúng ta tạo một biến đồng hồ là một thể hiện của Animated.Clock .
• Chúng ta tạo đối tượng trạng thái giữ trạng thái của hoạt ảnh.
• Chúng ta tạo đối tượng cấu hình chứa cấu hình của hoạt ảnh.
• Chúng ta sử dụng hook useCode để xác định cây hoạt ảnh của chúng ta và đính kèm nó đúng cách. Giá trị trả về dưới mui xe được bao bọc bằng nút Luôn luôn (loại nút cuối cùng thứ hai ).

Đây là cây hoạt ảnh đơn giản  (định thời không phải là một nút mà nó chỉ nhóm lên nhiều nút hơn như Set Cond , v.v.). Nó cũng liên kết cây hoạt ảnh trước đó , do đó việc cập nhật Giá trị (sau này) cũng sẽ khiến Props kích hoạt đánh giá lại.