介绍

不透明度是指用于控制元素可见性的对象或元素的透明度。它有助于逐步进入和逐步退出，以防止任何可能对用户产生负面影响的不和谐的布局移动。当不透明度值发生更改时，它会影响执行此类更改的组件的可见性。

您可以设置从 0 到 1 的不透明度值，这相当于 0% 到 100%。因此，例如，我们可以根据我们想要多少可见性或透明度或当时传达给用户的信息，将我们的不透明度值设置为 0.1 或 0.5。

动画不透明度的好处

• 在更改时为该值设置动画的核心重要性之一是为用户的眼睛提供平滑的过渡效果，基本上不会以不吸引人的方式更改视觉效果。这有时会激怒用户。
• 让用户看到他们行动的效果，而不是让他们怀疑是否有任何影响。
• 在应用程序的每个状态之间创建连接。
• 它有助于轻松传达或推动信息回家。
• 当用户需要执行一些所需的操作时，它可以用作用户的指南。举个例子，在某些表单字段被填写和验证之前，该按钮可以保持禁用状态。它通常通过模糊按钮组件来实现，直到满足这些操作或要求。

先决条件

• JavaScript 基础知识
• React 基础知识
• 运行 CLI 命令的基本知识
• Node.js 和 npm 安装在你的机器上
• XCode 或 Android Studio 安装在您的机器上
• 使用 React Native 的一些经验（建议，非必需）

入门

让我们使用以下命令创建一个新的 expo 项目：

npx create-expo-app rn-opacity

在我们刚刚创建的应用程序的根目录中，有一个 App.js 文件，其中包含一个启动代码，以显示应用程序在安装后已启动并正常运行。

因此，让我们分别使用命令 yarn ios for iOS 和 yarn android for android 运行我们的应用程序，我们将看到组件的内容出现在我们的屏幕上。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';export default function App() {
  return (
    
      Open up App.js to start working on your app!
      
    
  );
}const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

构建用户界面

我们可以添加一个组件结构来演示我们的示例吗？ 是的，这是可能的！

在我们的源代码中是一个橙色框，我们使用 View 组件来构建 UI 并将 backgroundColor 设置为橙色

我们在第 1 行导入 react 库。

在第 2 行，我们导入 StyleSheet 用于编写外部样式，View 用于构建我们的 UI，以及 TouchableWithoutFeedback 按钮组件用于实现交互或状态切换触发。

import React from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, View, TouchableWithoutFeedback } from "react-native";export default function App() {
  return (
    
       null}>
        
            
    
  );
}const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
            backgroundColor: "orange",
            height: 200,
            width: 200,
            opacity: 0.5,
          }
});

把所有东西放在一起

在下面的 App.js 文件中，我们添加了相当多的更改，让我们通过代码行进行解释。

import React, { useRef } from "react";
import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Animated,
} from "react-native";export default function App() {  const opacityAnimation = useRef(new Animated.Value(0.5)).current;
  const opacityStyle = { opacity: opacityAnimation };  const animateElement = () => {    Animated.timing(opacityAnimation, {
      toValue: 0,
      duration: 1500,
      useNativeDriver: true
    }).start(() => {
      Animated.timing(opacityAnimation, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true
      }).start()
    })
  };  return (
    
       animateElement()}>
        
            
    
  );
}const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    backgroundColor: "orange",
    height: 200,
    width: 200,
    opacity: 0.5,
  },
});

我们声明一个 opacityAnimation 变量来保存设置为 0.5 的 Animated.value。这意味着我们的盒子在渲染时默认的不透明度值为 0.5

在第 13 行，在我们的代码中，我们还声明了一个变量来保存我们将动态更改的 opacity 样式的对象，并将 opacity 属性设置为 opacityAnimation 的值。

在 animateElement 函数中，我们访问 Animated.timing 方法。 Timing 会将单个值的动画在设定的时间段内指定为另一个值，因此它的函数签名是 opacityAnimation 然后是配置对象。在我们的配置对象中，我们有以下选项：

• toValue：我们动画的新值。
• 持续时间：动画的长度（以毫秒为单位）
• useNativeDriver：允许原生代码在 UI 线程上执行动画。

要触发更改，我们需要调用源代码中的 start 方法。

此外，在我们渲染 UI 的地方，我们用 Animated.View 组件替换了 View 组件。 Animated 库包裹着普通的 View 元素

在我们的 TouchableWithoutFeedback 按钮组件中调用 animateElement 函数。它在哪里被传递到 onPress 函数道具中。

在框区域内单击将触发我们的动画，使其在两次调用中从 0.5 淡出到 0，然后从 0 淡入到 1 持续 1500 毫秒。

这是该应用程序的演示：

概括

可以应用此功能的一个很好的用例是在 Button 组件、Checkbox 组件和 Radio Button 组件中。 您会发现此实现对于在与您的应用程序交互时实现吸引用户的视觉效果很有用。

感谢您的光临，希望您发现本教程对您有用。

关注七爪网，获取更多APP/小程序/网站源码资源！