Javascript 如何使用react姿势实现动画记号标记？

我想重新创建位于的勾号/复选标记的姿势svg线条动画，但作为带有

react pose

的react组件。我不知道如何做到这一点？在线使用动态svg路径的完整示例并不多，希望stack overflow上有人对

react pose

有足够的了解，帮助我重新创建它

我试图创建react组件，但无法使其工作。谢谢你的帮助

这是我想要创建的完整动画

const{tween，physics，easing}=window.popmotion；
常数iconProps={
装载：{
不透明度：1，
路径长度：45，
转换：（{from，to}）=>tween（{from，to，ease:easing.easeIn}）
},
加载等待：{
rotate:true，//我们没有设置任何特定值的动画，但我们希望触发一个`转换'`
跃迁：（{from}）=>物理（{from，速度：-400}）
},
加载：{
rotate:false，//停止此属性上的任何现有动画
路径长度：100
}
};
常量tickProps={
已加载：{不透明度：1，路径长度：100}
};
函数init（）{
//获取元素
const-iconDom=document.getElementById（'tick-outline-path'）；
const tickDom=document.getElementById（'tick-path'）；
//制造假象
常量图标=姿势（图标域，图标投影）；
icon.addChild（tickDom，tickProps）；
//设置动画状态
icon.set（'loading'）。然后（（）=>icon.set（'loadingWait'）；
setTimeout（（）=>icon.set（'loaded'），2000）；
}
（document.readyState！=“正在加载”）
? init（）
：document.addEventListener（'DOMContentLoaded'，init）
正文{
--粉红色：#FF1C68；
--绿色：#14D790；
--蓝色：198FE3；
--黑色：#21282D；
颜色：#222；
字体系列：“PT Sans”，无衬线；
高度：100vh；
填充：0；
保证金：0；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
}
.笔{
弹性：1100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
保证金：0自动；
弹性：1100%；
宽度：100%；
最大宽度：600px；
填充：0 20px；
}
.创建人{
flex:050px；
背景：#fff；
颜色：#222；
文字装饰：无；
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
右侧填充：30px；
}
.标志{
左边距：10px；
}
.盒子{
宽度：100px；
高度：100px；
边界半径：50%；
背景：var（--蓝色）；
}
h1{
字体大小：32px；
线高：28px；
边缘底部：10px；
}
.笔a{
颜色：var（--蓝色）；
文字装饰：无；
边缘底部：70像素；
}
React Pose的代码与您发布的vanilla Pose示例几乎完全相同

唯一的区别是您将制作
路径组件的姿势版本：

const Icon = posed.path(iconProps)
const Tick = posed.path(tickProps)

在渲染组件时，将加载/加载等待/加载状态作为
姿势
道具传递给这两个组件。
谢谢，这很有效！是某种程度上的成品。我试着从
反应姿势
中使用物理学，但它没有定义。
react pose
中是否还有其他功能（如物理）可以为我提供与上面相同的功能？更新：您需要像这样从popmotion中提取物理：
import{physics}from“popmotion”