简介
react-native-animatable 是一个 React Native 动画库，可以方便地为组件添加各种动画效果，支持使用链式语法串联多个动画效果。本文将为大家详细介绍 react-native-animatable 的使用方法，并提供示例代码。
安装
使用 npm 安装 react-native-animatable，命令如下：
npm install react-native-animatable --save
示例
以下将演示基本的使用方法，后面会讲到更多高级用法。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ - -- ---------- ---- --------------------------
------ ------- -------- ----- -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
---------------- ------------------ ------------------ ----------------------
------ -----------
------------------
-------
--
-上面的代码中，我们创建了一个 Text 组件，并使用了 fadeIn 动画效果，每次动画执行次数为 5 次，并且每次动画执行方向为相反方向。
基本动画
fadeIn
淡入效果，即组件从透明到不透明。
<Animatable.Text animation="fadeIn">Hello, Animatable!</Animatable.Text>
fadeOut
淡出效果，即组件从不透明到透明。
<Animatable.Text animation="fadeOut">Hello, Animatable!</Animatable.Text>
zoomIn
缩放效果，即组件从小到大变化。
<Animatable.Text animation="zoomIn">Hello, Animatable!</Animatable.Text>
zoomOut
缩小效果，即组件从大到小变化。
<Animatable.Text animation="zoomOut">Hello, Animatable!</Animatable.Text>
slideInDown
向下划入效果，即组件从上方进入屏幕。
<Animatable.Text animation="slideInDown">Hello, Animatable!</Animatable.Text>
slideInUp
向上划入效果，即组件从下方进入屏幕。
<Animatable.Text animation="slideInUp">Hello, Animatable!</Animatable.Text>
slideInLeft
向左划入效果，即组件从右方进入屏幕。
<Animatable.Text animation="slideInLeft">Hello, Animatable!</Animatable.Text>
slideInRight
向右划入效果，即组件从左方进入屏幕。
<Animatable.Text animation="slideInRight">Hello, Animatable!</Animatable.Text>
高级动画
链式语法
支持链式语法串联多个动画效果，如下：
<Animatable.Text animation="fadeInDown" duration={500} delay={1000} easing="ease-out">
Hello, Animatable!
</Animatable.Text>上面的代码中，我们将 fadeIn 和 slideInDown 两个动画效果串联起来，使得组件先淡入后向下划入。同时我们还设置了动画执行时间为 500ms，动画执行延迟时间为 1000ms，动画缓动函数为 ease-out。
循环动画
支持对动画效果进行循环操作，如下：
<Animatable.Text animation="pulse" iterationCount="infinite"> Hello, Animatable! </Animatable.Text>
上面的代码中，我们将 pulse 动画效果设置为无限循环执行。
缩放
支持自定义缩放比例，如下：
<Animatable.Text animation="zoomIn" useNativeDriver={true} scale={1.2}>
Hello, Animatable!
</Animatable.Text>上面的代码中，我们设置了组件的初始缩放比例为 1.2，然后使用 zoomIn 动画效果使得组件继续放大。需要注意的是，如果需要在动画中使用 scale 属性，则需要将 useNativeDriver 设为 true。
颜色变化
支持组件颜色的变化，如下：
-- -------------------- ---- -------
----------------
----------------
---------------
-------- ---------------- ------ -------- -- --
-
---------------- ----------------- ------------------------- -------- ------ ------- ---
------ -----------
------------------
------------------上面的代码中，我们使用了 tada 和 pulse 两个动画效果，使得 View 组件在初始时颜色为红色，然后文字组件在执行 pulse 动画时颜色为白色。同时我们设置了 View 组件的动画执行时间为 1000ms。
总结
通过本文的介绍，相信大家已经了解了 react-native-animatable 的基本用法和高级用法，可以方便快捷地为组件添加各种动画效果。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f112a76403f2923b035c255