[英]How to transform an svg animation to work on scroll?
我创建了 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>
注册一个滚动事件监听器,将值 state 分配给您的组件,并将相应的值分配给您的 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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.