感觉活泼和直觉的移动应用程序是用户所记得的。 在“回击原生”中,动画是达到这种抛光的专业质量的主要工具。平稳的过渡、微妙的反馈和有目的的运动不仅让用户高兴,而且引导他们通过您的界面。本文扩展了核心技术,引入了先进的模式,并分享了性能提示,以帮助您创建“回击原生”应用程序。

为什么动画在回放原生作品中很重要

动画不仅仅是眼糖果。 动画通过提供视觉提示来提高可用性 — 比如按下按钮来确认一个水龙头, 或者卡片滑入来显示新内容。 它们会减少感知的负荷时间, 让你的应用感觉更快。 最重要的是, 动画将您的应用放在拥挤的市场中。 流畅的, 深思熟虑的动画界面信号质量和注意度, 增加用户的保留和满意度 。

基础:两部动画动力屋

React Industry Native 提供了两种主要动画系统:内置动画API[和较现代重现库[]. 了解它们的区别对于选择正确的工具至关重要.

动画 API

包含 React Industrial, 动画API 是通过运行动画在 JavaScript 线条上工作. 它提供了诸如 , ] 和 [ 等宣示方法. 对于简单的淡化内置或幻灯片过渡, 它完全足够了, 然而, 由于复杂或连续的动画(例如手势驱动的动画) 在 JavaScript 线条繁忙时, 动画API 最适合于简单,孤立的效果.

重新命名的图书馆

重新激活 (版本2或3) 以工作板方式运行UI线上的动画, 绕过 JavaScript 线程。 这使得高性能、 手势驱动或复杂的链条动画是理想的。 重新激活提供了一个更灵活的API, 配有钩子, 如 、 和 。 它与 反应- 成像器 [ 进行平滑互动, 推荐选择重命名。

基本动画技术

下面是您今天可以执行的证明技术。每个技术都包含一个对运动模式的简单解释和无代码描述。

1. 淡出/淡出

随时间变化的不透明是最简单的显示或优雅地隐藏元素的方法。使用 将 动画从 0 改为 1 (反之亦然)。对于再动画,使用 和动画样式。 花样对模式覆盖、工具提示或图像加载来说是极好的。

2. 幻灯片转换

横向或纵向翻译一个组件以创建运动。 从边缘滑动一个元素会感觉自然的—— 抽屉菜单或通知横幅。 将翻译与像 这样的宽松功能结合起来, 以模仿物理运动。 为了更好的性能, 请使用 属性并设定 (动画和再动画两种工作)。

3. 规模和弹跳

用户交互(例如按按钮)上的放大元素提供了触觉反馈。弹簧动画给出了一种轻度“弹跳”感,感觉有机。在“重力”中,[ 允许您调整硬度、坝度和质量来控制弹跳。弹跳效果对按钮、卡片选择或庆典套装等效果很好。

4. 轮调

旋转图标或图像以指示进度或状态变化。装入旋转器是一个经典的例子,但旋转也可以用于翻牌、扩展箭头或播放式加载动画。使用 将动画值映射到旋转范围(0-360度)。

5. 粉碎形状(刑警组织)

刑警组织[是一个强大的概念:它将输入范围映射到输出范围。例如,滚动位置可以驱动一个参数效应、改变颜色或调整元素大小。动画和再动支持插图。再动的在工作板内工作,以达到最大性能。

专业应用程序的高级模式

一旦你对基本技术感到舒适,就把它们结合起来,创造丰富的相互作用。

链条和顺序

使用 [[FLT: 15] (动画API) 或嵌入 [[FLT: 16]] ([FLT: 17]] (重新命名) 来逐一运行动画。这种模式对于登机流、 Step by scep 介绍或错开列表条目是理想的。

平行动画

一次性激活多个属性—— 超度、 尺度和翻译—— 使用 [[FLT: 18]] 或 [[[FLT: 19]]] 动画风格。 这会产生复杂、 协调的运动, 如卡片在逐渐消失时会扩展 。

手势驱动动画

将 反应式-内置式-地格-手提器[ 与处理刷音、锅和捏音的再动式组合起来。例如,一个翻译一行并显示删除按钮的刷音手势。重动式的完全运行在UI线上,确保60英尺的响应。

布局动画

React Industrial 的 Layout Animation API 自动将修改到组件的布局(添加、删除、调整大小) 。 虽然定制有限,但添加抛光是零的“%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

共享元素过渡

屏幕之间平稳地转换一个共享元素( 例如缩略图扩展成全屏幕图像) 。 库像 [[FLT: 0]] react-native- supposed- element [[FLT: 1] 或 [[FLT: 2]] react-navigation- supposed- element 包覆这个复杂的逻辑, 它们依赖于测量元素的起始和结尾位置并进行动画复制 。

利用动画库

而非从零开始写作,

  • Lottie – 从“ 效果”文件导出 的 Render 复杂向量动画。 完美地用于复杂、预设计的动画, 如装入旋转器、插图或微切交互。 库可以无缝地整合 。
  • Moti – 建在Reanimated上方,Moti为常用的动画图案(虚构,滑动,缩放等)提供了一种声明式API,其锅炉板最小,对于快速原型和UI微动画来说是极好的.
  • 动画(React Environment) — 仍然对重生过度的轻量级效果有用。例如,简单的抛物头或旋转旋转式旋转器。

性能优化提示

糟糕的动画会破坏用户体验。 遵循这些指引来保持您的应用平滑 :

  • 使用本地驱动 – 对于动画API, 设置在 [[FLT: 25] 或 [[FLT: 26] ] 上, 运行本地线程上的动画。 并非所有动画属性都支持它( 偏僻、 变换、 颜色是; 排版属性不是) 。
  • 重动画的预选再动画 – 重动画完全运行在UI线上,因此可以避免JavaScript线条阻塞. 总是使用重动画进行手势驱动或连续动画.
  • Avoid re-recreated 动画在每段渲染 – 使用(动画)或[(重命名)来纪念动画的值和样式.
  • 测量 FPS – 使用回放的土著FPS显示器(shake设备,允许perf显示器)或像的库式反应-内在-性能[来识别jank.
  • 简化布局 – 避免导致布局重新计算的动画属性(例如,,]),不增加硬件加速度. 偏好变化的维度.

真实的世界使用案例

要看到这些技术在操作中, 请检查一些应用, 如 [[ FLT: 0]] [转盘 [[ FLT: 1]] (pll to rerefresh ball, heart 动画), [[ FLT: 2]] Airbnb [[ FLT:3]] (行程项目之间的平稳过渡), [ [ ]] Headspace (具有旋转和缩放的密谋会话进场圈) 。 模式总是一样: 微妙、有目的的动作, 感觉自然, 永远不会分散注意力 。

以简单示例开始

如果您是新动画, 请先使用一个基本的按钮按下反馈。 使用重命名 :

import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
// ... inside component
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => ({
 transform: [{ scale: scale.value }]
}));
// on touch start
scale.value = withSpring(0.95);
// on touch end
scale.value = withSpring(1);
// Apply animatedStyle to a component

此最小示例给出了即时触觉反馈。 从这里构建: 添加不透明、 翻译或链条 。

结论

本地回声(React Industrial)中的主动画技术是一种投资,它能为用户参与和应用程序商店的收视率带来回报。从动画API开始,但随着需求的增长,它会逐渐升级。结合各种技术,如淡化、滑动和规模来创造丰富的互动。使用Lottie和Moti等库来加快开发。而且总是优先进行性能——模拟动画是专业应用的标志。实验、测试真实设备、让创意闪耀。

欲进一步阅读,请查阅官方 反应原生动画文档, 重新命名的docs,以及 Lottie for React原生资源[],这些可以让你从理论到高级执行的完整图景.