Multiple Image Morphing

1

Hello to everyone,

I have a line chart that has 4 "frames" of display, based on 4 days. Each of these days can be selected by means of a cursor, which, by scrolling left / right, allows you to see the corresponding "frame" of the line graph for each day. The frames of the line chart are .png rectangles of the same size.

case
case1026×344 21 KB

I'd like to set a morph to make the transition from one "frame" to another smooth and continuous. I was wondering if it was possible.

N.B. The line of the graph actually includes two composite lines, similar in type to those of the example:

example

but quite complex, so I cannot reproduce them in vector form in Hype...

Thanks in advance for your attention and help!

2

Not really sure what you're expecting ... but for a morph within Hype it'll needs its paths.

you could use an chart-library like billboard or if the chart is quite simple use svg.js. its polylione can be animated to new points using the plot-method

1 Like
3

Hello @h_classen,

something very similar to this, although in my case I don't have vector shapes...

Thank you for the suggestions, but in this case I don't have the values ​​that determine the curve of the graph, I only have the graph in the form of a closed image :slightly_frowning_face:

4

no imagemorphing within Hype.
you may google for a js-library supporting it ...

5

thank you for the feedback @h_classen :+1:

6

I found this suggestion, but not understanding much about programming, I don't really understand if it can actually help me to obtain the desired morphing ...

I have only created the SVG files of the 4 graphics, but for everything else I have no idea how to proceed. :confused:

Some advice? Thanks :pray:

7

anyway ... you should post an exampledocument along with the explanation.
who should know what exactly you are trying to do :slight_smile: ?

btw. the provided link targets an old project that is not maintained any more ...

8

Just recreate the graph as a vectorshape and than use relative timelines as morph targets... if recreation is not option than blend them into each other. You would have to bump the zIndex of the image fading in to a high number to have it infront … this can be done using the API.

9

Here is a demo using JavaScript to fade in a container or image for that matter using a selector. The selector is defined as a dataset key: fadeInContainer.hype.zip (17,8 KB)

10

Here is a version that rembers what was clicked last and disallows fadeing in based on the same trigger element. Also, using the class "initalButton" sets the button inital assumed to have been clicked: fadeInContainerWithInitialAndStore.hype.zip (18,4 KB)

Another approach based on "morphing" is Scene Magic 2.0. It doesn't support vector shape morphing but might also be interessting: Hype Custom Transitions (and Template)

1 Like
11

Hello @h_classen,

unfortunately I cannot because the images are confidential materials of the client :slightly_frowning_face:

12

Maybe I managed to get what I wanted by simplifying the original idea: I recreated the curve of the graph in Hype and only to this I applied the morphing.

Then I recreated the other elements overlapping the line (circles and triangles) separately in Hype and changed their left and upper origin so that they coincide with each "frame" of the graph.

I still have to fix some placements, but the result already looks good to me :+1:

Thanks for all the advice!

2 Likes