Skip to main content
se añadieron 190 caracteres en el cuerpo
Origen Enlace

Estoy actualmente en un componente TS haciendo validaciones, sin embargo tengo un evento en un archivo javascript que llamé de la siguiente manera:

ngOnInit(): void {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = 'assets/js/ruleta.js';
    head.appendChild(script);
  }

Este es mi script ruleta.js

 var indicator = new TimelineMax();
    var spinWheel = new TimelineMax();
    indicator.to(active, .13, { rotation: -10, transformOrigin: "65% 36%", ease: Power1.easeOut })
        .to(active, .13, { rotation: 3, ease: Power4.easeOut })
        .add("end");

    //  Luckywheel animation
    spinWheel.to(wheel, 5, {
        rotation: deg, transformOrigin: "50% 50%", ease: Power4.easeOut, onUpdate: (
            function () {
                //_gsTransform: current position of the wheel
                tolerance = currentRotation - lastRotation;

                if (Math.round(currentRotation) % (360 / 12) <= tolerance) {
                    if (indicator.progress() > .2 || indicator.progress() === 0) {
                        indicator.play(0);
                    }
                }

            }
        )
    });
    spinWheel.add("end");

Básicamente estoy tratando de llamar a una animación que hace girar una ruleta de la fortuna, el caso es que me gustaria desde Typescript llamar a la función de Javascript, para que la animación se ejecute

girarRueda(){
  activarRuleta(360);
}

Algo similar. ¿Hay alguna forma de llamar dicha función desde TS?

ADD:

Intenté esto

 girarRueda2(){
   this.script.activarRuleta();
}

Debido a que previamente declaré un script.src en el ngOnInit, pero sigue sin dar resultados

Estoy actualmente en un componente TS haciendo validaciones, sin embargo tengo un evento en un archivo javascript que llamé de la siguiente manera:

ngOnInit(): void {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = 'assets/js/ruleta.js';
    head.appendChild(script);
  }

Este es mi script ruleta.js

 var indicator = new TimelineMax();
    var spinWheel = new TimelineMax();
    indicator.to(active, .13, { rotation: -10, transformOrigin: "65% 36%", ease: Power1.easeOut })
        .to(active, .13, { rotation: 3, ease: Power4.easeOut })
        .add("end");

    //  Luckywheel animation
    spinWheel.to(wheel, 5, {
        rotation: deg, transformOrigin: "50% 50%", ease: Power4.easeOut, onUpdate: (
            function () {
                //_gsTransform: current position of the wheel
                tolerance = currentRotation - lastRotation;

                if (Math.round(currentRotation) % (360 / 12) <= tolerance) {
                    if (indicator.progress() > .2 || indicator.progress() === 0) {
                        indicator.play(0);
                    }
                }

            }
        )
    });
    spinWheel.add("end");

Básicamente estoy tratando de llamar a una animación que hace girar una ruleta de la fortuna, el caso es que me gustaria desde Typescript llamar a la función de Javascript, para que la animación se ejecute

girarRueda(){
  activarRuleta(360);
}

Algo similar. ¿Hay alguna forma de llamar dicha función desde TS?

Estoy actualmente en un componente TS haciendo validaciones, sin embargo tengo un evento en un archivo javascript que llamé de la siguiente manera:

ngOnInit(): void {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = 'assets/js/ruleta.js';
    head.appendChild(script);
  }

Este es mi script ruleta.js

 var indicator = new TimelineMax();
    var spinWheel = new TimelineMax();
    indicator.to(active, .13, { rotation: -10, transformOrigin: "65% 36%", ease: Power1.easeOut })
        .to(active, .13, { rotation: 3, ease: Power4.easeOut })
        .add("end");

    //  Luckywheel animation
    spinWheel.to(wheel, 5, {
        rotation: deg, transformOrigin: "50% 50%", ease: Power4.easeOut, onUpdate: (
            function () {
                //_gsTransform: current position of the wheel
                tolerance = currentRotation - lastRotation;

                if (Math.round(currentRotation) % (360 / 12) <= tolerance) {
                    if (indicator.progress() > .2 || indicator.progress() === 0) {
                        indicator.play(0);
                    }
                }

            }
        )
    });
    spinWheel.add("end");

Básicamente estoy tratando de llamar a una animación que hace girar una ruleta de la fortuna, el caso es que me gustaria desde Typescript llamar a la función de Javascript, para que la animación se ejecute

girarRueda(){
  activarRuleta(360);
}

Algo similar. ¿Hay alguna forma de llamar dicha función desde TS?

ADD:

Intenté esto

 girarRueda2(){
   this.script.activarRuleta();
}

Debido a que previamente declaré un script.src en el ngOnInit, pero sigue sin dar resultados

Origen Enlace

Activar funcion Javascript desde Typescript Angular

Estoy actualmente en un componente TS haciendo validaciones, sin embargo tengo un evento en un archivo javascript que llamé de la siguiente manera:

ngOnInit(): void {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = 'assets/js/ruleta.js';
    head.appendChild(script);
  }

Este es mi script ruleta.js

 var indicator = new TimelineMax();
    var spinWheel = new TimelineMax();
    indicator.to(active, .13, { rotation: -10, transformOrigin: "65% 36%", ease: Power1.easeOut })
        .to(active, .13, { rotation: 3, ease: Power4.easeOut })
        .add("end");

    //  Luckywheel animation
    spinWheel.to(wheel, 5, {
        rotation: deg, transformOrigin: "50% 50%", ease: Power4.easeOut, onUpdate: (
            function () {
                //_gsTransform: current position of the wheel
                tolerance = currentRotation - lastRotation;

                if (Math.round(currentRotation) % (360 / 12) <= tolerance) {
                    if (indicator.progress() > .2 || indicator.progress() === 0) {
                        indicator.play(0);
                    }
                }

            }
        )
    });
    spinWheel.add("end");

Básicamente estoy tratando de llamar a una animación que hace girar una ruleta de la fortuna, el caso es que me gustaria desde Typescript llamar a la función de Javascript, para que la animación se ejecute

girarRueda(){
  activarRuleta(360);
}

Algo similar. ¿Hay alguna forma de llamar dicha función desde TS?