Transizione graduale tra le modifiche di layout

  • Articolo

Le proprietà di layout sono normalmente impostate su valori discreti (ad esempio numeri di riga o di colonna) o impostate su valori automatici (ad esempio larghezza e altezza). Per creare una transizione graduale tra modifiche a questo tipo di proprietà, utilizzare FluidLayout. Se ad esempio un oggetto viene visualizzato nella cella in basso a sinistra di un pannello di layout Grid in uno stato, ma viene visualizzato nella cella in basso a destra dello stesso pannello di layout in uno stato diverso, la transizione tra i due stati risulterà in un cambio repentino, a meno che non si attivi FluidLayout per il gruppo di stati e si aumenti la durata della transizione.

[!NOTA]

La funzionalità FluidLayout ha effetto unicamente su proprietà relative al layout.

Per effettuare una transizione graduale tra modifiche di layout

  1. Disporre gli oggetti in un documento aperto. Si supponga ad esempio di utilizzare un oggetto Grid con tre colonne e tre righe, con diversi oggetti in quattro delle celle.

    Ee341455.067dbe1c-2246-4c0e-b9f2-2eb9ad082e5e(IT-IT,Expression.30).png

  2. Nel pannello Stati definire diversi stati visivi e modificare le proprietà di layout degli oggetti negli stati. Per ciascuno degli oggetti, ad esempio, definire uno stato che visualizzerà l'oggetto nell'angolo inferiore destro, ad occupare due righe e due colonne.

    Ee341455.198ca721-de5e-4d7d-85ab-97fbb02dcbc8(IT-IT,Expression.30).png

    Per informazioni sulla creazione di stati, vedere Definire diversi stati di visualizzazione e tempi di transizione per un controllo utente.

  3. Nel pannello Stati impostare il tempo di Transizione predefinita per il gruppo di stati su 1 secondo.

  4. Opzionalmente, fare clic su EasingFunction Ee341455.9718b395-a71d-40b2-9d08-8e29a225151f(IT-IT,Expression.30).png per selezionare una funzione di interpolazione da applicare alla transizione. Le funzioni di interpolazione consentono di creare un'animazione più realistica. La funzione di interpolazione Bounce, ad esempio, consente di creare un effetto di rimbalzo.

  5. Per abilitare il cambio tra stati, accedere al pannello Asset selezionare la categoria Comportamenti e trascinare il comportamento GoToStateAction sull'oggetto nell'angolo inferiore sinistro.

  6. Nel pannello Proprietà modificare la proprietà StateName di GoToStateAction sul nome dello stato che sposta l'oggetto in basso a sinistra. Per esempio, cambiare la proprietà StateName in Show1.

    Ee341455.8d71b559-361b-4885-ad87-9d5537215514(IT-IT,Expression.30).png

    Per ulteriori informazioni sui comportamenti, vedere Aggiunta di comportamenti a oggetti.

  7. Ora che si è creata una transizione di stato funzionante, testare l'applicazione premendo F5 e facendo clic su un oggetto nell'angolo inferiore sinistro della griglia. L'oggetto si sposta istantaneamente nell'angolo inferiore destro, sebbene la transazione sia impostata su 1 secondo.

  8. Nel pannello Stati fare clic su Attiva FluidLayout Ee341455.04416d58-b1c8-4338-b8fc-9ed002ec88bc(IT-IT,Expression.30).png per il gruppo di stati.

  9. Testare nuovamente l'applicazione premendo F5 e facendo clic sull'oggetto nell'angolo inferiore destro della griglia. Lo spostamento avviene gradualmente dall'angolo sinistro a quello destro nell'arco di 1 secondo.

Vedere anche

Attività

Definire diversi stati di visualizzazione e tempi di transizione per un controllo utente

Concetti

Aggiunta di comportamenti a oggetti

Utilizzo del pannello di layout Grid