En aquesta pàgina
Introducció
Si el vostre equip envia una animació interactiva feta amb Rive, algú ha de comprovar el fitxer exportat abans que entri a l'aplicació. Veure'l reproduir-se no és suficient. Heu de saber que hi ha la taula de treball correcta, que la màquina d'estats reacciona a les seves entrades i que res es queda encallat en un estat que no hauria de tenir.
El visor d'animacions ToolBuddy de Rive està dissenyat per a aquesta comprovació. Obre el fitxer `.riv` exportat a la vostra màquina, l'executa en un treballador separat perquè la pàgina respongui i us ofereix els controls que necessiteu per revisar en lloc d'editar.
Aquí teniu una revisió típica, des d'obrir el fitxer fins a lliurar un registre del que heu provat als desenvolupadors.
Comença amb el fitxer `.riv` exportat
Feu servir el fitxer `.riv` que el vostre equip enviarà realment, el que s'ha exportat per al temps d'execució. El visor no obre els fitxers de projecte `.rev` ni les còpies de seguretat de l'editor. Si això és tot el que teniu, primer exporteu un `.riv` des de Rive.
Deixa anar el fitxer o selecciona'l amb el navegador de fitxers. El visualitzador primer comprova que realment sigui un fitxer Rive i després inicia el temps d'execució en un treballador en segon pla. Els fitxers grans triguen una estona a iniciar-se, però la resta de la pàgina continua funcionant mentre ho fan.
- Feu servir el fitxer `.riv` exportat, no el fitxer de projecte `.rev`.
- Arrossegueu-lo o feu servir el selector de fitxers.
- Espereu un segon perquè s'iniciï i apareixerà la vista prèvia.
Trieu la taula de treball, l'animació o la màquina d'estats per revisar
Un cop carregat, feu servir els controls que hi ha a la vista prèvia per canviar la taula de treball, l'animació o la màquina d'estats. Una exportació sovint conté diverses: els estats d'un botó, unes quantes variants de caràcters o un conjunt complet d'icones.
Per comprovar el temps en un sol clip, seleccioneu aquesta animació. Per comprovar el comportament, seleccioneu la màquina d'estats. Mantingueu el panell d'informació en temps d'execució obert perquè qui estigui mirant sàpiga quina taula de treball i màquina d'estats estan actives.
- Trieu la taula de treball per a la part del producte que esteu revisant.
- Canvia a una animació específica per comprovar el temps d'un clip.
- Canvieu a una màquina d'estats per comprovar com respon a l'entrada.
Comprova el seu aspecte amb els controls de reproducció i disseny
Utilitzeu la reproducció, la pausa i la velocitat per veure el ritme, les pauses i les transicions que es repeteixen. Quan esteu en una animació, la barra de progrés segueix el clip actiu, de manera que podeu veure exactament on passa alguna cosa a la línia de temps.
L'ajust, l'alineació i el fons us permeten veure aproximadament com quedarà al producte. Proveu "contenir contra la coberta" o "fitWidth" per veure com es comporta en un bàner ample en comparació amb un botó quadrat petit i definiu el fons al color de l'aplicació perquè els problemes de contrast apareguin ara. El so està silenciat a la vista prèvia, així que comproveu qualsevol àudio a la mateixa aplicació.
- Reduïu la velocitat per captar una transició, accelereu-la per comprovar un bucle llarg.
- Canvieu l'ajust i l'alineació perquè coincideixin amb on apareixerà realment.
- Definiu el fons al color real de la interfície d'usuari.
Prova les entrades i observa què fa la màquina d'estats
Aquí és on l'espectador es guanya el seu lloc. Si la màquina d'estats té entrades booleanes, numèriques o de disparador, apareixen al tauler de control i les podeu controlar tal com ho faria el codi de l'aplicació. Proveu els casos límit: invertiu un booleà dues vegades ràpidament, definiu un número just al seu llindar, activeu un disparador a mitja transició.
A mesura que avanceu, la línia de temps d'estat mostra cada canvi d'estat, de manera que podeu veure si la màquina ha anat on esperàveu o ha pres un camí estrany per arribar-hi. Això sol ser més ràpid que llegir la màquina d'estats a l'editor.
- Invertiu els booleans per comprovar cada estat condicional.
- Canvieu els números per provar els llindars i els rangs.
- Activeu disparadors per comprovar transicions puntuals.
Entrega-ho amb el mode de traspàs i el registre de sessió
Si mostreu la vista prèvia a algú altre, activeu el mode de traspàs. Amaga els panells de disseny i d'entrada i només manté els canvis i esdeveniments d'estat recents a la pantalla, de manera que una revisió de disseny no es converteixi en un recorregut pels controls.
L'enregistrador d'esdeveniments registra tot el que ha passat durant la sessió: reproducció, pausa, aturades i bucles, canvis d'estat, cada entrada que has tocat i canvis de velocitat. Exporta'l com a fitxer JSON i adjunta'l a la sol·licitud. Un desenvolupador pot veure exactament què has fet i què ha fet l'animació en resposta, cosa que supera una captura de pantalla i un paràgraf de "té una mena de problema".
Escrit per
Ankit Kumar
Enginyer de programari sènior i fundador de ToolBuddy
Enginyeria d'utilitats primeres per al navegador amb zero requisits de càrrega mitjançant tecnologies WebAssembly, Web Audio i Canvas.