React Native 全栈开发实战班 - 第四部分：用户界面进阶之动画效果实现

🕗 发布于 2024-11-15 20:53 react native ui react.js

在移动应用中，动画效果 是提升用户体验的重要手段。合理的动画设计可以增强应用的交互性、流畅性和视觉吸引力。React Native 提供了多种实现动画的方式，包括内置的 Animated API、LayoutAnimation 以及第三方库（如 react-native-reanimated）。本章节将详细介绍如何使用这些工具来实现各种动画效果。

1.1 动画概述

在 React Native 中，动画主要用于以下场景：

组件的显示与隐藏： 例如，模态框的弹出与关闭。
界面元素的过渡： 例如，页面切换时的过渡动画。
交互反馈： 例如，按钮点击时的缩放效果。
数据驱动的动画： 例如，图表、进度条等动态变化。

React Native 提供了以下几种主要的动画实现方式：

Animated API： 强大的动画库，支持多种动画类型和插值。
LayoutAnimation： 简单的布局动画，适用于布局变化时的动画效果。
react-native-reanimated： 第三方动画库，功能更强大，适合复杂动画。

本章节将重点介绍 Animated API 和 LayoutAnimation 的使用。

1.2 使用 `Animated` API

Animated 是 React Native 提供的一个强大的动画库，支持多种动画类型和插值操作。

1.2.1 基本用法

步骤：

创建动画值：

使用 Animated.Value 创建一个动画值。

const animation = useRef(new Animated.Value(0)).current;

定义动画：

使用 Animated.timing 或其他动画函数定义动画。

Animated.timing(animation, {
  toValue: 1,
  duration: 1000,
  useNativeDriver: true,
}).start();

绑定动画值到样式：

使用插值函数将动画值绑定到组件的样式属性。

const opacity = animation.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 1],
});

<Animated.View style={{ opacity }}>
  {/* 内容 */}
</Animated.View>

示例：

// FadeInView.js
import React, { useRef } from 'react';
import { Animated, Text, View, StyleSheet } from 'react-native';

const FadeInView = () => {
  const animation = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.timing(animation, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }, [animation]);

  const opacity = animation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });

  return (
    <Animated.View style={{ opacity }}>
      <Text style={styles.text}>Fade In!</Text>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
  },
});

export default FadeInView;

// App.js
import React from 'react';
import { View, StyleSheet } from 'react-native';
import FadeInView from './FadeInView';

const App = () => {
  return (
    <View style={styles.container}>
      <FadeInView />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

解释：

Animated.timing 定义了一个从 0 到 1 的线性动画，持续时间为 1000 毫秒。
useNativeDriver: true 使用原生驱动，提高动画性能。
interpolate 方法将动画值从 0-1 映射到 0-1 的透明度范围。

1.2.2 组合动画

可以使用 Animated.sequence, Animated.parallel, Animated.stagger 等组合动画函数，实现复杂的动画效果。

示例：

// BounceView.js
import React, { useRef } from 'react';
import { Animated, Text, View, StyleSheet } from 'react-native';

const BounceView = () => {
  const animation = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.sequence([
      Animated.timing(animation, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }),
      Animated.timing(animation, {
        toValue: 0.8,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(animation, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }),
    ]).start();
  }, [animation]);

  const scale = animation.interpolate({
    inputRange: [0, 1],
    outputRange: [0.5, 1],
  });

  return (
    <Animated.View style={{ transform: [{ scale }] }}>
      <Text style={styles.text}>Bounce!</Text>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
  },
});

export default BounceView;

解释：

Animated.sequence 按顺序执行多个动画。
实现了先放大再缩小再恢复的弹跳效果。

1.2.3 插值与映射

interpolate 方法可以将动画值映射到不同的范围，实现复杂的动画效果。

示例：

// ColorChangeView.js
import React, { useRef } from 'react';
import { Animated, Text, View, StyleSheet } from 'react-native';

const ColorChangeView = () => {
  const animation = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.timing(animation, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: false,
    }).start();
  }, [animation]);

  const backgroundColor = animation.interpolate({
    inputRange: [0, 1],
    outputRange: ['#ff0000', '#0000ff'],
  });

  return (
    <Animated.View style={{ backgroundColor, padding: 20 }}>
      <Text style={styles.text}>Color Change!</Text>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    color: '#fff',
  },
});

export default ColorChangeView;

解释：

interpolate 将动画值从 0-1 映射到颜色范围 #ff0000 到 #0000ff，实现颜色渐变动画。

1.3 使用 `LayoutAnimation`

LayoutAnimation 是一种简单的布局动画，适用于布局变化时的动画效果。

1.3.1 基本用法

步骤：

调用 LayoutAnimation.configureNext 配置动画：

LayoutAnimation.configureNext({
  duration: 300,
  create: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity,
  },
  update: {
    type: LayoutAnimation.Types.easeInEaseOut,
  },
});

触发布局变化：

例如，更新组件的 state 或 props，触发重新渲染。

示例：

// LayoutAnimationExample.js
import React, { useState } from 'react';
import { View, Text, StyleSheet, LayoutAnimation, Button } from 'react-native';

