如何解决不同属性的 Framer Motion 不同动画
我正在尝试使用 Chakra-ui 和 Gatsby 以成帧器运动为动画制作动画,其中有旋转、移动和不透明度变化。
目前动画按照我的意图在 x 轴上移动并使用 type:spring
进行旋转,但是“反弹效果”也会影响不透明度。
我已尝试为 opacity 属性明确定义 type:tween
,但这对仍然“弹跳”的对象的不透明度没有影响。这是我的代码:
const Rocketship = ({ top,right,bottom,left,opacity }) => {
const RocketAnim = motion(Box)
const transition = {
default: {
type: 'spring',damping: 5,},opacity: { type: 'tween' },}
return (
<RocketAnim
layoutId="rocketship"
initial={{ rotate: 25,x: -100,opacity: 0 }}
animate={{ rotate: 45,x: 0,opacity }}
whileHover={{ width: '170px',cursor: 'pointer' }}
transition={transition}
pos="fixed"
width={150}
top={top}
right={right}
bottom={bottom}
left={left}
...
如果有任何建议,我将不胜感激
解决方法
没有完整的答案,因为没有足够的上下文,但是
- 您的
RocketAnim
应该在组件之外定义,因为您不需要在渲染时重新创建它 - 您不必将其设为补间,我会将其保留为弹簧(默认值)并将反弹设置为 0
opacity: { bounce: 0}
- 如果您将其保留为补间,我会尝试添加持续时间以解决弹跳问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。