1+ <!DOCTYPE html>
2+ < html >
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < link rel ="stylesheet " href ="../../index.css ">
8+ < script src ="https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.js "> </ script >
9+ < script src ="../dist/iife/spine-canvaskit.js "> </ script >
10+ < style >
11+ *
12+ margin : 0 ;
13+ padding : 0 ;
14+ }
15+ </ style >
16+ </ head >
17+
18+ < body class ="p-4 flex flex-col items-center ">
19+ < h1 > Animation State Events</ h1 >
20+ < p class ="mb-4 "> Open the console in the developer tools to view events logs.</ p >
21+ < canvas id =foo width =600 height =400 style ="margin: 0 auto; "> </ canvas >
22+ </ body >
23+
24+ < script type ="module ">
25+ async function readFile ( path ) {
26+ const response = await fetch ( path ) ;
27+ if ( ! response . ok ) throw new Error ( "Could not load file " + path ) ;
28+ return await response . arrayBuffer ( ) ;
29+ }
30+
31+ const ck = await CanvasKitInit ( ) ;
32+ const surface = ck . MakeCanvasSurface ( 'foo' ) ;
33+
34+ const atlas = await spine . loadTextureAtlas ( ck , "assets/spineboy.atlas" , readFile ) ;
35+ const skeletonData = await spine . loadSkeletonData ( "assets/spineboy-pro.skel" , atlas , readFile ) ;
36+ const drawable = new spine . SkeletonDrawable ( skeletonData ) ;
37+ drawable . skeleton . scaleX = drawable . skeleton . scaleY = 0.4 ;
38+ drawable . skeleton . x = 300 ;
39+ drawable . skeleton . y = 380 ;
40+
41+ // Set the default mix to 0.2 seconds, queue animations, and set listeners
42+ const animationState = drawable . animationState ;
43+ animationState . data . defaultMix = 0.2 ;
44+ animationState . setAnimation ( 0 , "walk" , true ) . listener = {
45+ start : ( entry ) => console . log ( "Walk animation started" ) ,
46+ end : ( entry ) => console . log ( "Walk animation ended" ) ,
47+ } ;
48+ animationState . addAnimation ( 0 , "jump" , false , 2 ) ;
49+ animationState . addAnimation ( 0 , "run" , true , 0 ) . listener = {
50+ event : ( entry , event ) => console . log ( `Custom event "${ event . data . name } )
51+ } ;
52+ animationState . addListener ( {
53+ completed : ( entry ) => console . log ( `Animation ${ entry . animation . name } )
54+ } ) ;
55+
56+ const renderer = new spine . SkeletonRenderer ( ck ) ;
57+ let lastTime = performance . now ( ) ;
58+ function drawFrame ( canvas ) {
59+ canvas . clear ( ck . Color ( 52 , 52 , 54 , 1 ) ) ;
60+
61+ const now = performance . now ( ) ;
62+ const deltaTime = ( now - lastTime ) / 1000 ;
63+ lastTime = now ;
64+
65+ drawable . update ( deltaTime ) ;
66+ renderer . render ( canvas , drawable ) ;
67+
68+ surface . requestAnimationFrame ( drawFrame ) ;
69+ }
70+ surface . requestAnimationFrame ( drawFrame ) ;
71+ </ script >
72+
73+ </ html >
0 commit comments