Hero
Hero widget is a great out-of-the-box animation for communicating the navigation action of a widget flying from page to page. Hero animation is a shared element transition between two different pages.
The Hero Animation transforms the image's shape while it flies from one screen to another.
The steps to build the Hero Animation are as follows:
Building Hero Animation requires you to have at least two pages that share the same image.
To add an Gesture Detectore:
- Create/Select the First page.
- Select the Gesture Detectore widget from the Widget Panel.
- Click on Actions + (on the right side of your screen).
- Click on Action dropdown.
- Find the Action Type dropdown and change it to Navigation.
- Find the Gesture dropdown below and change it to OnTap.
- Find the dropdown below and select Open page.
- Finally in the Which Page? select the page that you want the user to sign in on once logged in.
To add an image:
- Select the Image widget from the Widget Panel.
Two images on a different page must share a common Hero value.
To add a hero to the first image:
- Before the Image select Add New Widget.
- Select the Hero from the Widget Panel.
- Move to the Property Editor (on the right side of your screen).
- Add a value.
In the Pages section select New Page.
To add an image:
- Select the Image widget from the Widget Panel.
Two images on a different page must share a common Hero value.
To add a hero to the first image:
- Before the Image select Add New Widget.
- Select the Hero from the Widget Panel.
- Move to the Property Editor (on the right side of your screen).
- Add the same value as the hero of the previous page.
Last modified 8mo ago