runnercamp-react-native-smart-parabola 是一个允许您在 React Native 应用中创建抛物动画的 npm 包。下面我们将会详细介绍如何使用这个包。为了更好地帮助你理解，本文将分为两部分：
介绍
runnercamp-react-native-smart-parabola的原理使用这个包建立抛物动画的教程以及示例代码
包原理介绍
runnercamp-react-native-smart-parabola 模拟了抛物线的运动轨迹，以实现动画效果。简单地说，你可以将一个组件从一个起点飞向一个终点，由于组件运动的轨迹是抛物线，所以看起来就像掉进一个竖直柱子内。
这个 npm 包将组件从起点飞向终点的动画，拆分成了两段运动：
直线运动。组件从起点速度逐渐加快，直到到达上升转折点
抛物线运动。组件在抛物线上运动，到达最高点后开始下降。最终到达终点。
这样拆分的原因是直线运动和抛物线运动分别对应了前半段和后半段运动条件的计算规律。
整个运动的终点可以用（ x, y ）坐标表示，通过计算起点、终点、以及中间运动位置的坐标来实现这个抛物线轨迹。
使用教程
安装 runnercamp-react-native-smart-parabola :
npm install runnercamp-react-native-smart-parabola --save
然后就可以在 React Native 应用中引入它：
import Parabola from 'runnercamp-react-native-smart-parabola';
建立一个继承 Component 的组件
这个组件有四个步骤：
- 设置器：设置一些动画预设。
-- -------------------- ---- ------- -- -------- ------------ - ------ ------------ - ----- -- ------------- ---------- - ---- -------------- - ---- -- --------------------------------------- --------- - ---- ----------- - ---- --------------- - ---
- 记录组件位置。
-- -------------------- ---- -------
-- -----------
----------- - -
-- --
----
--------
--------
--
--------- - -
-- --
----
--------
--------
--- 编写 moveHandler 方法。移动动画在执行时调用的方法。
moveHandler = (value)=>{
const {x, y} = value;
this.setState({
left:x,
top:y
})
};- 最后，我们需要定义组件如何在页面中显示，并且在组件被渲染后更新组件的位置信息
startLayout和endLayout，以便runnercamp-react-native-smart-parabola定位组件的位置。
-- -------------------- ---- -------
-------- -
--- ----- - --- --------- - ----- - -----------
------ -
----- ---------------------
-----------
------------
----------------------------------------
-------------------
---
-----------------------------------
--------------- ---
-----------------------
---------------- - -------------------------
- ---- -
-------------- - -------------------------
-
--
-
---------------------
-------
-
-编写可交互的页面
内容组件样式的样例代码：
-- -------------------- ---- -------
----- -------------------------------------------------------------------------
---------
-------------------------------------
--
----- --------------------------
-------------
------------
-------------------------------------
--
-------
---------- --------------------------
-------------------- -- ----------------------
-----------------------
--
----- ----------------------------
-----------------
--------------
---------------------- -- ----------------------
--------------------------------
-----------------
----------------
-----------------
-----
----------------------------------
-
--
-
--
------------
-----------------------
----------------------------
------------- - -------------------------
-------------- - --------------------------
-- -
----- ----------------------------
----
-------
-------------------
-------
-------有几个重点：
Parabola是我们刚刚书写的可移动组件，必须放在内层。ParabolaIcon继承上面刚刚讲到的_Component。ParabolaIcon的尺寸大小最好与button的大小一致，这样才会达到最佳效果，移动的时候精度指向相关区域。这里使用了refs来关联button，以免出现飞错的情况。TouchableOpacity本身大小就是button的大小。
最后展示示例代码
ParabolaIcon 代码：
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ -
-----------
-----
---------
-------
------------
- ---- ---------------
------ -------- ---- -----------------------------------------
------ ------- ----- ------------- ------- --------- -
------------------------ - -- -- -
------------------------------
---------------
-----------------
-
-- -----------------
-- -----------------
--
-----
------------------------
----------------
----------------------
------
-
-
--
-
-------- - ------- ----- ----- --------- -- -
------------------------------------
------
-----
-----
-----
-------------
----------------
-----------
------
-
-
--
-
---------------------
------------------ - ---------------------
----------------------------- -- -- -----
-------------------- ----------------------------------------
---
-
---------
--- ----- - ------------------------------------
-----------------
------------------
---
--- ------- - ------------------------------------
-----------------
-----------------
---
------ -
-------------- ---------------------------------
-----------------------
----------------------
--------
-------------------
----
---------
------------------------------------
--
-----
-------------------------
----------------------
-----------------------
-------------------------------
--------------------------------
---
-----------------------------------
------------
-
---------------------
-------
----------------
-
-
-
----- ------ - -------------------
------------------
-------------
--------------
--------------------
------------------------
--------------------
-----------
--
----------
--------------------
--------
--
---StyleSheet.create() 代码：
-- -------------------- ---- -------
----- ------ - -------------------
---------- -
-------
--------------------------
-------------------
--
----------
-------------
--------------
----------------
-----------------------
------------------------
-------------------
--
------
--------------------
-------
-----
--
-----------
------------
----------
--------------
----------
---------------
----------------
-------------------
-------------------
--------------
----------------
-----------------------
------------
--
------------
------------
--
--------
----------
----------
-----------------------
----------------
------------------------
-------------------
--
------------
-------------
-----------
-
---使用这个 npm 包的好处是，你可以直接使用上述的代码来建立你自己的抛物动画。如果你想要实现特定功能，只需根据你的情况进行调整即可。希望这篇文章对你学习 npm 包 runnercamp-react-native-smart-parabola 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ad381e8991b448d86c3