「React Native」动画和手势

2020-05-22  本文已影响0人  七月流火_9405

1.demo地址:https://www.jianshu.com/p/4b67a019c047
直接从我的博客中,拷贝代码到工程中即可运行。

2.手势的使用,核心主要是PanResponder

3.动画的使用:Animated仅封装了四个可以动画化的组件:View、Text、Image和ScrollView,不过你也可以使用Animated.createAnimatedComponent()来封装你自己的组件。
Animated 提供了三种动画类型。每种动画类型都提供了特定的函数曲线,用于控制动画值从初始值变化到最终值的变化过程:
Animated.timing():线性变化,使用 easing 函数让数值随时间动起来。
Animated.decay():衰变效果,以一个初始的速度和一个衰减系数逐渐减慢变为0。
Animated.spring():弹簧效果,提供了一个简单的弹簧物理模型。

4.手势、动画一般配合使用的场景和组件
组件:flatlist、sectionList、Scrollview、view、image、text
场景:吸顶效果、上拉跳转新页面、随着手指移动的小球等等

上一篇下一篇

猜你喜欢

热点阅读