快速總結(jié)：

本博客將向您展示如何使用 React Native 動(dòng)畫中的插值函數(shù)在 React Native 中創(chuàng)建速度計(jì)或動(dòng)畫進(jìn)度表。

先決條件

要在 React Native 中構(gòu)建速度計(jì)，在開始實(shí)施此解決方案之前，您需要滿足以下先決條件。

?? 進(jìn)度表的 SVG 圖像
?? react-native-svg 庫(kù)
?? SVG 到 React Native 轉(zhuǎn)換器（JSX 組件）

介紹

React Native 是一個(gè)流行的框架，用于使用 JavaScript 構(gòu)建本機(jī)移動(dòng)應(yīng)用程序。它提供的功能之一是能夠在您的應(yīng)用程序中創(chuàng)建流暢且引人入勝的動(dòng)畫。

有幾種不同的方法可以在 React Native 應(yīng)用程序中實(shí)現(xiàn)動(dòng)畫：

• 一種選擇是使用動(dòng)畫 API，它允許您定義可以以聲明方式組合和控制的復(fù)雜動(dòng)畫。

• 您還可以使用 LayoutAnimation API 為您的應(yīng)用程序布局設(shè)置動(dòng)畫，或使用 Transition API 為組件的外觀和消失設(shè)置動(dòng)畫。

• 另一種選擇是使用第三方動(dòng)畫庫(kù)，例如 Lottie，它允許您使用在 After Effects 等工具中創(chuàng)建的預(yù)先設(shè)計(jì)的動(dòng)畫。

總的來(lái)說(shuō)，React Native 可以輕松地向您的應(yīng)用程序添加動(dòng)畫，并提供多種工具和方法供您根據(jù)需要進(jìn)行選擇。

什么是插值？

插值器是一種將輸入范圍映射到輸出范圍的函數(shù)，常用于動(dòng)畫中以提供兩個(gè)值之間的平滑過(guò)渡。在 React Native 中，您可以使用帶動(dòng)畫 API 的插值器來(lái)控制動(dòng)畫隨時(shí)間的行為。

例如，假設(shè)您要?jiǎng)?chuàng)建一個(gè)旋轉(zhuǎn)動(dòng)畫，在 2 秒內(nèi)將組件從 0 度旋轉(zhuǎn)到 360 度。您可以使用插值器來(lái)指定輸入范圍（經(jīng)過(guò)的時(shí)間）和輸出范圍（旋轉(zhuǎn)角度）之間的關(guān)系。

下面是一個(gè)示例，說(shuō)明如何使用插值器在 React Native 中創(chuàng)建旋轉(zhuǎn)動(dòng)畫：

從'react-native'導(dǎo)入{動(dòng)畫};const rotateAnimation = new Animated.Value(0);Animated.timing（旋轉(zhuǎn)動(dòng)畫，{
  toValue: 360,
  持續(xù)時(shí)間：2000，
  使用本地驅(qū)動(dòng)程序：是的，
  插值：（輸入）=> {
    // input是一個(gè)0到1之間的值，代表動(dòng)畫的進(jìn)度
    // 您可以使用插值器函數(shù)將此輸入范圍映射到所需的輸出范圍（旋轉(zhuǎn)角度）
    返回輸入 * 360；// 旋轉(zhuǎn) 360 度 2 秒
  }}）。開始（）;

在此示例中，rotateAnimation 值將從 0 開始并以 360 度為動(dòng)畫持續(xù) 2 秒。插值函數(shù)將輸入范圍（0 到 1 之間的值）映射到輸出范圍（旋轉(zhuǎn)角度）。您可以使用任何插值器函數(shù)或創(chuàng)建您自己的插值器函數(shù)來(lái)控制動(dòng)畫的行為。

創(chuàng)建動(dòng)畫后，您可以使用 rotateAnimation 值通過(guò)變換樣式屬性控制組件的旋轉(zhuǎn)，如下所示：

<動(dòng)畫.View
  樣式={{
    變換：[{旋轉(zhuǎn)：旋轉(zhuǎn)動(dòng)畫}]
  }}>
  {/* 你的組件在這里 */}</動(dòng)畫.View>

這將使組件在 2 秒內(nèi)從 0 度平穩(wěn)旋轉(zhuǎn)到 360 度。您還可以使用其他插值函數(shù)來(lái)實(shí)現(xiàn)不同的效果，例如緩動(dòng)或加速。

SVG 可縮放矢量圖形

SVG 是一種矢量圖形格式，可讓您創(chuàng)建可縮放的圖形，這些圖形可以輕松調(diào)整大小而不會(huì)降低質(zhì)量。SVG 圖形是使用 XML 標(biāo)記創(chuàng)建的，通常用于徽標(biāo)、圖標(biāo)和其他需要可縮放的簡(jiǎn)單圖形。

React Native 提供了一個(gè)名為 react-native-svg 的庫(kù)，它允許您在 React Native 應(yīng)用程序中使用 SVG 圖形。使用此庫(kù)，您可以導(dǎo)入 SVG 文件并將它們渲染為本機(jī)組件，從而使您可以輕松地將可縮放圖形包含在您的應(yīng)用程序中。

