Author: struggling post-80s
The full text contains 2420 words and 6 pictures. It takes 5 minutes to read.
———— / BEGIN / ————
The dynamic panel is one of the most frequently used components in Axure. The dynamic panel is specially used to design dynamic functions in prototypes. It can contain one or more states. Each state is a page, which can be edited here. toggle or show/hide to achieve some of our common interactive effects.
A specific interaction event
Dynamic panels have some specific events dedicated to them: when the dynamic panel's state changes, when its size changes, when it is dragged, when it is scrolled, and when it is loaded.
Some events are triggered by actions set in other use cases, such as showing or moving a dynamic panel.
You can use these events to create advanced interactions such as expanding collapsed areas or carousel ads.
Using drag events can create the interaction effect of dragging, and for the three states in the dragging process, start, progress, and end can respectively set the desired interaction.
This article describes the application of these specific events through some cases.
2. Case description
01 When the state changes
This event is triggered by the "set panel state" action. This event is typically used to trigger a chain of interactions for dynamic panel state changes.
Case: progress bar loading
Add a dynamic panel in the design area, name it Status Indicator, and add two identical rectangles.
Fill one of the rectangles with the color and align it with the other rectangle, convert the rectangle with the fill color into a dynamic panel and name it a progress bar; set the width of the progress bar dynamic panel to 1, and name the other rectangle as a background frame .
Adds 3 blank states to the status indicator dynamic panel.
Use case on page load: Set the status indicator dynamic panel to loop backwards with a loop interval of 100ms.
Use case on state change: Add a state change use case for the status indicator dynamic panel. The preferred condition for setting the use case is that if the width of the progress bar dynamic panel is smaller than the width of the background box, the set size action is performed for the progress bar dynamic panel.
In the action configuration, the width is set to the current width of the progress bar plus one percent of the width of the background box, and the height is set to the height of the background box. Linear animation is selected, and the time is 50 milliseconds.
The width and height effect settings here can be achieved by defining local variables. Add another use case to stop the status loop of the status indicator dynamic panel.
At this point, all interaction settings are completed, preview and view the effect.
Page Loading and State Changes
The transition of the indicator panel state and the animation of the progress bar panel size change are carried out almost simultaneously, so the time interval for the indicator panel state transition should be longer than the animation duration of the progress bar panel size change, otherwise the size change will precede the state switch. Completed, causing the width of the progress bar panel to exceed the width of the background box by 1%.
02 When the size is changed
The on resize event is fired by the "set panel size" action when the dynamic panel size changes. When the "set panel size" action is used on other components, it can be used to trigger a chain of events.
Case: progress bar percentage
Add a text label to the previous case, named Progress Percent.
Use case when the size changes: Add a use case for the progress bar panel when the size changes, set a variable expression for the percentage text label, that is, the value displayed here = the width of the progress bar panel / the width of the background box * 100%, and forensics of the calculation result .
The corresponding expression [[Math.ceil(LVAR1.width/LVAR2.width*100)]]%, LVAR1 and LVAR2 are the width of the progress bar and the width of the background box, respectively.
Click Preview to view the prototype effect. We can see that when the width of the progress bar increases, the percentage data displayed on the text label also changes synchronously.
add size change
03 While dragging
Drag events are triggered by panel "drags" or a quick click, drag, and release. This event is usually used for carousels, volume adjustments, etc. in App prototypes.
Case: volume adjustment
Drag the horn icon, rectangle, and circle to the design area, and adjust the size of the rectangle and circle. When adjusting, the height of the circle is greater than the height of the rectangle, and fill colors for the circle and rectangle. Convert the circle to a dynamic panel and name it the Adjustment Ball and the rectangle the Volume Lever.
Use case while dragging: Add a drag use case for the adjustment ball, move the adjustment ball, select horizontal movement, the adjustment ball needs to move in the horizontal direction of the volume bar.
Therefore, the movement limit here can be set to be greater than the X coordinate of the volume rod, and less than the X coordinate of the volume rod + the width of the volume rod - the X coordinate of the volume rod.
The expression is written as left>[[LVAR1.x]], right <[[LVAR1.x+LVAR1.width]], the variable LVAR1 is the volume lever, and the LVAR2 bit adjusts the ball.
After the setup is complete, preview the prototype.
Drag use case to add move action
Set moving boundaries
When setting the limit, you need to accurately set the coordinates of the movement, so you need to write a complete expression when setting the right range, instead of directly writing the width of the volume lever (LVAR1.width). This case is a horizontal movement, so only the abscissa movement range needs to be set.
04 While scrolling
The scroll event of the dynamic panel is triggered by the scrolling of the scroll bar of the dynamic panel. If you need to scroll to a fixed position to trigger an interaction, you can add conditions such as [[this.ScrollX]] or [[this.ScrollY]] in the use case.
Case: Scrolling toggle panel state
Drag a dynamic panel to the design area, add 3 states to the panel, and add a rectangle of the same size to each state. In order to ensure the intuitive effect, the height of the rectangle is greater than the height of the device screen, and is set to 1600.
Fill each rectangle with a different color, and add different text content in the center of each rectangle, so that the different states can be clearly distinguished when switching.
Reduce the height of the dynamic panel, set it to 700, and set the vertical scroll bar to automatically display in the properties panel.
Use case when scrolling: Add a condition to the use case. When the scrolling distance of the dynamic panel in the vertical direction exceeds 150, the expression is [[This.scrollY]]>150, then the dynamic panel switches to the next state and loops backwards.
After the setting is completed, preview to see the prototype effect.
Edit conditions, set panel switching actions
05 When loading
The loading event of the dynamic panel is triggered by the initial loading of the dynamic panel on the page. This event can be used in place of the page load event.
Case: short book carousel
Drag the dynamic panel component to the design area, add 6 states, import an image for each state.
Name the dynamic panel as Carousel, add a load-time use case for the carousel, set the panel state to automatically cycle backwards, set the cycle interval to 2000 milliseconds, and both enter and exit animations to slide to the left, and the animation time is 500 milliseconds.
After setting, preview the prototype effect.
Set state transition animation
Only the effect of automatic rotation is set here, and the interactive effect of manual switching of slides is not explained here.
The above content illustrates the power of the dynamic panel through a few simple cases. In fact, the interactive effect that the dynamic panel can achieve is far from this. More interactive animations are waiting for us to explore and study together. I hope you can dig out more Great value that takes prototyping fidelity to the next level.
———— / END / ————
This article was originally published by @ struggle after the 80s on everyone is a product manager. Reproduction is prohibited without permission
Click "Read the original text" to download the APP