前言
React Native 是当前经常使用的跨平台移动应用开发框架，同时配套的也有许多实用的 npm 包，其中 bloodyowl-react-art 是一个基于 React Native 的矢量图形动画库，可以方便地创建漂亮的动画效果，本文主要介绍如何使用这个包。
安装
在使用 bloodyowl-react-art 之前，需要先安装依赖的 react 和 react-art 两个库，安装方法如下：
npm install react npm install react-art npm install bloodyowl-react-art
使用
创建 BloodyOwl 应用
首先需要创建一个 BloodyOwl 应用，在 React Native 项目中创建一个新的文件，引入 BloodyOwl：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------
------ --------- ---- ----------------------
----- --- ------- --------------- -
-------- -
------ -
-------- ----------- -------------
---------- --
----------
--
-
-
------ ------- ----基本动画
BloodyOwl 支持很多基本的动画，比如淡入淡出、缩放、旋转等，下面是一个简单的动画示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------
------ --------- ---- ----------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -----
----- ---
--
-
------------- -
---------------
---------- ----------------------
---
-
-------- -
----- - ---------- ---- - - -----------
------ -
-------- ----------- -------------
----------
------------------
-----------
-------------------------
-------------------
----------- -- -------------------
--
----------
--
-
-
------ ------- ----自定义参数
除了基本的动画效果，BloodyOwl 还支持许多自定义参数来优化动画效果，以下是一个使用自定义参数的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------
------ --------- ---- ----------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -----
----- ---
--
-
------------- -
---------------
---------- ----------------------
---
-
-------- -
----- - ---------- ---- - - -----------
------ -
-------- ----------- -------------
----------
-------------
-----------
----------------------
------------------
--------------
-------------------
----------- -- -------------------
--
----------
--
-
-
------ ------- ----在上述示例中，我们可以通过指定 strokeColor 和 borderSize 来设置边框颜色和边框粗细。
总结
BloodyOwl 是一个非常好用的动画库，支持基本的动画效果以及许多自定义的参数，通过使用这个库，可以轻松创建出非常具有视觉冲击力的动画效果。我建议，在你的 React Native 项目中使用 BloodyOwl 来帮助你快速构建出漂亮的动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ebe81e8991b448dc7a9