const LayoutAnimationExample = () => {
  const [show, setShow] = useState(false);

  const toggle = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setShow(!show);
  };

  return (
    <View style={styles.container}>
      <Button title="Toggle" onPress={toggle} />
      {show && (
        <View style={styles.box}>
          <Text>Hello, LayoutAnimation!</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: '#f0f0f0',
    marginTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default LayoutAnimationExample;

解释：

LayoutAnimation.configureNext 配置布局动画。
LayoutAnimation.Presets.easeInEaseOut 使用预设的缓入缓出动画。
当 show 状态改变时，触发布局变化，动画效果自动应用。

1.3.2 注意事项

LayoutAnimation 适用于简单的布局变化动画，不适合复杂的动画效果。
LayoutAnimation 不支持动画暂停、停止等高级控制。

1.4 使用 `react-native-reanimated`

react-native-reanimated 是一个功能强大的动画库，支持复杂的动画效果和手势交互。

1.4.1 安装 `react-native-reanimated`

npm install react-native-reanimated

1.4.2 基本用法

示例：

// ReanimatedExample.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

const ReanimatedExample = () => {
  const offset = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateY: offset.value }],
    };
  });

  React.useEffect(() => {
    offset.value = withTiming(100, { duration: 1000 });
  }, [offset]);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyle]}>
        <Text>Reanimated!</Text>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ReanimatedExample;

解释：

useSharedValue 创建一个共享的动画值。
useAnimatedStyle 定义动画样式。
withTiming 定义动画的时间和持续时间。

1.4.3 高级用法

react-native-reanimated 支持手势驱动、弹簧动画、弹簧驱动等高级功能。

这部分留给读者自行学习，用法基本上和基本例子一致。

导师简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师

原文地址：https://blog.csdn.net/bravekingzhang/article/details/143768039

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【无标题】
下一篇：Flutter：input输入框

2024年网络安全（黑客技术）三个月自学手册
网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。走安全行业的工程方向的，技术上面其实有很大的重叠
阅读更多2024-11-15
数据结构Python版
2.3.3 双链表双链表和链表一样，只不过每个节点有两个链接——一个指向后一个节点，一个指向前一个节点。此外，除了第一个节点，双链表还需要记录最后一个节点。每个结点为DLinkNode类对象，包括存储
阅读更多2024-11-15
连接数据库导出数据库信息支持excel pdf html markdown
1. java -jar运行后连接数据库即可，支持多种数据库。2.支持多种导出格式。
阅读更多2024-11-15
【解决】Layout 下创建槽位后，执行 Image 同步槽位位置后表现错误的问题。
开发平台：Unity 6.0编程语言：CSharp编程平台：Visual Studio 2022。
阅读更多2024-11-15
乐理的学习（简谱过渡五线谱）
调号在五线谱开头标注多个“♯”或“♭”每个“♯”或“♭”对应一个音符位置的升降，比如：C大调（无升降）是自然大调的基础形式，不需要额外调号。G大调：在调号中添加一个“F♯”，表示所有的F都要弹F♯。D
阅读更多2024-11-15
CSS回顾-颜色单位详解
本文介绍了 CSS 中的颜色单位相关知识。包括颜色名称、十六进制颜色值、RGB、RGBA、HSL、HSLA 等颜色单位的表示方式、特点及使用场景。还阐述了颜色单位之间（颜色名称与十六进制、十六进制与
阅读更多2024-11-15
Spring Boot中集成Redis与MySQL
用途：将键或简单的值序列化为字符串。适用场景：通常用于键的序列化，确保键在 Redis 中以字符串存储，以便于直接查看和管理。用途：将对象序列化为 JSON 格式的字符串，并支持 JSON 反序列化回
阅读更多2024-11-15
linux配置nginx
状态如果是Active: active (running)则是正常的。
阅读更多2024-11-15
C03S04-Linux网络之软件仓库、SSH和NFS
SSH是一种安全通道协议，主要用于远程登录到服务器、执行远程命令、传输文件以及管理服务器等。默认的端口号是TCP/22。NFS（网络文件系统，Network File System）是一种件系统协议，
阅读更多2024-11-15
无人机飞手在保家卫国上重要性技术详解
无人机飞手通过操作无人机上的通信设备，可以将侦察到的情报信息及时传输给指挥系统，同时也可以接收指挥系统的指令进行任务调整。无人机飞手经过专业培训，不仅掌握了无人机在不同气候、地形条件下的飞行技巧，还具
阅读更多2024-11-15

React Native 全栈开发实战班 - 第四部分：用户界面进阶之动画效果实现

1.1 动画概述

1.2 使用 Animated API

1.2.1 基本用法

1.2.2 组合动画

1.2.3 插值与映射

1.3 使用 LayoutAnimation

1.3.1 基本用法

1.3.2 注意事项

1.4 使用 react-native-reanimated

1.4.1 安装 react-native-reanimated

1.4.2 基本用法

1.4.3 高级用法

导师简介

相关文章

1.2 使用 `Animated` API

1.3 使用 `LayoutAnimation`

1.4 使用 `react-native-reanimated`

1.4.1 安装 `react-native-reanimated`