Animation Tile Using Metro JS

I am trying to combine two animations using the metro js plugin. I want to combine several stops with flip animation, Flip animation should happen after a delay. Can you help me get started with sample code?

Thanks for any help.

+4
source share
1 answer

It depends on how much you are looking for.

There is a short and dirty method for this, but I can not promise that it will work in a cross browser, and you will also have to carefully configure it if you are worried about synchronization problems.

To explain, you can insert one tile inside the frame of another tile, but the inner tile will not be “smart” as to whether it is displayed or not: it will not reset its animation every time it is shown again.

If you start with a flip tile as an external animation, then insert a fragment with several stops as the first side displayed on the flip, you can show several stops, then a fragment flip.

What becomes complicated about this is that the delay value is this: the delay between animations, but not accounting for the animation time. To show all the stops of a multiple stop fragment before flipping, your flip tile delay should be: number-of-stops * ( multiple-stops-tile-delay + multiple-stops-tile-single-animation-time ) - flip-tile-single-animation-time

Here is a jsfiddle example (I just changed the two examples above) where the delay for the flip tile has not been set long enough because I couldn’t bother to calculate / encode the multisession time. Instead, I just used the delay time *. Thus, when a tile stops repeatedly, set to a delay of 6000 with 3 stops, I set the parent flip tile to a delay of 18000. If you allow this to run more than two flips, it will not be synchronized at all.

Note. I tested this in Chrome, Firefox, and IE 9, and it basically works in all three, but IE may have a weird lag time different from the other two, which can make stops reverse synchronization in all three browsers impossible.

A longer and more elegant way involves changing the code in the plugin to force the animation to reset for fragments inside other fragments or some similar approach, but going beyond the simple indication that the output will be beyond the simple answer.

0
source

Source: https://habr.com/ru/post/1436898/


All Articles