当前位置：首页 >UI设计 >React Native动画效果实现，布局方式以及UI界面还原

React Native动画效果实现，布局方式以及UI界面还原

发布时间：2024-08-22 20:43:46 浏览量：167次

在React Native中，UI和Android XML布局的编写方式有很多相似之处。
React Native框架中，通过Bridge实现了JSX源码和原生框架的通信。当调用React Native提供的API时，React Native框架会通过Bridge调用原生框架的方法。

React Native底层为React框架，通过虚拟DOM和diff算法，实现了只需控制state和props变更即可实现iOS和Android平台的UI变更，同时生成main.bundle.js文件供App加载。

在React Native中使用了Yoga这个基于C语言实现的CSS3/Flexbox布局引擎，让界面布局更加简单，且适用于多平台。

UI组件

React Native	Android View	iOS View	Web Analog	Description
<View>	<ViewGroup>	<UIView>	<div>	A container that supports layout with flexbox, style, some touch handling, and accessibility controls
<Text>	<TextView>	<UITextView>	<p>	Displays, styles, and nests strings of text and even handles touch events
<Image>	<ImageView>	<UIImageView>	<img>	Displays different types of images
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	A generic scrolling container that can contain multiple components and views
<TextInput>	<EditText>	<UITextField>	<input type="text">	Allows the user to enter text

核心组件和API：点击咨询

UI样式

为了给React-Native组件加上样式，你需要在JavaScript中添加样式表。

const styles = StyleSheet.create({  blueText: {    color: 'blue',    fontSize: 30,  }});

StyleSheet.create可以弥补编写复杂样式时，不能使用css的不便。

宽高单位与布局调整

RN中宽高可以直接通过style指定，与web不同的是，RN中尺寸是无单位的，表示与设备像素无关的逻辑像素点。推荐阅读《Android XML与HTML5 排布布局分析与对比—style的异同》。

动画

React Native提供了两个互补的动画系统：用于创建精细的交互控制的动画Animated和用于全局的布局动画LayoutAnimation。

Animated

Animated旨在以声明的形式来定义动画的输入与输出，在其中建立一个可配置的变化函数，然后使用start/stop方法来控制动画按顺序执行。 Animated仅封装了 6 个可以动画化的组件：View、Text、Image、ScrollView、FlatList和SectionList，不过你也可以使用Animated.createAnimatedComponent()来封装你自己的组件。

import React, { useRef, useEffect } from 'react';import { Animated, Text, View } from 'react-native';const FadeInView = (props) => {  const fadeAnim = useRef(new Animated.Value(0)).current;  React.useEffect(() => {    Animated.timing(      fadeAnim,      {        toValue: 1,        duration: 10000,      }    ).start();  }, [fadeAnim])  return (          {props.children}      );}export default () => {  return (    Fading in  )}

这一过程经过特别优化，执行效率会远高于反复调用setState和多次重渲染。

因为这一过程是纯声明式的，因此还有进一步优化的空间，比如我们可以把这些声明的配置序列化后发送到一个高优先级的线程上运行。

配置动画

动画拥有非常灵活的配置项。自定义的或预定义的 easing 函数、延迟、持续时间、衰减系数、弹性常数等都可以在对应类型的动画中进行配置。

Animated.timing(this.state.animatedValue, {  toValue: 1,  easing: Easing.back(),  duration: 2000}).start();

详细配置动画信息请参考：点击咨询

组合动画

多个动画可以通过parallel（同时执行）、sequence（顺序执行）、stagger和delay来组合使用。它们中的每一个都接受一个要执行的动画数组，并且自动在适当的时候调用start/stop。

Animated.sequence([  // decay, then spring to start and twirl  Animated.decay(position, {    velocity: { x: gestureState.vx, y: gestureState.vy },    deceleration: 0.997  }),  Animated.parallel([    // after decay, in parallel:    Animated.spring(position, {      toValue: { x: 0, y: 0 }    }),    Animated.timing(twirl, {      toValue: 360    })  ])])

默认情况下，如果任何一个动画被停止或中断了，组内所有其它的动画也会被停止。Parallel 有一个stopTogether属性，如果设置为false，可以禁用自动停止。

在Animated文档的组合动画一节中列出了所有的组合方法。

合成动画值

const a = new Animated.Value(1);const b = Animated.divide(1, a);Animated.spring(a, {  toValue: 2}).start();

可以使用加减乘除以及取余等运算来把两个动画值合成为一个新的动画值。

插值

每个动画属性都可以设置值变化区间

style={{    opacity: this.state.fadeAnim,    transform: [{      translateY: this.state.fadeAnim.interpolate({        inputRange: [-300, -100, 0, 100, 101],        outputRange: [150, 0]       }),    }],  }}

interpolate()还支持定义多个区间段落，常用来定义静止区间等。

跟踪动态值

Animated.spring(follower, { toValue: leader }).start();Animated.timing(opacity, {  toValue: pan.x.interpolate({    inputRange: [0, 300],    outputRange: [1, 0]  })}).start();

比如在上面

上一篇北师大未来设计学院在第六届中国教博会发布五项PBL大挑战项目

下一篇热爱UI设计，如何拓宽职业发展之路

热门课程推荐

热门资讯

1. iPhone6的UI设计尺寸规范，原来如此重要！

想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
2. 12个绝佳的UI设计网站，助力你的创作之旅!

将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？

通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
4. 10个免费学习UI设计的网站提升你的设计能力

怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
5. 移动端列表页和表单页设计秘诀:让你的APP点击率翻倍

在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
6. 推荐10本适合UI设计师看的书籍，轻松掌握技能!

对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
7. 零基础学UI设计要多久？培训完能拿多少工资？

探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
8. 物联网APP UI设计:创造智能硬件领域的沉浸式体验

ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
9. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？

想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用

摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...