react?native?reanimated實(shí)現(xiàn)動(dòng)畫示例詳解

更新時(shí)間：2023年03月06日 11:44:30 作者：samwangdd

這篇文章主要為大家介紹了react?native?reanimated實(shí)現(xiàn)動(dòng)畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

在一次 App 迭代中，UI 想要給按鈕添加一個(gè)動(dòng)畫效果，在對(duì)接的過程中，UI 表示直接用 .gif 就好，因?yàn)楦杏X開發(fā)出來的效果應(yīng)該不會(huì)很好。

聽到這里，一個(gè)技術(shù)人的自尊心仿佛被踩在了地上，我當(dāng)即表示想用 react-native-reanimated（下文簡稱 Reanimated）試一試。??

動(dòng)畫拆分

首先，從最外層來看，動(dòng)畫有一個(gè)抖動(dòng)效果：先向左，再向右。可以利用 rotate 旋轉(zhuǎn)屬性來實(shí)現(xiàn)。

其次，中間的文字部分有一個(gè)縮放動(dòng)畫，可以通過 scale 實(shí)現(xiàn)。

最后，當(dāng)文字最小化時(shí)，會(huì)改變內(nèi)容，這個(gè)需要配合 JS 來實(shí)現(xiàn)。

實(shí)現(xiàn)抖動(dòng)

首先通過 useSharedValue 定義一個(gè)共享值 rotation，共享值和 useRef 類似，區(qū)別是共享值有一個(gè) value 屬性而不是 current。

我們使用共享值改變的樣式通過 useAnimatedStyle 包裝一下，再賦值給 Animated.View，這和使用普通的 React Native 樣式有點(diǎn)區(qū)別：

import Animated from 'react-native-reanimated';
const rotation = useSharedValue(0);
const shakeStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          rotateZ: `${rotation.value}deg`,
        },
      ],
    };
  }, []);
<Animated.View style={[styles.btn, shakeStyle]}>
	...
</Animated.View>

定義動(dòng)畫

每個(gè)動(dòng)畫可以使用 withTiming 更新共享值，并設(shè)置動(dòng)畫的具體參數(shù)。它會(huì)啟動(dòng)基于時(shí)間的動(dòng)畫曲線，如執(zhí)行時(shí)間 duration，緩動(dòng)函數(shù) easing 等。

抖動(dòng)的過程有三個(gè)步驟：向左旋轉(zhuǎn)，向右旋轉(zhuǎn)，保持水平。我們使用 withSequence 來編排動(dòng)畫的順序。

最后，我們使用 withRepeat 讓以上三個(gè)步驟無限循環(huán)。它接受三個(gè)參數(shù)：

第一參數(shù)是動(dòng)畫函數(shù)；
第二個(gè)參數(shù)是執(zhí)行的次數(shù)，-1 表示無限次；
第三個(gè)參數(shù)表示動(dòng)畫是否反向執(zhí)行。

注意，在恢復(fù)水平后，按鈕仍保持一段時(shí)間的靜止，我們可以用到 withDelay 來延遲執(zhí)行下一個(gè)動(dòng)作。

const SCOPE = 2;
useEffect(() => {
    const turnL = withDelay(1400, withTiming(-SCOPE, { duration: 100, easing: Easing.linear })); // 向左
    const turnR = withTiming(SCOPE, { duration: 100, easing: Easing.linear }); // 向右
    const holden = withTiming(0, { duration: 100, easing: Easing.linear }); // 水平
		const rotateAnimations = withSequence(turnL, turnR, holden); // 編排動(dòng)畫順序
    rotation.value = withRepeat(rotateAnimations, -1); // 重復(fù)執(zhí)行動(dòng)畫
    return () => {
      cancelAnimation(rotation);
    };
}, []);

實(shí)現(xiàn)縮放動(dòng)畫

實(shí)現(xiàn)縮放動(dòng)畫的思路與上面基本相似。這里需要注意的是，需要根據(jù)實(shí)際需求，調(diào)整動(dòng)畫之間的節(jié)奏關(guān)系。比如縮放開始，抖動(dòng)開始；縮放結(jié)束，抖動(dòng)也就結(jié)束。

const scaleSize = useSharedValue(0.2);
const scaleStyle = useAnimatedStyle(() => {
	return {
      transform: [
        {
          scale: scaleSize.value,
        },
      ],
	};
}, []);
useEffect(() => {
	...
	const zoomOut = withDelay(1600, withTiming(0.2, { duration: 100, easing: Easing.linear }));
	const restoreSize = withTiming(1, { duration: 100, easing: Easing.linear });
	const scaleAnimations = withSequence(restoreSize, zoomOut);
	scaleSize.value = withRepeat(scaleAnimations, -1);
	return () => {
		...
		cancelAnimation(scaleSize);
	};
}, [])
<Animated.View style={[styles.textWrapper, scaleStyle]}>
	...
<Animated.View>

改變內(nèi)容

當(dāng)我們依賴共享值的變化，需要進(jìn)一步操作時(shí)，可以使用 useAnimatedReaction，它第一參數(shù)中定義依賴的值，第二個(gè)參數(shù)接受第一個(gè)參數(shù)的返回值，并進(jìn)行自定義的操作。

注意，共享值變化不會(huì)觸發(fā) JS 線程中的組件更新，改變文案的狀態(tài)需要用到 useState，因?yàn)槲陌父淖兪窃?JS 線程中處理的，可以通過 runOnJS 可以讓函數(shù)在 JS 線程中執(zhí)行。

import { useAnimatedReaction, runOnJS } from 'react-native-reanimation'; 
...
const [status, setStatus] = useState(true);
const scaleSize = useSharedValue(0.2);
const toggle = useCallback(() => {
    setStatus((s) => !s);
}, []);
useAnimatedReaction(
    () => {
      return scaleSize.value;
    },
    (next) => {
      if (next <= 0.2) {
        runOnJS(toggle)();
      }
    }
);
...
<Text>{status ? '參與話題' : '賺點(diǎn)贊次數(shù)'}</Text>

Reanimated 原理淺析

在開發(fā)過程中，我們的動(dòng)畫代碼和狀態(tài)代碼都是用 JavaScript 寫在同一個(gè)文件中的，你可能會(huì)認(rèn)為你寫的動(dòng)畫部分的 JavaScript 和狀態(tài)部分的 JavaScript 都是運(yùn)行在同一個(gè)線程中的，但其實(shí)并不是這樣的。

React Native 有兩個(gè)常用的線程：一個(gè)是 React Native 的 JavaScript 線程，另一個(gè)是 UI 主線程。

一方面，JavaScript 線程和 UI 主線程是異步通信的，這也意味著，如果是由 JavaScript 線程發(fā)起動(dòng)畫的執(zhí)行，UI 線程并不能同步地收到該命令并且立刻執(zhí)行。

另一方面，JavaScript 線程處理的事件很多，包括所有的業(yè)務(wù)邏輯、React Diff、事件響應(yīng)等，容易搶占動(dòng)畫的執(zhí)行資源。

Reanimated 是如何優(yōu)化？答案就是：把動(dòng)畫代碼放到 UI 主線程來執(zhí)行性能更好、不易卡頓。

它把動(dòng)畫相關(guān)的 JavaScript 函數(shù)及其上下文傳給了 UI 主線程。由于 UI 主線程沒有能夠運(yùn)行 JavaScript 的環(huán)境，于是 Reanimated 又創(chuàng)建了一個(gè) JavaScript 虛擬機(jī)來運(yùn)行傳過來的 JavaScript 函數(shù)。

在 JavaScript 線程中包括了三個(gè)動(dòng)畫相關(guān)的函數(shù)或值， useSharedValue、 useAnimatedStyle 和 useAnimatedGestureHandler。

這三部分的代碼會(huì)在其底層，將相關(guān)的回調(diào)函數(shù)標(biāo)記為worklet ，被標(biāo)記的worklet函數(shù)或值會(huì)被放在一個(gè)由 Reanimated 創(chuàng)建的 JavaScript 虛擬機(jī)中執(zhí)行。而這個(gè)由 Reanimated 創(chuàng)建的 JavaScript 虛擬機(jī)，會(huì)在 UI 線程中執(zhí)行傳過來的worklet 函數(shù)，并且執(zhí)行的函數(shù)還可以同步地操作 UI。

Reanimated 動(dòng)畫性能好的原因就在于：React Native 的 JavaScript 線程是性能瓶頸點(diǎn)，而在真正執(zhí)行動(dòng)畫時(shí)，已經(jīng)把所有與動(dòng)畫相關(guān) JavaScript 函數(shù)都放到了 UI 線程中獨(dú)立的 JavaScript 虛擬機(jī)中了，并不會(huì)和 JavaScript 線程搶占硬件資源。