Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animating between screens in Nativescript

Can someone please point me in the right direction to achieving this effect in both Android and iOS application, https://www.cocoacontrols.com/controls/pinterestanimator. Not necessarily this effect, but you will notice that the transition between two screens (list and details) is animated in non standard way (image enlarges).

The idea is to execute an animation between two screens, so that upon animation finish, the route is changed, backend service kicks in, etc. Not sure if I am expressing myself right, but how do I "swap" native screens transitions, with a custom animation? And doing this on case by case basis, not as a general rule to all transitions.

I am using Angular2 and Nativescript.

--

Edit: It is fine if the solution above seems like a hack, it doesn't have to be supported out of the box. To clarify, is it anyhow possible to:

  1. capture and prevent default click action, thus preventing the native transition

  2. animate the view

  3. update the route programatically

  4. execute the previously prevented action (call ngOnInit, or similar)

like image 450
nbo Avatar asked Aug 10 '26 09:08

nbo


1 Answers

The page transitions can not be fully customized and currenтly you can only apply native transitions as the following listed in this API reference

curl (same as curlUp) (iOS only)
curlUp (iOS only)
curlDown (iOS only)
explode (Android Lollipop(21) and up only)
fade
flip (same as flipRight)
flipRight
flipLeft
slide (same as slideLeft)
slideLeft
slideRight
slideTop
slideBottom

Notice that some of the transitions (like curl) are supported only by iOS and others (like explode) are supported only by Android. Here is the documentation article about page transitions in Angular enabled application.

like image 171
Nick Iliev Avatar answered Aug 13 '26 00:08

Nick Iliev