The ticker changes the time value of the filter
It's a simple implementation flow... Load the necessary image, place the sprite in the container , and first display the sprite on the canvas . At this time, make all but the first image transparent with alpha:0 . Apply a filter to the container and set the distortion to 0 . After that, it would be a good idea to switch the alpha of the sprite , which is the slider image, at regular intervals, just like implementing a normal slider . At the same time , by changing the filter value of the container , you can express switching using the distortion filter . TweenMax.to(displacementFilter.scale,1.5,{ x: 100, y: 100, ease: Expo.easeOut }) It is easy to manipulate the scale value of filter using TweenMax etc.Also, by obtaining the mouse coordinates and linking them with the mousemove method, this type of expression is possible. It would be interesting to put it on the first visual logo etc. ShockwaveFilter As the name suggests, this filter can implement shock wave-like Phone Number List expressions. ( You need to add the official plugin pixi-filters .) This time, I tried to make the shock wave spread around the clicked coordinates . There may be situations where this can be used on websites, such as applying a filter to the hover animation .
https://cxbdirectory.com/wp-content/uploads/2024/03/Phone-Number-List-300x191.png
The simple implementation flow is... Similar to the slider, load the necessary images and display them on the canvas . It feels like a filter is generated and applied when the sprite is clicked . Also, this time we will use ticker to animate. (To spread the shock wave.)Then pass the clicked coordinates to the filter. This filter allows you to add noise to create an old-fashioned visual feel. There is a similar filter called NoiseFilter , but I got the impression that this is an enhanced version with more settings.
頁:
[1]