react 打字机效果_React本机打字稿滚动感知标题转换

react 打字机效果

重要的优化-动态标题 (The optimisation that matters — dynamic headers)

Although optimising header behaviour comes at the latter stages of an app’s development pipeline to polish the UX experience, doing so can make a big difference to the overall user experience of an app. Enhancing a static header to become responsive and dynamic results in more screen space, a deduplication of content, along with the aesthetically pleasing manner when header content transitions in and out, adding more distinct personality to the app.

尽管优化标题行为是在应用程序开发流程的后期阶段，以完善UX体验，但这样做可以对应用程序的整体用户体验产生很大的影响。 增强静态标头以使其具有响应性和动态性，可以在更多的屏幕空间中进行内容的重复数据删除，以及在标头内容移入和移出时美观的方式，从而为应用程序添加了更多独特的个性。

This article walks through the process of transitioning a header as the user scrolls, focussing on text content and the header’s underlying shadow property. These elements will react to a <ScrollView /> wrapping the the screen content, that feeds its scroll offset to a React Context.

本文介绍了在用户滚动时转换标题的过程，重点介绍了文本内容和标题的基础阴影属性。 这些元素将对包装屏幕内容的<ScrollView />做出React，并将其滚动偏移量馈送到React Context。

The techniques used here are not limited to header components only — they can be used to transition other components relative to scroll position, such as animations of a how-to guide, other UI elements such as back-to-top buttons, etc. However, with headers being a generally very familiar concept, they are a good place to start exploring such techniques.

此处使用的技术不仅限于标头组件，还可以用于相对于滚动位置转换其他组件，例如操作指南的动画，其他UI元素(例如，从上到下的按钮)等。 ，标题通常是一个非常熟悉的概念，它们是开始探索此类技术的好地方。

项目概况 (Project Overview)

The full project can be found here on Github to experiment with or build upon for your own React Native projects. The final result resembles the following demo:

可以在Github上找到完整的项目，以尝试或构建自己的React Native项目。 最终结果类似于以下演示：

Demonstration of a header title and shadow fade-in relative to <ScrollView /> position

演示标题标题和相对于<ScrollView />位置的阴影淡入

There are actually two transitions happening here to compliment both header text content and the gradual fade of the shadow:

实际上，这里发生了两种转换，以补充标题文本内容和阴影的逐渐淡入：

• The My Header title only fades in and out once the <ScrollView /> offset has reached certain thresholds. This ensures the header text will not be only partly visible if the user stops scrolling half way through the transition.

  仅当 <ScrollView /> 偏移量达到某些阈值时， “ 我的标题”标题才会淡入和淡出。 这个 确保用户在过渡过程中途停止滚动时，标题文本不会仅部分可见。

• The header shadow fades as the <ScrollView /> is scrolled, between the same two thresholds, where the opacity of the shadow gradually changes as the user scrolls between those thresholds. Unlike the header text, it feels more fluid for the shadow to always react to the <ScrollView /> offset —unlike text, it does not impair reading if it is only partly visible.

  在 <ScrollView /> 滚动时 ，标题阴影在相同的两个阈值之间逐渐消失，其中阴影的opacity随着用户在这些阈值之间滚动而逐渐变化。 与标题文本不同，阴影始终对<ScrollView />偏移量做出React感觉更流畅-与文本不同，如果仅部分可见，它不会影响阅读。

Achieving these transitions is done with standard React JS and React Native APIs that work together to create a native feeling experience. React Native’s Animated API is, after-all, hooked into the native animation frameworks of the both iOS and Android, resulting in low latency header transitions that feel fluid and part of the native experience.

通过标准的React JS和React Native API可以实现这些过渡，这些API可以一起创造本机的感觉。 毕竟，React Native的Animated API已挂接到iOS和Android的本机动画框架中，从而导致低延迟的标头转换，感觉流畅并且是本机体验的一部分。

More specifically, the following components have been implemented to make the transition happen, and will be the focus of this article:

更具体地说，已实现以下组件以使过渡发生，并且将成为本文的重点：

• A <ScrollContext /> component that hosts a React Context is wrapped around the entire application. From here, any <Header /> component within the app will be able to access the transition state values, such as the current scroll offset, the resulting opacity and whether the title is showing.

  托管React Context的<ScrollContext />组件包装在整个应用程序中。 从这里开始，应用程序中的任何<Header />组件都将能够访问过渡状态值，例如当前的滚动偏移量，产生的不透明度以及标题是否显示。

• A wrapped <ScrollView /> component. This component will also be named ScrollView, and acts as the default ScrollView component of the project. It simply wraps the default React Native ScrollView component, but also defines its onScroll behaviour and plugs in any props passed through to it. By doing this, every ScrollView is hooked up to our ScrollContext out of the box.

  包装<ScrollView />组件。 该组件也将命名为ScrollView ，并作为项目的默认ScrollView组件。 它只是包装了默认的React Native ScrollView组件，还定义了它的onScroll行为并插入传递给它的所有props。 这样，每个ScrollView都可以直接连接到我们的ScrollContext 。

• A custom <Header /> component that leverages ScrollContext to display the correct transition state. This component is a simple 3-row header that users will be accustomed to — but also contains fade animations along with Animated.View components to handle the transitions. We’ll delve more deeply into <Header /> along with its styling and hosted animations further down.

  一个自定义的<Header />