带有React Spring的动画按钮
带有React Spring的动画按钮
提问于 2019-03-13 04:48:00
我来自于React-pose背景，并且喜欢尝试React-spring。我有一个非常简单的案例，我想把它转移到React-spring中使用。
我使用React-pose，https://codesandbox.io/s/4wxzm60nk9在Codesanbox中编写了这个案例
我试着自己转换它，但我只是把自己搞糊涂了。尤其是现在，当他们试图用钩子API来做这件事的时候。我能得到的所有帮助都是超级精准的。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-13 16:14:53
我昨天刚刚制作了一个动画按钮，所以我对它进行了重构以改变它的大小。
import React, {useState} from "react";
import { Spring, animated as a } from 'react-spring/renderprops';
const SpringButton = () => {
const [pressed, setPressed] = useState(false);
return (
<Spring native from={{scale: 1}} to={{scale: pressed? 0.8 : 1}}>
{({scale}) => (
<a.button
style={{
backgroundColor: 'red',
height: '100px',
width: '100px',
color: 'rgb(255, 255, 255)',
transform: scale.interpolate(scale => `scale(${scale})`)
}}
onMouseDown={() => setPressed(true)}
onClick={() => setPressed(false)}
onMouseLeave={() => setPressed(false)}
>
Click me
</a.button>
)}
</Spring>
);
}它还不是钩子接口，但我认为它可以帮助你理解它是如何工作的。它还使用了更快的本机渲染。事件处理与react-pose略有不同。如果你想让动画更有弹性，你也可以调整配置。
import {config} from 'react-spring/renderprops';
<Spring config={config.wobbly} ...>Stack Overflow用户
发布于 2019-03-13 19:19:33
可能是这样的：https://codesandbox.io/s/pyvo8mn5x0
function App() {
const [clicked, set] = useState(false)
const { scale } = useSpring({ scale: clicked ? 0.8 : 1 })
return (
<div className="App">
<animated.button
onMouseDown={() => set(true)}
onMouseUp={() => set(false)}
style={{
backgroundColor: 'red',
height: '100px',
width: '100px',
color: '#FFF',
transform: scale.interpolate(s => `scale(${s})`)
}}
children="Click me"
/>
</div>
)
}如果您愿意，您也可以预先插入：
const props = useSpring({ transform: `scale(${clicked ? 0.8 : 1})` })
return <animated.button style={props} />与pose react-spring不同的是，它不包括手势内容，它选择与第三方库进行接口。例如：https://github.com/react-spring/react-with-gesture
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55130413
复制相关文章
相似问题
腾讯云开发者
