如何实现反作用弹簧的设计

Question

在项目的repo中，react redux应用程序在JS文件中使用CSS设置。现在我应该用鼠标悬停来制作图片的动画，就像这个网站一样：https://www.madwell.com/

该组件最初是一个功能组件，我将其更改为基于类的组件，如下所示：

```

class BannerContainer extends React.Component{
constructor(props){
super(props);
this.state = {
x: 0,
y: 0
};
this.handleMouseMove = this.handleMouseMove.bind(this);
}
componentDidMount(){
window.addEventListener("mousemove", this.handleMouseMove);
}
componentWillUnmount(){
window.removeEventListener('mousemove', this.handleMouseMove);
}
handleMouseMove({ x, y }){
this.setState({
x : x / window.innerWidth,
y : y / window.innerHeight
})
}
render(){
const { banner = {} } = this.props;
const {
title = '&nbsp;<br>&nbsp;',
text = '&nbsp;<br>&nbsp;',
image__google_350x80 = '',
image__app_350x80 = '',
image__bg1_1166x1878 = '',
image__bg2_961x1782 = '',
image__curve_730x151 = ''
} = banner;
return (
<Container>
<BGPatch>
{console.log(this.state.x , this.state.y)}
<img src={'/images/bg_purple.jpg'} alt="" />
</BGPatch>

```

在这个例子中，我能够监听CCD_ 1事件并获得x&y坐标。但现在我必须使用react-spring库来实现它，那么我该怎么做呢？此外，CSS应该为每个组件写在单独的JS文件中，就像在react-spring示例中一样，它们也直接修改Spring组件中的opacity或trasform，这是我不想要的

他们的文档中给出的弹簧组件示例

<Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
{props => <div style={props}>hello</div>}
</Spring>

Answer 1

如果您有鼠标坐标，视差效果相对容易实现，下面是一个具有类似效果的示例：https://twitter.com/0xca0a/status/1058505720574959616

它使用钩子，但同样的东西也适用于普通弹簧。尽管这可能是一个很好的例子，因为它不会在mousemove上重新渲染组件，这是非常快的。我想，在你的情况下，你不会使用旋转，但关键是，你会收到x/y，并使用它将图像插值到位置。

编辑：我已经分叉了这个例子，这个版本使用翻译：https://codesandbox.io/embed/r5x34869vq