如何用react-pose实现动画的刻度线？

Question

I would like to recreate the pose svg line animation of a tick/check mark located here , but as a react component with react-pose . I am unsure how to accomplish this? There aren't many full examples online using animated svg paths, and was hoping someone on stack overflow new enough about react-pose to help me recreate it.

I attempted to create a react component but was unable to get it working. Here is the react component I tried to make. Thanks for any and all help.

Here is the full animation I'd like to create

 const { tween, physics, easing } = window.popmotion; const iconProps = { loading: { opacity: 1, pathLength: 45, transition: ({ from, to }) => tween({ from, to, ease: easing.easeIn }) }, loadingWait: { rotate: true, // We're not animating to any specific value, but we want to fire a `transition` transition: ({ from }) => physics({ from, velocity: -400 }) }, loaded: { rotate: false, // Stop any existing animation on this property pathLength: 100 } }; const tickProps = { loaded: { opacity: 1, pathLength: 100 } }; function init() { // Get elements const iconDom = document.getElementById('tick-outline-path'); const tickDom = document.getElementById('tick-path'); // Create posers const icon = pose(iconDom, iconProps); icon.addChild(tickDom, tickProps); // Set animation state icon.set('loading').then(() => icon.set('loadingWait')); setTimeout(() => icon.set('loaded'), 2000); } (document.readyState !== 'loading') ? init() : document.addEventListener('DOMContentLoaded', init); 

 body { --pink: #FF1C68; --green: #14D790; --blue: #198FE3; --black: #21282D; color: #222; font-family: 'PT Sans', sans-serif; height: 100vh; padding: 0; margin: 0; display: flex; justify-content: center; flex-direction: column; } .pen { flex: 1 1 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0 auto; flex: 1 1 100%; width: 100%; max-width: 600px; padding: 0 20px; } .created-by { flex: 0 0 50px; background: #fff; color: #222; text-decoration: none; display: flex; justify-content: flex-end; align-items: center; padding-right: 30px; } .logo { margin-left: 10px; } .box { width: 100px; height: 100px; border-radius: 50%; background: var(--blue); } h1 { font-size: 32px; line-height: 28px; margin-bottom: 10px; } .pen a { color: var(--blue); text-decoration: none; margin-bottom: 70px; } 

 <script src="https://unpkg.com/popmotion-pose@%5E1/dist/popmotion-pose.js"></script> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <div class="pen"> <svg class="progress-icon" width="250" height="250" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <g class="tick-icon" stroke-width="2" stroke="#FF1C68" fill="none" transform="translate(1, 1.2)"> <path id="tick-outline-path" d="M14 28c7.732 0 14-6.268 14-14S21.732 0 14 0 0 6.268 0 14s6.268 14 14 14z" opacity="0" /> <path id="tick-path" d="M6.173 16.252l5.722 4.228 9.22-12.69" opacity="0"/> </g> </svg> </div> <a class="created-by" target="_blank" href="https://popmotion.io"> Pen created with <svg class="logo" width="125" height="25" viewBox="0 0 200 41"> <defs> <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="popmotion-gradient"> <stop stop-color="#FF1C68" offset="0%"/> <stop stop-color="#FF1C68" offset="100%"/> </linearGradient> </defs> <path fill="url(#popmotion-gradient)" d="M15.65.85c6.3 0 9.6 4.17 9.6 9.4 0 5.93-4.3 11.33-11.78 11.33H8.8l-1.04 10.2H.28L3.48.85h12.17zm-5.4 7.03l-.77 7.03h4.26c2.54 0 4.04-1.67 4.04-3.9 0-1.58-1-3.12-3.13-3.12h-4.4zM23.36 21.85c0-7 5.85-12.2 12.8-12.2 5.98 0 10.65 4.4 10.65 10.43 0 7.03-6.02 12.15-12.78 12.15-6.12 0-10.66-4.35-10.66-10.38zm16.28-1.27c0-2.4-1.58-4.4-4.03-4.4-2.85 0-5.03 2.4-5.03 5.2 0 2.33 1.55 4.32 4 4.32 2.9 0 5.07-2.4 5.07-5.12zM55.66 10.1l.1 2.3s1.86-2.75 6.12-2.75c4.94 0 8.8 4.17 8.8 10.25 0 7.03-5.36 12.33-11.02 12.33-3.9 0-5.5-2.35-5.5-2.35l-1.13 10.97h-7.2l3.2-30.75h6.63zm8 10.3c0-2.32-1.55-4.22-4.14-4.22-2.77 0-4.13 2.18-4.13 2.18l-.55 5.12s.9 2.18 3.67 2.18c2.95 0 5.13-2.45 5.13-5.26zM91.18 31.78h-7.2l1.35-12.8c0-.13.05-.4.05-.67 0-1.26-.64-1.98-1.95-1.98-1.68 0-3.54 1.67-3.54 1.67l-1.46 13.78h-7.2L73.5 10.1h6.8l.1 2.18s2.98-2.54 6.3-2.54c3.53 0 4.66 2.63 4.66 2.63s3.27-2.63 6.94-2.63c4.86 0 7.08 2.72 7.08 7.12 0 .54-.05 1.13-.1 1.68l-1.35 13.24H96.7l1.33-12.38c.05-.45.05-.64.05-.9 0-1.5-.77-2.18-1.95-2.18-1.77 0-3.5 1.72-3.5 1.72l-1.45 13.74M106.16 21.85c0-7 5.85-12.2 12.8-12.2 5.98 0 10.65 4.4 10.65 10.43 0 7.03-6.02 12.15-12.78 12.15-6.13 0-10.66-4.35-10.66-10.38zm16.28-1.27c0-2.4-1.6-4.4-4.03-4.4-2.85 0-5.03 2.4-5.03 5.2 0 2.33 1.54 4.32 4 4.32 2.9 0 5.07-2.4 5.07-5.12zM140.4 10.1l.5-4.76h-7.2l-.5 4.76h-3.13l-.68 6.53h3.12l-1.6 15.15h7.23l1.58-15.15h5.18l-1.57 15.15h7.26l2.25-21.68H140.4M146.46.9l-.64 6.16h7.5l.62-6.16h-7.48M153.05 21.85c0-7 5.85-12.2 12.8-12.2 5.97 0 10.65 4.4 10.65 10.43 0 7.03-6.04 12.15-12.8 12.15-6.12 0-10.65-4.35-10.65-10.38zm16.28-1.27c0-2.4-1.6-4.4-4.04-4.4-2.86 0-5.04 2.4-5.04 5.2 0 2.33 1.54 4.32 4 4.32 2.9 0 5.07-2.4 5.07-5.12zM198 31.78h-7.2l1.26-12.02c.05-.4.05-.63.05-.95 0-1.5-.76-2.62-2.62-2.62-2.4 0-4.36 1.95-4.36 1.95l-1.4 13.65h-7.2l2.25-21.68h6.9v2.3s2.9-2.7 6.44-2.7c3.95 0 7.3 2.53 7.3 7.75 0 .4-.04 1-.08 1.5L198 31.77" /> </svg> </a> 

Answer 1

The code for React Pose is almost exactly the same as the vanilla Pose example you posted.

The only difference is you'd be making posed versions of the path components:

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

And passing loading/loadingWait/loaded state to both of those as the pose prop when you come to render the components.