非常教程

React native参考手册

APIs

Animated

Animated库旨在使动画变得流畅,强大且易于构建和维护。Animated侧重于输入和输出之间的声明性关系,以及两者之间的可配置变换,以及简单start/ stop方法来控制基于时间的动画执行。

创建动画最简单的工作流程是创建一个Animated.Value,将其与动画组件的一个或多个样式属性挂钩,然后使用Animated.timing()以下动画通过动画驱动更新:

Animated.timing(                            // Animate value over time
  this.state.fadeAnim,                      // The value to drive
  {
    toValue: 1,                             // Animate to final value of 1
  }
).start();                                  // Start the animation

请参阅动画指南以查看更多实际操作示例Animated

概观

您可以使用两种值类型Animated

  • Animated.Value() 为单个值
  • Animated.ValueXY() 为载体

Animated.Value可以绑定到样式属性或其他道具,也可以插入。一个人Animated.Value可以驱动任何数量的属性。

配置动画

Animated提供三种类型的动画类型。每种动画类型都提供了一个特定的动画曲线,用于控制您的值从初始值到最终值的动画效果:

  • Animated.decay() 以初始速度开始并逐渐减速至停止。
  • Animated.spring() 提供一个简单的弹簧物理模型。
  • Animated.timing() 使用缓动功能随时间推移动画值。

在大多数情况下,你会使用timing()。默认情况下,它使用对称的easeInOut曲线,将对象逐渐加速到全速,并通过逐渐减速停止结束。

使用动画

通过调用动画开始start()动画。start()需要一个完成回调,这将在动画完成时调用。如果动画正常运行,则完成回调将被调用{finished: true}。如果动画完成是因为在动画完成stop()之前被调用(例如,因为它被手势或其他动画中断),那么它将接收{finished: false}

使用本机驱动程序

通过使用本地驱动程序,我们会在开始动画之前将所有关于动画的内容发送到本地,从而允许本地代码在UI线程上执行动画,而无需通过每一帧的桥接。一旦动画开始,JS线程就可以被阻塞而不会影响动画。

您可以通过useNativeDriver: true在动画配置中指定来使用本地驱动程序。查看动画指南了解更多信息。

动画组件

只有可生成动画的组件才能生成动画。这些特殊组件具有将动画值绑定到属性的神奇功能,并执行有针对性的本地更新,以避免每个帧上的反应呈现和对帐过程的成本。他们还处理卸载时的清理,因此默认情况下它们是安全的。

  • createAnimatedComponent()可以用来使组件具有可动性。Animated使用上面的包装器导出以下可动画组件:
  • Animated.Image
  • Animated.ScrollView
  • Animated.Text
  • Animated.View

组成动画

动画还可以使用组合函数以复杂的方式进行组合:

  • Animated.delay() 在给定的延迟后开始动画。
  • Animated.parallel() 同时开始一些动画。
  • Animated.sequence() 按顺序启动动画,等待每个完成之后再开始下一个动画。
  • Animated.stagger() 按顺序开始动画并行,但连续延迟。

通过简单地将toValue一个动画设置为另一个,动画也可以链接在一起Animated.Value。请参阅动画指南中的跟踪动态值。

默认情况下,如果一个动画停止或中断,则组中的所有其他动画也会停止。

结合动画值

您可以通过添加,乘法,除法或模数结合两个动画值来创建新的动画值:

  • Animated.add()
  • Animated.divide()
  • Animated.modulo()
  • Animated.multiply()

插值

interpolate()功能允许输入范围映射到不同的输出范围。默认情况下,它将推断超出给定范围的曲线,但也可以使曲线限制输出值。它默认使用线性插值,但也支持缓动功能。

  • interpolate()在动画指南中了解更多关于插值的知识。处理手势和其他事件测量,如平移或滚动,其他事件可以直接使用动画值映射Animated.event()。这是通过结构化地图语法完成的,以便可以从复杂的事件对象中提取值。第一个级别是允许跨多个参数映射的数组,并且该数组包含嵌套对象。
  • Animated.event()

例如,使用水平滚动手势时,您需要执行以下操作以映射event.nativeEvent.contentOffset.xscrollX(an Animated.Value):

 onScroll={Animated.event(
   // scrollX = e.nativeEvent.contentOffset.x
   [{ nativeEvent: {
        contentOffset: {
          x: scrollX
        }
      }
    }]
 )}

方法

static decay(value, config)

根据衰减系数将初始速度的值设置为零。

配置是一个对象,可能有以下选项:

  • velocity: 初始速度。需要。
  • deceleration:衰减率。默认0.997。
  • useNativeDriver:当使用本地驱动程序时。默认为false。

static timing(value, config)

沿着定时缓动曲线动画一个值。该Easing模块有大量预定义的曲线,或者您可以使用自己的功能。

配置是一个对象,可能有以下选项:

  • duration:动画的长度(毫秒)。默认500。
  • easing:放松功能来定义曲线。默认是Easing.inOut(Easing.ease)
  • delay:延迟后开始动画(毫秒)。默认0。
  • useNativeDriver:当使用本地驱动程序时。默认为false。

