Questo snippet serve ad animare un'immagine dividendola in due pezzi, permettendo di animarli separatamente ma soprattutto semplicemente. Il vantaggio è che non c'è alcun bisogno di creare immagini separate ma si utilizza soltanto l'immagine originale. Per questo snippet utilizzeremo la spada excalibur e la infrangeremo in 2:
Requisiti
- wordpress Gpci fgramework
- modulo aggiunte di codice
- libreria javascript gsap
Scelta immagine e misurazioni
La prima cosa che faremo sarà scegliere un'immagine (excalibur) e fare le giuste misurazioni; utilizzeremo quindi il blocco wordpress immagine ed aggiungeremo, utilizzando il controllo javascript, uno snippet:
//Misurazione immagine
let imageElement = GetCurrentBlockFromCurrentScript().querySelector( 'img' );
imageElement.addEventListener( 'mousemove', function(event){
let x = event.offsetX;
let y = event.offsetY;
let WidthPercentage = ( x/imageElement.width ) * 100;
let HeightPercentage = ( y/imageElement.height ) * 100;
console.log( 'X:'+x+' px, Y:'+y+' px, '+'Width:'+WidthPercentage.toFixed(2)+'%, Height:'+HeightPercentage.toFixed(2)+'%' );
imageElement.style.opacity = '0.7';
imageElement.style.border = '1px solid red';
} );
imageElement.addEventListener( 'mouseout', function(){
imageElement.style.opacity = '1';
imageElement.style.border = 'none';
} );
A questo punto nel frontend muovendoci con il mouse sull'immagine vedremo, in console sviluppatori, le posizioni X e Y che sceglieremo per decidere i punti di rottura (ricordando che i canvas saranno 2 quadrati o rettangoli):
Ho deciso che manterrò tutta la larghezza ma dividerò la spada a 400px dall'alto.
Creazione dei canvas
Ora che lo script di prima ha già fatto la sua utilità può essere cancellato e al suo posto utilizzeremo:
//Crea i 2 canvas ed elimina l'immagine
let FigureElement = GetCurrentBlockFromCurrentScript();
let ImageElement = FigureElement.querySelector('img');
let CanvasElement1 = document.createElement( 'canvas' );
CanvasElement1.id = Canvas1Id = 'canvas-1';
CanvasElement1.width = ImageElement.width;
CanvasElement1.height = 400;
let CanvasElement2 = document.createElement( 'canvas' );
CanvasElement2.id = Canvas2Id = 'canvas-2';
CanvasElement2.width = ImageElement.width;
CanvasElement2.height = ImageElement.height-400;
FigureElement.after( CanvasElement2 );
FigureElement.after( CanvasElement1 );
CanvasElement1 = document.getElementById( Canvas1Id );
CanvasElement2 = document.getElementById( Canvas2Id );
ImageElement.onload = function(){
CanvasElement1.getContext('2d').drawImage( ImageElement, SourceX=0, SourceY=0, SourceWidth=ImageElement.width, SourceHeight=CanvasElement1.height, DestinationX=0, DestinationY=0, DestinationWidth=SourceWidth, DestinationHeight=SourceHeight );
CanvasElement2.getContext('2d').drawImage( ImageElement, SourceX=0, SourceY=CanvasElement1.height, SourceWidth=ImageElement.width, SourceHeight=CanvasElement2.height, DestinationX=0, DestinationY=0, DestinationWidth=SourceWidth, DestinationHeight=SourceHeight );
FigureElement.remove();
}
Dato che voglio che i pezzi della spada siano interi e in verticale prima di romperla assegno alla colonna contenitore, utilizzando il controllo di posizionamento, display:flex e flex-direction:columns
Per questa animazione userò gsap (solo la libreria base) e applico al pulsante spezza spada (attributo onclick):
gsap.to('#canvas-1', { duration:1.5, rotation:900, x:'100vw', y:'100vh', ease: 'power1.inOut' } );
e al pulsante per riassemblarla:
gsap.to('#canvas-1', { duration:1.5, rotation:0, x:'0vw', y:'0vh', ease: 'power1.inOut' } );
A questo punto possiamo distruggere e riassemblare laspada nella roccia utilizzando i 2 pulsanti, l'animazione non sarà niente di che ma dovrebbe rendere l'idea del pattern. Buon divertimento!