react-native转场动画,让你的APP瞬间绚丽起来

一、前言

关于react-native的转场动画这里要依赖于路由库"react-navigation":“3.6.1”，可以实现包括向上转场、向下转场、向左转场、向右转场、缩放、alpha值变化、旋转等多种动画。

二、实现方式

以向左转场为例，我们需要在项目路由下 -> createStackNavigator -> transitionConfig 配置参数如下

transitionConfig: (sceneProps) => ({transitionSpec: {duration: 3000,// easing: Easing.out(Easing.poly(1)),easing: Easing.bounce,timing: Animated.timing,},screenInterpolator: sceneProps => {const {layout, position, scene} = sceneProps;const {index} = scene;console.log('zhanglei-index:' + index);const height = layout.initHeight;//沿X轴平移const translateX = position.interpolate({inputRange: [index - 1, index, index + 1],outputRange: [height, 0, 0],});//沿Y轴平移const translateY = position.interpolate({inputRange: [index - 1, index, index + 1],outputRange: [height, 0, 0],});//透明度const opacity = position.interpolate({inputRange: [0, 0.5, 0.9, 1],outputRange: [1, 0.25, 0.7, 1],// inputRange: [index - 1, index - 0.99, index],// outputRange: [0, 1, 1],});const rotateX = position.interpolate({inputRange: [0, 0.5, 1],outputRange: ['0deg', '90deg', '0deg']});const scaleX = position.interpolate({inputRange: [0, 0.5],outputRange: [0.8, 1.2],});return {// opacity,transform: [{translateX},// {translateY},// {rotateY: rotateX},// {scale: scaleX},]};},}),

实现效果

其他的方式可以通过代码中几种动画的组合来实现，这里由于时间关系就只做个简记，以后再补充。另外我们也可以通过原生路由处理，将页面的转场动画回归到原生开发。

三、transform样式的使用详解

可以很明显的看到，这里的动画是主要是由alpha值与transform样式控制的。transform主要可以用于实现平移、缩放、旋转、倾斜等图形变换。

3.1、平移

translateX：沿 x 轴方向平移
translateY：沿 y 轴方向平移

3.2、缩放

scaleX：沿 x 轴方向放大
scaleY：沿 y 轴方向放大
scale：沿 x、y 轴方向都放大

3.3、旋转

rotateX：沿 x 轴旋转
rotateY：沿 y 轴旋转
rotateZ：沿 z 轴旋转
rotate：不指定轴旋转

3.4、倾斜（或者叫做斜切）

skewX：沿 x 轴方向倾斜
skewY：沿 y 轴方向倾斜

3.5、react-native坐标轴方向

xyz轴的方向为（手机屏幕面向上，平方在手机上）：
X轴正方向：手机右侧为正，向左为负；
Y轴正方向：手机下方为正，上方为负；
Z轴正方向：从手机背面向屏幕指向为负，反之从屏幕向背面指向为正；
控制旋转中心：https://www.jianshu.com/p/c67559b8f691

四、内置动画

另外，react-native内置了几种简单的转场动画，我们可以简单的处理成

transitionConfig: StackViewStyleInterpolator.forVertical,

其枚举类型有

import StackViewStyleInterpolator from "react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator";
export default {forHorizontal,forVertical,forFadeFromBottomAndroid,forFadeToBottomAndroid,forFade,forNoAnimation
};

react-native转场动画,让你的APP瞬间绚丽起来相关推荐

android转场动画,让你的APP瞬间绚丽起来
友好的交互体验能够吸引眼球,android API 21(5.0)后系统内置了Activity之间的切换动画,不仅可以让用户看起来舒服,而且实现起来也特别简单. 一.通过overridePending ...
Android Activity跳转动画,让你的APP瞬间绚丽起来
我们都知道绚丽的APP总会给用户耳目一新的感觉,为了抓住用户更大网络公司使出浑身解数让自己的产品更绚丽,而绚丽最简单的效果就是Activity跳转效果,不仅可以让用户看起来舒服,而且实现起来也特别简单 ...
使用React Native进行气泡动画
by Narendra N Shetty 由纳伦德拉·N·谢蒂(Narendra N Shetty) 使用React Native进行气泡动画 (Bubble animation with React ...
React Native开发之动画(Animations)
博主这个系列的文章 React Native开发之IDE(Atom+Nuclide) React Native开发之FlexBox代码+图解 React Native的Navigator详解另外,我 ...
React Native 实现Lottie动画
Lottie是Airbnb开源的一个面向iOS.Android.React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动 ...
使用React Native编写的一款阅读类app ———《轻松一刻》
作者:阿钟博客:http://blog.csdn.net/a_zhon 一款纯React Native原生代码编写的app 源码地址:https://github.com/azhon/Time 效果 ...
2021年，Flutter 与 React Native该如何选择？，安卓app开发教程
一.Flutter 应用的优势 =========================================================================== 1. 热重载 = ...
React Native加载动画，lottie-web 将json解析成动画
1.安装依赖 npm install lottie-web --save 2.建立resources文件夹,内部导入AE动画的json文件且新建Lottie.js文件,封装Component组件 Lo ...
rn react native PanResponder手势动画实现窗口拖动滑动动画 Animated
个人笔记:(很多地方比较累赘,求指正) 需求:项目需要在RN窗口实现对其拖动和滑动动画,点击滑动: 思路:通过PanResponder监听手势操作.配合Animated实现不需要第三方包,比较简单 ...