search

google / marzipano

A 360° media viewer for the modern web.
http://www.marzipano.net
Apache License 2.0
1.99k stars 995 forks source link

How to implement transitions similar to KRPano #236

Open campmdabt opened 5 years ago

campmdabt commented 5 years ago

We're migrating from KRPano to Marzipano since it's soooo much easier to develop on top of. Thanks for the hard work.

We've currently got a complex transition between different design options for some of our tours (use the option buttons on the left to switch).

Any ideas on how to implement here? We're currently using the KRPano blend transition animation SLIDEBLEND(0.7, 145.0, 0.1, linear), but I'm afraid Marzipano isn't really setup for that kind of transition out of the box.

tjgq commented 5 years ago

Have you taken a look at the transitions demo? (code, live version)

In general, any transition that combines alpha blending with a viewport scaling or translation can be implemented as shown there.

campmdabt commented 5 years ago

Yes sir, I've taken a look at the demo and the code. The specific issues I don't see a solution for how to implement would be a diagonal transition line instead of a vertical or horizontal line, and a thin area of opacity fade along that line rather than the entire layer.

On Tue, Apr 9, 2019, 11:36 PM Tiago Quelhas notifications@github.com wrote:

Have you taken a look at the transitions demo? (code https://github.com/google/marzipano/blob/master/demos/transitions/index.js, live version http://www.marzipano.net/demos/transitions/index.html)

In general, any transition that combines alpha blending with a viewport scaling or translation can be implemented as shown there.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/google/marzipano/issues/236#issuecomment-481520349, or mute the thread https://github.com/notifications/unsubscribe-auth/AOm0KR0-uJ8gw4lUWwm4ZsZlA4EhIN72ks5vfVwmgaJpZM4ckmRt .

jordyno commented 5 years ago

I second this, would be nice to have layer transitions at an angle with blurred edge of the transitioning layer. I am curious how we could achieve similar effect.

tjgq commented 5 years ago

Transitions are implemented through a combination of primitives. Currently there are primitives for opacity, translation/scaling (aka rect), and a general color matrix transform. This effect would require a new primitive that sets the opacity as a function of the x/y screen coordinates.