I am currently working on the music control button. When I press the “Play” button, the bar is playing, but when I press the “Pause” button, the bar does not stop and continues to play. I am applying the Move action on the running bar.
In addition, when I press the play button and want to change to another song, I press the “Next” button to rewind to the next song. But when I return to the old song, the old song bar is still playing without resetting to the original default state. Even when pressing the “Previous” button.
I would like to send you the Axure RP file that I have designed. I beg the community to help me. I would like to send my sincere thanks and appreciation to all the Axure RP enthusiasts.
Your example has a transition animation that will just play until it ends once triggered. I don’t think you can pause it afterwards.
I have a demo of a pauseable version working in a different way. There’s definitely a ton of edge cases not accounted for here but it’s good enough for a prototype. I made a bunch of changes to the shapes as well to decrease repetition and make it easier to keep track of everything.
Basically what you need to do is build a clock/timer/game loop function. It’s a function that occurs on a set period. Inside this function you’ll execute the animation by one frame. Wait for the set period. Then trigger the loop again.
I kind of went overboard for fun here and built out all the player functions. This is the only part that matters to answer your question:
Set AnimationController to selected to turn the animation on
Target AnimationController with a Move by (0,0) action.
In Moved interaction on AnimationController, check to see if it is selected.
Do all your move and size actions.
Wait (it’s in here you can control the duration of the animation).
Target AnimationController with a Move by (0,0) action again.
Set AnimationController to unselected to turn pause the animation
Here’s a breakdown of the key actions
AnimationController
This is the timer and the only part of this that is actually required.
When it is selected, the animation will play.
When it is unselected, the animation will pause.
When it is moved, it checks a condition:
if selected AND Marker.left < Slide.length (this in the basic condition, my demo checks to make sure the center of the marker lines up with Slide.right)
execute a frame of animation actions - move, rotate, size, scroll, anything with a number
wait X ms
move This by 0,0
an optional check is included as well. If selected AND Marker.left >= Slide.length
Fire On End of Track
On End of Track,
Is Repeat selected?
Fire Set to 0:00
Fire Play
Is Playlist on the last state?
Fire Pause
Default case
Fire Next
Set to 0:00
Move Marker to Slide.Left
Set Width of Play Slide to 1
Move AnimationController by 0,0
Prev
Is Shuffle selected?
Set Panel State to a random number between 1 and 6. You can do this when the state names are numbers, not always the most understandable option but it’s a cool trick.
Else,
Set Panel State to Previous
Next
If Shuffle is checked,
Set Panel State to a random number between 1 and 6. You can do this when the state names are numbers, not always the most understandable option but it’s a cool trick.
First of all, I would like to sincerely thank you for your heart and effort to help me. You are so kind.
I think you did a great job. But I see some errors, do you have a way to fix them? When I press the play button, I press the Next/Prev button of the song, I see the music is still running and not refreshing. It’s like when you listen to Spotify, when you are listening and next to the next song, both the previous and next songs will automatically reset to 0:00. Besides, when I press “Shuffle” or “Repeat”, both the current and future songs run at a speed quite fast compared to the original setting.
I’m not seeing the behaviour you describe regarding the Next/Prev button while it’s playing. It looks like it’s jumping to 0:00 and continuing when the track changes as it should. But if you wanted to modify the behaviour, the basic functions are all there. As for the play speed changing, I can’t tell I’m seeing the animation speed change - if it is, I’m not sure why it’s doing that.
I’m curious why it matters though, as I stated, this demo is me going overboard for fun.
I would not actually to bother to do any of this for an actual project - maybe the play/pause function, but even then. It’s a player, people know how they work. If I really needed to show the logic of each button - a flow chart or a state diagram would explain it more clearly and faster than this would.
I’ll say fixing these problems is left as an exercise for the reader.