Как сделать анимацию gsap на реагировать? - PullRequest
Новая
       15

Как сделать анимацию gsap на реагировать?

0 голосов
/ 10 октября 2018

Я хочу реализовать этот эффект наведения в реакции, и у меня нет достаточно времени, чтобы выучить 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();
};

В конце моего проекта я хочу добавить несколько фотографий и создать фоновый слайдер.

1 Ответ

0 голосов
/ 17 августа 2019

Я ответил на аналогичный вопрос здесь:

GSAP с 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>
)
...