背景

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

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

動畫拆分

首先，從最外層來看，動畫有一個(gè)抖動效果：先向左，再向右?？梢岳?rotate 旋轉(zhuǎn)屬性來實(shí)現(xiàn)。

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

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

實(shí)現(xiàn)抖動

首先通過 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>

定義動畫

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

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

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

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

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

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); // 編排動畫順序
    rotation.value = withRepeat(rotateAnimations, -1); // 重復(fù)執(zhí)行動畫
    return () => {
      cancelAnimation(rotation);
    };
}, []);

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

實(shí)現(xiàn)縮放動畫的思路與上面基本相似。這里需要注意的是，需要根據(jù)實(shí)際需求，調(diào)整動畫之間的節(jié)奏關(guān)系。比如縮放開始，抖動開始；縮放結(jié)束，抖動也就結(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)行自定義的操作。

注意，共享值變化不會觸發(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ā)過程中，我們的動畫代碼和狀態(tài)代碼都是用 JavaScript 寫在同一個(gè)文件中的，你可能會認(rèn)為你寫的動畫部分的 JavaScript 和狀態(tài)部分的 JavaScript 都是運(yùn)行在同一個(gè)線程中的， 但其實(shí)并不是這樣的。

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

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

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

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

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

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

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

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

總結(jié)

Reanimated 處理動畫的方法非常巧妙，并且性能極佳，是目前 React Native 社區(qū)中主流的動畫處理方案，很多開源庫都在使用。雖然官方文檔有些缺陷，比如 API 沒有 demo 不夠直觀、目前只有英文文檔，對英文差的同學(xué)不夠友好。

未來我們將深入學(xué)習(xí)和使用 Reanimated，來提升用戶體驗(yàn)，實(shí)現(xiàn)媲美原生的交互效果。

以上就是react native reanimated實(shí)現(xiàn)動畫示例詳解的詳細(xì)內(nèi)容，更多關(guān)于react native reanimated 動畫的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論