简介
react-native-expanding-circle-transition 是一个 React Native 动画库，可以用于实现圆形扩散转场动画。它基于 react-native-reanimated 和 react-native-svg 实现，提供了一系列 API 可以轻松创建和配置这种动画效果。
安装
npm install react-native-expanding-circle-transition
使用
快速上手
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----------- ----------------- ---- - ---- ---------------
------ - ------------------------- - ---- -------------------------------------------
----- --- - -- -- -
----- --------- ----------- - ----------------------
------ -
----- -------------------------
----------------- ----------- -- ------------------
-----------------
-------------------
-------------------------- ----------------- ------------- -- -------------------
----- ---------------------
----------- --------------
-------
----------------------------
-------
--
--
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------ -
---------------- -------
-------- ---
--
---
------ ------- ----Props
visible
类型：boolean，默认值：false
指示组件是否可见。
onDismiss
类型：() => void，默认值：undefined
当点击背景时销毁组件时调用的函数。
animated
类型：boolean，默认值：true
指示组件是否使用动画效果。
duration
类型：number，默认值：300
动画执行时间（毫秒）。
color
类型：string，默认值：'white'
设置圆圈颜色。
backgroundColor
类型：string，默认值：'black'
设置背景颜色。
start
类型：{ x: number, y: number }，默认值：undefined
设置圆圈动画起始位置。如果未设置，则取覆盖元素的中心点。
end
类型：{ x: number, y: number }，默认值：undefined
设置圆圈动画终点位置。如果未设置，则取中心点。
示例
控制动画
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----------- ----------------- ---- - ---- ---------------
------ - ------------------------- - ---- -------------------------------------------
----- --- - -- -- -
----- --------- ----------- - ----------------------
------ -
----- -------------------------
----------------- ----------- -- ----------------------
-------------- - ------ - --------------
-------------------
-------------------------- ----------------- ------------- -- -------------------
----- ---------------------
----------- --------------
-------
----------------------------
-------
--
--
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------ -
---------------- -------
-------- ---
--
---
------ ------- ----自定义颜色和背景颜色
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----------- ----------------- ---- - ---- ---------------
------ - ------------------------- - ---- -------------------------------------------
----- --- - -- -- -
----- --------- ----------- - ----------------------
------ -
----- -------------------------
----------------- ----------- -- ----------------------
-------------- - ------ - --------------
-------------------
--------------------------
-----------------
------------- -- ------------------
------------
-------------------------
----- ---------------------
----------- --------------
-------
----------------------------
-------
--
--
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------ -
---------------- -------
-------- ---
--
---
------ ------- ----起始和终点位置
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----------- ----------------- ---- - ---- ---------------
------ - ------------------------- - ---- -------------------------------------------
----- --- - -- -- -
----- --------- ----------- - ----------------------
----- ------- --------- - ---------------- -- ----- -- ---- ---
----- ----- ------- - ---------------- -- ----- -- ---- ---
----- -------- - -- ----------- -- -- -
----------
-- -------------------- - ------------------------ - --
-- -------------------- - ------------------------- - --
---
--
------ -
----- -------------------------
----------------- ----------- -- ----------------- --------------------
----- ----------------------
-----------------
-------
-------------------
--------------------------
-----------------
------------- -- ------------------
-------------
----------
----- -------------------- ------------ ----------- -- -- --------
-- -------------------- - ------------------------ - --
-- -------------------- - ------------------------- - --
----
----------- --------------
-------
----------------------------
-------
--
--
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------- -
---------------- -------
-------- ---
--
------ -
---------------- -------
-------- ---
----------- ---------
--------------- ---------
--
---
------ ------- ----总结
react-native-expanding-circle-transition 是一个功能强大的动画库，可以帮助 React Native 开发者快速实现圆形扩散转场动画效果。通过本文介绍的 API，可以轻松创建和配置这种动画效果，为用户带来更好的视觉体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672513660cf7123b3631c