Question

我想在响应中实现此 hover effect ，我没有足够的时间来学习gsap和threejs。

当我实现它时，什么也没发生。我该怎么办？

这是我的 menu.js 代码：

import {hoverEffect} from './animation'

class Menu extends Component {
      componentDidMount() {
          Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => {      
            const imgs = Array.from(el.querySelectorAll('img'));
            new hoverEffect({
                parent: el,
                intensity: el.dataset.intensity || undefined,
                speedIn: el.dataset.speedin || undefined,
                speedOut: el.dataset.speedout || undefined,
                easing: el.dataset.easing || undefined,
                hover: el.dataset.hover || undefined,
                image1: imgs[0].getAttribute('src'),
                image2: imgs[1].getAttribute('src'),
                displacementImage: el.dataset.displacement
            });
        });
      }
    render(){
        return(
            <div>
                <div className="grid__item grid__item--bg theme-3">
					<div className="grid__item-img" data-displacement="./images/displacement/4.png" data-intensity="0.2" data-speedin="1.6" data-speedout="1.6">
						<img src="./images/1.jpg" alt="Image"/>
						<img src="./images/2.jpg" alt="Image"/>
					</div>
				</div>
            </div>
        )
    }
}
export default Menu;

这是我的 animation.js ：

import * as THREE from 'three'
import { TweenMax, Expo } from 'gsap'

export var hoverEffect = function(opts) {
    {
      ...
      ...
      ...
     }
    var parent = opts.parent || console.warn("no parent");
    var dispImage = opts.displacementImage || console.warn("displacement image missing");
    var image1 = opts.image1 || console.warn("first image missing");
    var image2 = opts.image2 || console.warn("second image missing");
    var intensity = opts.intensity || 1;
    var speedIn = opts.speedIn || 1.6;
    var speedOut = opts.speedOut || 1.2;
    var userHover = (opts.hover === undefined) ? true : opts.hover;
    var easing = opts.easing || Expo.easeOut;

    {
    ...
    ...
    ...
     }

    var animate = function() {
        requestAnimationFrame(animate);

        renderer.render(scene, camera);
    };
    
    animate();
};

在项目结束时，我想添加多张照片并创建背景滑块。

Answer 1

我在这里回答了类似的问题：

GSAP with React.js。
在上面的链接中，我解释了如何使用React.createRef（）访问DOM元素并将其传递到GSAP时间轴。

然后...

要使动画时间轴仅在“悬停”时运行，请添加onMouseEnter和onMouseLeave事件处理程序：

return (
   <div 
     ref={(div)=>{this.DomElement = div}}
     onMouseEnter={(e)=>{this.state.hoverTimeline.play()}}
     onMouseLeave={(e)=>{this.state.hoverTimeline.pause()}}
    > 
      "Hover over me." 
    </div>
)

如何在反应时渲染gsap动画？

1 个答案: