翻译过程中发现有更好的，翻译终止，推荐参考React Native 中文网
Animations
动画
Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
动画对于创建优秀的用户体验非常重要。静止物体在开始移动时必须克服惯性。运动中的物体有动量, 很少立即停止。动画允许您在用户界面中表达物理上可信的动作。
React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.
React Native提供了两个互补的动画系统：Animated针对特定值的细微和交互式控制，LayoutAnimation针对整体布局处理。
Animated API
The Animated API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way.
Animatedfocuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simplestart/stopmethods to control time-based animation execution.
Animated API 的设计，使它非常容易简明地表达各种有趣的动画和互动模式，以一个非常高性能的方式。Animated侧重于表示输入和输出之间的关系，和介于两者之间的可配置转换， 通过简单的启动/停止方法来控制基于时间的动画执行。
Animatedexports four animatable component types:View,Text,Image, andScrollView, but you can also create your own usingAnimated.createAnimatedComponent().
Animated导出了四种具有动画特性的组件类型：View， Text， Image 和 ScrollView， 但是你还可以通过 Animated.createAnimatedComponent()创建自定义动画组件。
example:
例子：
import React from 'react';
import { Animated, Text, View } from 'react-native';
class FadeInView extends React.Component {
state = {
fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
}
componentDidMount() {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1, // Animate to opacity: 1 (opaque)
duration: 10000, // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { fadeAnim } = this.state;
return (
<Animated.View // Special animatable View
style={{
...this.props.style,
opacity: fadeAnim, // Bind opacity to animated value
}}
>
{this.props.children}
</Animated.View>
);
}
}
// You can then use your `FadeInView` in place of a `View` in your components:
export default class App extends React.Component {
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
</FadeInView>
</View>
)
}
}
Let's break down what's happening here. In the
FadeInViewconstructor, a newAnimated.ValuecalledfadeAnimis initialized as part ofstate. The opacity property on theViewis mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
让我们来分析一下这里发生了什么。在 FadeInView 构造函数中, 初始化了一个类型为Animated.Value的状态变量fadeAnim。View的不透明度属性映射到此动画值。后台会不断的计算更新此数字值并用于设置不透明度。
When the component mounts, the opacity is set to 0. Then, an easing animation is started on the
fadeAnimanimated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.
当组件装载时, 不透明度设置为0。然后, 在 fadeAnim 动画值上启动一个缓动动画，它将更新每帧上所有相关的映射 (在本例中是不透明度)， 直到最终值1。
This is done in an optimized way that is faster than calling
setStateand re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
这是以优化的方式完成的， 速度比调用 setState 且重新渲染快。因为整个配置是声明好的， 我们将能够通过对配置进行序列化和在高优先级线程上运行动画，进行相关的优化。
Configuring animations
配置动画
Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
动画配置非常灵活。根据动画的类型, 自定义和预定义的缓动函数、延迟、持续时间、衰减因子、弹性系数等都可以进行调整。
Animatedprovides several animation types, the most commonly used one beingAnimated.timing(). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
Animated提供了几种动画类型, 最常用的是Animated.timing()。它支持使用各种预定义的缓动函数在一段时间内对值进行动画处理，也可以使用您自定义的。缓动函数通常用于在动画中用以表达对象的渐进加速和减速。
By default,
timingwill use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing aeasingparameter. Customdurationor even adelaybefore the animation starts is also supported.
默认情况下， timing将使用 easeInOut 曲线，其表示开始逐渐加速至全速，后通过逐渐减速直到停止为止。通过设置不同的easing参数, 可以指定不同的缓动函数。还支持自定义持续时间duration或动画延迟启动时间delay。
For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
例如, 如果我们要创建一个2秒长动画，物体在移动到其最终位置之前略有后退：
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
duration: 2000,
}).start();
Take a look at the Configuring animations section of the
AnimatedAPI reference to learn more about all the config parameters supported by the built-in animations.
查看Animated API 参考的 Configuring animations 部分, 了解有关内置动画所支持的全部配置参数的更多详细信息。
Composing animations
组合动画
Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The Animated API provides several methods, such as sequence() and delay(), each of which simply take an array of animations to execute and automatically calls start()/stop() as needed.
Combining animated values
合成动画值
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value.
你可以通过加、乘、除或取模等把两个动画值合成一个新的动画值。
翻译过程中发现有更好的，翻译终止，推荐参考React Native 中文网
