Let’s explore a simple example showcasing Entry/Exit animations through position transitions. Here, we’ll see how to apply entry and exit transitions to a call pop-up widget.
To begin, we’ve created a call pop-up widget using fixed view, labels, and button widgets, as shown below.
Next, select the call pop-up widget and navigate to the animation tab. Right-click on the Animation field, then choose Add Animation -> Entry. In the dialogue, specify the animation name, ID, and total duration. Repeat this process for the Exit animation.
Now, click on the entry animation and proceed to the Animation Editor tab. Right-click on the widget, select Add Transition, then choose Transition Type as Linear. Specify Transition Change as X position, input Start and End values, Start and End Duration.
In the Hierarchical State Machine (HSM), add a key input under Events to control the visibility of the popup widgets. For instance, assign key ‘1’ to show the widget and key ‘2’ to hide it. Then, for key ‘1’, under ‘Actions for Events’, click Add, select the Type as Widget, Action as Show, choose the widget ID, and click OK. Repeat the process for key ‘2’, selecting Action as Hide.
A boot animation serves as the loading screen displayed when a device starts up, allowing the operating system time to initialize programs and subsystems.
To set up a boot animation in Flint, begin by creating an EFX file for the animation image (refer to the Animation Image section).
Now, let’s design a Welcome Screen animation for the Cluster_demo project. Create a “welcome_screen” view with Fixed-view (Background Image) widget.
In the Properties section, add “anim.efx” as the Background Image. Generate Data Variable for the animation, and in the Advanced tab of widget properties, select “Animation Control” as the Image Style and map the created Data Variable to its Control Data.
Next, navigate to the Animation tab. Right-click and select “Add Animation” -> “Entry.” Enter the Animation name, ID, and Total Duration of the Animation (in milliseconds) in the dialog. Click OK to confirm.
Proceed to the Animation Editor and right-click on the view, then select Add Transition. In the pop-up dialog, choose the Transition type as Linear and Transition Change as Data Value. Select the appropriate Data Variable for the Data Value, set the Start Value to 0 and the End Value to 14. Specify the Start and End Duration as 0 to 3500, respectively.
Next, navigate to flint.efp and select the Custom Events tab. Click on Add, then in the pop-up dialog, enter the Event Name (Boot_Anim_Completed), ID (boot_completed), and Value (1). Click OK to confirm.
Now, access the State Machine. Under Events, click on Add, select Custom Events in Group, set Type as On Received, and choose the created Boot_Anim_Completed custom event in the Arguments. Select “main_screen” as the Next State.
In the Animation Editor, add a Transition by right-clicking on the view. Choose Transition Type as Set Value, Transition Change as Generate Event, and add the created Boot_anim_completed in Custom Event. Set the Start Value, Start Duration, and End Duration as 0, 3499, and 3500 respectively.
During project simulation, the sequence of images stored in the EFX file will be displayed when the “welcome_screen” view is shown. Upon completion of the sequence, the custom event (Boot_anim_completed) will be triggered, transitioning to the next state (main_screen).
