Author Topic: ModernUI_Animation Control  (Read 217 times)

fearless

  • Member
  • ***
  • Posts: 469
    • LetTheLightIn
ModernUI_Animation Control
« on: July 21, 2019, 03:46:59 AM »
I created an animation control, which was based of the initial work done with the ModernUI_Spinner control

Download

The control can be downloaded via the ModernUI repository or downloaded directly from this link: https://github.com/mrfearless/ModernUI/blob/master/Release/ModernUI_Animation.zip?raw=true


Example

I created an example project to demonstrate it.

The example (which includes a Radasm project) can be downloaded via the ModernUI repository or downloaded directly from this link: https://github.com/mrfearless/ModernUI/blob/master/Release/MUIAnim1.zip?raw=true


I found the facebook clickbait gif online a few years ago and saved it for some reason, maybe inspiration or the thought of using something like that somewhere at some future time. The gif was split into individual frames, then stitched together in PhotoScape to create the single long spritesheet of all the frames.

I was looking for another example to demonstrate, maybe some cool button animation and came across the on/off button here: https://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-animations

I recorded it with ScreenToGif, exported frames and stitched together in Photoscape the spritesheet for it and just intended to show it animating, but I realized that perhaps I could actually implement it in a way so as to use it as a control.

I added in an option to specify a frame time of -1 which would be seen as a pause by the animation control.



I had to reconstruct the spritesheet to make it visually work, but starting with a single frame in the off position, once user clicks on animation it plays until it reaches the end of the on frames and encounters a frame time of -1, which means the animation pauses. Another click and the animation resumes playing until it hits another frame time of -1 at the end of the spritesheet showing the off position once again. This allowed the appearance of an interactive toggle/rocker control.

I then tied in the effect of animating via clicking the facebook clickbait animation or the on/off button to animate the other control.
fearless

CM690II Case, HX1000 PSU, Asus Z97, Intel i7-4790K, Seidon 120v Cooler, 16GB DDR3, MSI GTX 980TI

My Github  Twitter

HSE

  • Member
  • *****
  • Posts: 1148
  • <AMD>< 7-32>
Re: ModernUI_Animation Control
« Reply #1 on: July 21, 2019, 04:33:46 AM »
Hi Fearless!

Problems with pixel/units still are there.

Have fun!   :biggrin:

fearless

  • Member
  • ***
  • Posts: 469
    • LetTheLightIn
Re: ModernUI_Animation Control
« Reply #2 on: July 21, 2019, 04:56:11 AM »
Looks like a scaling issue. Unfortunately I have no way of testing or reproducing it on my own system as im using Win7 x64 with a monitor that is 1920x1080
fearless

CM690II Case, HX1000 PSU, Asus Z97, Intel i7-4790K, Seidon 120v Cooler, 16GB DDR3, MSI GTX 980TI

My Github  Twitter