如何转换 svg 动画以在滚动上工作？

Question

我创建了 4 个动画，其中 2 个是跟随路径移动的正方形。 2 是未绘制的线条。

我想知道是否可以将这些动画转换为滚动而不是像下面这样的持续时间？

我试图找到，但我不认为这 4 个动画可以滚动。

评论中的任何想法都会有所帮助。

// Example class component
class Svg extends React.Component {
  render() {
    return (
<div>
    <svg viewBox="0 0 1200 700" width="100%" height="700" xmlSpace="preserve">
        <defs>
            <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="shadow-filter">
                <feOffset dx="0" dy="20" in="SourceAlpha" result="shadowOffsetOuter1" />
                <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
                <feColorMatrix values="0.1 0 0 0 0   0 0.2 0 0 0   0 0 0.1 0 0   0 0 0 0.1 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" />
                <feMerge>
                    <feMergeNode in="shadowMatrixOuter1" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>
        </defs>
        <g>
            <path
                d="M544.9,635c-1.2-172.5-2.3-345-3.5-517.5c-0.3-7.8-2.6-21.2-14.1-32.6c-11.7-11.5-28.5-20-57.5-20
                                    c-18.9,0-78.4,0-97.3,0c-64.3,0-138,0-202.4,0h-4.1"
                id="Clasque_3"
                stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0"
            > <animate
                    attributeName="stroke-dashoffset"
                    values="0;920.2;"
                    dur="4s"
                    fill="freeze"
                    begin="1s"
                />
            </path>
            <rect x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" >
                <animateMotion
                    dur="4s"
                    fill="freeze"
                    keyPoints="1;0"
                    keyTimes="0;1"
                    calcMode="linear"
                    begin="1s">
                    <mpath xlinkHref="#Clasque_3"></mpath>
                </animateMotion>
            </rect>
        </g>
        <g>
            <path
                d="M655.4,635c1.2-172.5,2.3-345,3.5-517.5c0.3-7.8,2.6-21.2,14.1-32.6c11.7-11.5,28.5-20,57.5-20
                                    c18.9,0,78.4,0,97.3,0c64.3,0,138,0,202.4,0h4.1"
                id="Clasque_6"
                stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0"
            > <animate
                    attributeName="stroke-dashoffset"
                    values="0;920.2;"
                    dur="4s"
                    fill="freeze"
                    begin="1s"
                />
            </path>
            <rect x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" >
                <animateMotion
                    dur="4s"
                    fill="freeze"
                    keyPoints="1;0"
                    keyTimes="0;1"
                    calcMode="linear"
                    begin="1s">
                    <mpath xlinkHref="#Clasque_6"></mpath>
                </animateMotion>
            </rect>
        </g>
    </svg>
</div>
    );
  }
}

ReactDOM.render(
  <Svg />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

注册一个滚动事件监听器，为你的组件分配一个值状态，并为你的svg分配相应的值

class Svg extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      end: 1
    }
    this.scroll = this.scroll.bind(this)

    window.addEventListener('scroll', this.scroll, true);
  }

  scroll(event) {
    this.setState({
      end: window.scrollY > 100? 0 : (1 - window.scrollY / 100)
    });
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.scroll, true);
  }


  render() {
    return (
<div style={{height: '200vh'}}>
    <svg viewBox="0 0 1200 700" width="100%" height="700" xmlSpace="preserve">
        <defs>
            <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="shadow-filter">
                <feOffset dx="0" dy="20" in="SourceAlpha" result="shadowOffsetOuter1" />
                <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
                <feColorMatrix values="0.1 0 0 0 0   0 0.2 0 0 0   0 0 0.1 0 0   0 0 0 0.1 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" />
                <feMerge>
                    <feMergeNode in="shadowMatrixOuter1" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>
        </defs>
        <g>
            <path
                d="M544.9,635c-1.2-172.5-2.3-345-3.5-517.5c-0.3-7.8-2.6-21.2-14.1-32.6c-11.7-11.5-28.5-20-57.5-20
                                    c-18.9,0-78.4,0-97.3,0c-64.3,0-138,0-202.4,0h-4.1"
                id="Clasque_3"
                stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0"
            > <animate
                  attributeName="stroke-dashoffset"
                  values={`${(1 - this.state.end)  * 920};${(1 - this.state.end) * 920} ;`}
                  dur="4s"
                  repeatCount="indefinite"
                />
            </path>
            <rect className="rect1" x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" >
                <animateMotion
                    dur="1s"
                    keyPoints={`${this.state.end};${this.state.end}`}
                    keyTimes="0;1"
                    calcMode="linear"
                    repeatCount="indefinite"
                    >
                    <mpath xlinkHref="#Clasque_3"></mpath>
                </animateMotion>
            </rect>
        </g>
        <g>
            <path
                d="M655.4,635c1.2-172.5,2.3-345,3.5-517.5c0.3-7.8,2.6-21.2,14.1-32.6c11.7-11.5,28.5-20,57.5-20
                                    c18.9,0,78.4,0,97.3,0c64.3,0,138,0,202.4,0h4.1"
                id="Clasque_6"
                stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0"
            ><animate
                    attributeName="stroke-dashoffset"
                    values={`${(1 - this.state.end)  * 920};${(1 - this.state.end) * 920} ;`}
                    dur="4s"
                    repeatCount="indefinite"
                />
            </path>
            <rect x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" >
                <animateMotion
                    dur="1s"
                    keyPoints={`${this.state.end};${this.state.end}`}
                    keyTimes="0;1"
                    calcMode="linear"
                    repeatCount="indefinite"
                    >
                    <mpath xlinkHref="#Clasque_6"></mpath>
                </animateMotion>
            </rect>
        </g>
    </svg>
</div>
    );
  }
}