static spring(value, config)

基于反弹和折纸的春季动画。跟踪速度状态以创建流体运动作为toValue更新,并可以链接在一起。

Config是一个可能有以下选项的对象。请注意,您只能定义弹性/速度或张力/摩擦,但不能同时定义:

  • friction:控制“反弹”/过冲。默认7。
  • tension:控制速度。默认40。
  • speed:控制动画的速度。默认12。
  • bounciness:控制弹性。默认8。
  • useNativeDriver:当使用本地驱动程序时。默认为false。

static add(a, b)

创建由两个添加在一起的动画值组成的新动画值。

static divide(a, b)

通过将第一个Animated值除以第二个Animated值创建一个新的Animated值。

static multiply(a, b)

创建一个由两个乘以一起的Animated值组成的新的Animated值。

static modulo(a, modulus)

创建一个新的Animated值,该值是所提供的Animated值的(非负值)模

static diffClamp(a, min, max)

创建一个限制在2个值之间的新动画值。它使用最后一个值之间的差异,即使该值远离边界,当值再次接近时它将开始改变。(value = clamp(value + diff, min, max))。

这对于滚动事件很有用,例如,在滚动时显示导航栏并在滚动时隐藏它。

static delay(time)

在给定的延迟后开始动画。

static sequence(animations)

按顺序启动一系列动画,等待每个动画完成后再开始下一个动画。如果当前正在运行的动画已停止,则不会启动以下动画。

static parallel(animations, config?)

同时启动一组动画。默认情况下,如果其中一个动画停止,它们将全部停止。你可以用stopTogether标志覆盖它。

static stagger(time, animations)

动画数组可以并行运行(重叠),但会以连续的延迟顺序启动。很适合做尾随效果。

static loop(animation)

连续循环播放给定的动画,以便每次播放结束时都会重新开始并重新开始播放。可以指定在配置中使用密钥“迭代”循环的次数。如果子动画设置为'useNativeDriver',将循环而不会阻塞UI线程。

static event(argMapping, config?)

采集一系列映射并相应地从每个arg提取值,然后调用setValue映射的输出。例如

 onScroll={Animated.event(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
   {listener},          // Optional async listener
 )}
 ...
 onPanResponderMove: Animated.event([
   null,                // raw event arg ignored
   {dx: this._panX},    // gestureState arg
 ]),

配置是一个对象,可能有以下选项:

  • listener:可选的异步侦听器。
  • useNativeDriver:当使用本地驱动程序时。默认为false。

static forkEvent(event, listener)

先进的命令式API用于侦听通过道具传入的动画事件。尽可能直接使用值。

static unforkEvent(event, listener)

属性

Value: CallExpression

驾驶动画的标准值等级。通常使用初始化new Animated.Value(0);

ValueXY: CallExpression

用于驾驶2D动画的2D值类,例如平移手势。

Interpolation: CallExpression

导出为在流中使用插值类型

Node: CallExpression

为便于类型检查而导出。所有的动画值都来自这个类。

createAnimatedComponent: CallExpression

使任何React组件成为动画。用于创建Animated.View等。

attachNativeEvent: Identifier

命令式API将动画值附加到视图上的事件。喜欢使用Animated.eventuseNativeDrive: true如果可能的话。

React native

React Native 是一个 JavaScript 的框架,用来撰写实时的、可原生呈现 iOS 和 Android 的应用。

主页 https://facebook.github.io/react-native/
源码 https://github.com/facebook/react-native
发布版本 0.49

React native目录

1.开始 | Getting Started
2.指南 | Guides
3.APIs
4.组件:ActivityIndicator | Components: ActivityIndicator
5.组件:按钮 | Components: Button
6.组件:CheckBox | Components: CheckBox
7.组件:DatePickerIOS | Components: DatePickerIOS
8.组件:DrawerLayoutAndroid | Components: DrawerLayoutAndroid
9.组件:FlatList | Components: FlatList
10.组件:图像 | Components: Image
11.组件:KeyboardAvoidingView | Components: KeyboardAvoidingView
12.Components: ListView
13.Components: MaskedViewIOS
14.Components: Modal
15.Components: NavigatorIOS
16.Components: Picker
17.Components: PickerIOS
18.Components: ProgressBarAndroid
19.Components: ProgressViewIOS
20.Components: RefreshControl
21.Components: ScrollView
22.Components: SectionList
23.Components: SegmentedControlIOS
24.Components: Slider
25.Components: SnapshotViewIOS
26.Components: StatusBar
27.Components: Switch
28.Components: TabBarIOS
29.Components: TabBarIOS.Item
30.Components: Text
31.Components: TextInput
32.Components: ToolbarAndroid
33.Components: TouchableHighlight
34.Components: TouchableNativeFeedback
35.Components: TouchableOpacity
36.Components: TouchableWithoutFeedback
37.Components: View
38.Components: ViewPagerAndroid
39.Components: VirtualizedList
40.Components: WebView
41.创建 | Contributing
42.指南(Android) | Guides (Android)
43.指南(IOS) | Guides (iOS)
44.其他 | Miscellaneous