下面是一個(gè)示例，說(shuō)明如何使用 react-native-svg 在 React Native 應(yīng)用程序中呈現(xiàn) SVG 文件：

從'react-native'導(dǎo)入{View}；從'react-native-svg'導(dǎo)入{Svg}；功能我的組件（）{
  返回 （
    <視圖>
      <Svg width="100" height="100" viewBox="0 0 100 100">
        <Circle cx="50" cy="50" r="40" fill="紫色" />
      </SVG>
    </查看>
  );}

在此示例中，SVG 組件用于呈現(xiàn)包含單個(gè)圓形元素的 SVG 文件。要?jiǎng)?chuàng)建更復(fù)雜的圖形，您可以使用其他 SVG 元素，例如 Rect、Line 或 Polygon。

使用 react-native-svg 的一個(gè)好處是它允許你在你的應(yīng)用程序中使用 SVG 圖形而不用擔(dān)心在不同設(shè)備上的兼容性問題。它使您可以使用標(biāo)準(zhǔn)的 React Native 樣式屬性輕松地設(shè)置 SVG 圖形的樣式。

在 React Native 中構(gòu)建動(dòng)畫進(jìn)度表的步驟

速度計(jì)，也稱為儀表或進(jìn)度表，是一定范圍內(nèi)數(shù)值的視覺表示，通常用于顯示任務(wù)或過(guò)程的進(jìn)度或狀態(tài)。在 React Native 應(yīng)用程序中，您可以使用 Animated API 和一些基本幾何圖形創(chuàng)建速度計(jì)動(dòng)畫。

下面是一個(gè)示例，說(shuō)明如何在 React Native 中創(chuàng)建簡(jiǎn)單的速度計(jì)動(dòng)畫或動(dòng)畫進(jìn)度表。

請(qǐng)按照以下步驟在 React Native 中創(chuàng)建動(dòng)畫進(jìn)度表：

第一步：將速度計(jì)的SVG組件轉(zhuǎn)換為React NativeComponent

在第一步中，我們將在 RN 組件中轉(zhuǎn)換進(jìn)度表 SVG 組件。

相同的輸出將顯示在 JSX 組件中，我們需要在其中分離可以使用 react-native-svg 呈現(xiàn)的指針和儀表組件。

為您的 React Native 應(yīng)用程序賦予生動(dòng)的生命
Bacancy 擁有最敬業(yè)和最熟練的開發(fā)人員。立即聯(lián)系我們并聘請(qǐng) React Native 開發(fā)人員

第 2 步：定義插值

展望未來(lái)，我們將根據(jù)進(jìn)度表的組件設(shè)計(jì)來(lái)定義插值。

考慮到您的 SVG 組件的布局，請(qǐng)更改以下函數(shù)中的輸入和輸出范圍。

const animInterpolation = progressValue.interpolate({
    輸入范圍：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    輸出范圍：[
      '-90度',
      '-90度',
      '-90度',
      '-45度',
      '-45度',
      '0度',
      '0度',
      '45度',
      '45度',
      '90度',
      '90度',
    ],
  });

第 3 步：將針與 SVG 圖像集成

在下一步中，我們使用 react-native-svg 和我的 github 存儲(chǔ)庫(kù)代碼為 needle 集成錨點(diǎn)輔助組件。在 getTransform() 函數(shù)中，我們需要提供預(yù)期旋轉(zhuǎn)的錨點(diǎn)。

const getTransform = () => {
    讓變換= {
      變換：[{perspective: 1}, {rotate: animInterpolation}],
    };
    返回錨點(diǎn)（
      轉(zhuǎn)換，
      {x: 0.5, y: 1},
      {寬度：125，高度：150}，
    );
  };

這里，{x: 0.5, y: 1} 表示旋轉(zhuǎn)應(yīng)該發(fā)生在中底點(diǎn)。

第 4 步：將 SVG 組件添加到動(dòng)畫視圖

來(lái)自 React-Native 的動(dòng)畫 API 用于提供動(dòng)畫。

定義一個(gè)用于自動(dòng)動(dòng)畫的 useEffect 或一個(gè)按鈕點(diǎn)擊處理函數(shù)，如下所示將允許針動(dòng)畫。

函數(shù) onButtonClick() {
    如果（進(jìn)度值！==分?jǐn)?shù)）{
      setScore(Math.floor(Math.random() * (10 - 1 + 1) + 1));
    }
  }
  使用效果（（）=> {
    如果（分?jǐn)?shù) > 0）{
      Animated.timing（progressValue，{
        持續(xù)時(shí)間：2000，
        toValue: new Animated.Value(score),
        使用本地驅(qū)動(dòng)程序：是的，
      }).開始(完成=>{
        console.log('完成====', 完成);
        如果（完成）{
          setFillColor('#91d9ae');
        }
      });
    }
  }, [progressValue, score]);

第 5 步：最終輸出

在這里，您可以找到創(chuàng)建的Github 存儲(chǔ)庫(kù)的鏈接，您可以從中使用代碼在 React Native 中構(gòu)建動(dòng)畫進(jìn)度表。

結(jié)論

（言鼎科技） 專做語(yǔ)聊app,直播商城app,預(yù)約上門app,同城外賣跑腿app,家政服務(wù)app,醫(yī)療程序。