Заливка и линейка анимации не работают с помощью gsap - PullRequest
0 голосов
/ 12 апреля 2020

Я пытался изменить свойства заливки и линии, такие как lineColor и lineWidth, при регистрации объекта в консоли он показывает, что значение изменилось, но не перерисовывает его, а также показывает исходные цвета или ширину.

Я пытался использовать новый синтаксис gsap, используя

import PixiPlugin from "gsap/PixiPlugin";
gsap.registerPlugin(PixiPlugin);
PixiPlugin.registerPIXI(PIXI);

, но он не работал для любой анимации с подвойками, поэтому я использую старый синтаксис, ниже приведен код

const App =()=>{



function onClick()
{


  gsap.to(this.fill,1,{color:0x000000})

   //   gsap.set(this,1 {x:550,tint:0x9013FE, height:200})
   console.log(this)


}

}

return(
       <Stage 
        width={width}
        height={window.innerHeight*8.67/10}
        options={{ antialias: true, resolution:window.devicePixelRatio  || 1 , autoResize:true, backgroundColor: 0x000000, x:400, y:900 }}>
<Graphics
key={0}


interactive={true} 

      draw={graphics =>{

        graphics.lineStyle(2, 0xffffff, 1);
        graphics.beginFill(0xff00bb, 0.25);
        graphics.drawPolygon([ 150, 450, 450, 450, 450, 550,150, 550]);
        graphics.endFill();

graphics
   .on('mousedown', onClick)
    .on('touchstart', onClick)



      }
      }/>
</Stage>

)

}

export default App

Я пытался использовать оттенок, но когда продолжительность> 0, он меняется на несколько цветов, и в долгосрочной перспективе этот проект я не думаю, что это эффективно, наконец, как вы можете видеть, я использую реагирование

...