Native View Transition Animations

tutorials
21

Take a look at my tutorial, I’m globaly already handling back button:

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button class="button-clear" transitiontype="flip" direction="right" go-native>
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

Notice go-native directive in ion-nav-back-button directive.

22

This is not a particularly well rounded work around.

Consider this, what happens when the user presses hardware back button on android phones? Or even more, consider for a particular view you used a transition that is different from the rest of the app and when the user reverts back from that view, you will be left with the default animation.

I think as of now the ideal way is to to this on stateChange events by looking at $ionicHistory state then decide on animations.

23

Of course it’s not a well rounded work around, I’m not going to do your job for you. I gave you a working solution, the best currently available, the rest is on you. Ionic developers may addopt this approach if enough people find it example useful.

Also, If you want to cover additional cases then develp them. Share with the community.

24

I was just suggesting that uses case and asking for opinions. I don’t see anything that even mildly indicates of me asking you to do my job.

I did not say your solution was wrong. I just said there might be better solutions considering the use cases I came around.

25

Sorry, my words may sound harsh, it was not my intention.

Let’s do it like this. Can you provide me with a simple example (or two) of cases not covered with my example and I’ll try to find a solution. Provided example is just a simple solution, nothing else, nothing more.

26

It is possible to intercept the android hardware back button too so it should be possible to trigger the same back information.

I think it will be hard to create a solution that works for all cases with very little code modification but it certainly seems that quite a number of them could be covered.

I would propose it makes sense to focus on globally catching the obvious situations of

list view to > detail view
detail view < list view

Anything else, such as moving from a form submission, running a search, hitting a button etc should likely be left to be handled explicitly because the direction, animation type, filters or expected interaction is most likely to differ in most application types.

So to move that forward that would be:

  • list view > detail view
  • detail view < list view (swipe)
  • detail view < list view (hardware back button)
  • detail view < list view (software / top back button)

I would propose those are the main targets initially.

27

Not sure if I agree with that, on an older device (Galaxy Tab tablet from 2012) performance of an Ionic app without Crosswalk was plain horrible. After adding Crosswalk, performance was passable. Crosswalk really saved me there, I can’t count on every user having a state-of-the-art device.

(performance on a Galaxy S3 from 2014 was fine without Crosswalk)

However I’m surely interested in trying out your native transitions plugin when I have some time. Seeing this thread I’m prepared to run into some issues however (as always) …

1 Like
28

What this solution really needs is the possibility to trigger the screenshot and start of transition-animation separatly by two javascript calls.

at the moment the transition starts after a hardcoded delay, independent of the target view situation.
on slow devices or on a “slow target view” this produces a transition to the same page where the transitions started.
not good.

another solution would be to stay on the old ionic view until the new view was rendered (in the background) and then start the transition of the plugin.

does anyone know if this is possible?

29

Thanks @Gajotres for this amazing tutorial and the directive, it works great ! transitions are smooth as silk :wink:

It seams all telerik plugins are top notch. I already use the WKWebView plugin (https://github.com/Telerik-Verified-Plugins/WKWebView) and it eliminated all memory issues I had with my app. (my app used up to 200MB memory when displaying more then 500 images per view, with the WKWebView plugin my memory consumption is at a stable 6MB and scrolling is super smooth) Maybe you want to have a look at it and probably make a small article for your readers :wink:

While using the Native Page Transition plugin I receive some strange messages in Xcode when running the app in the simulator or on a device. After every native transition I get the following messages:

2015-09-16 17:18:57.710 [2422:781398] Probably running inside a companion app, your app may crash if your html file is not in the root!
2015-09-16 17:18:57.734 [2422:781398] THREAD WARNING: ['NativePageTransitions'] took '18.851807' ms. Plugin should use a background thread.

Did you notice the same messages when you tested the plugin? Is there a fix for this or can I just ignore the messages?

30

This is great. I’m able to see the native transitions, however it does conflict with the ionic transitions, so it doesn’t work all the time. The article recommends adding this line in the config:

$ionicConfigProvider.views.transition(‘none’);

However, after adding the above line in my app.config section, the whole app goes blank, nothing is visible.

What am I missing?

31

I think you should disregard this warning. An earlier version of this plugin had such a problem, but it was solved some time ago. I think this error warning is deprecated plus no one else reported this as a blocking point. Just to be fair, I’m also receiving this warning.

PS. Thanks for sharing this other plugin, I’ll check it out. It’s now in my TODO list, ok more TO CHECK list :smile:

32

Have you tried debugging your app? Are you receiving any errors?

Maybe you’ve forgotten to inject $ionicConfigProvider service?

33

Hi Gajotres,

Actually I do have that injected. Here’s my code:

.config(function($stateProvider, $urlRouterProvider, $cordovaFacebookProvider, $ionicConfigProvider) {
    $ionicConfigProvider.views.transition('none');
    .
    .

Also, I don’t see any errors logged. The only error I see is this, which is because the plugin probably works only on the device:

Uncaught TypeError: Cannot read property 'globalOptions' of undefined
34

Was anybody able to integrate this with hardware back button and $ionicHistory?

35

https://blog.icool.io/native-transition-with-ionic-framework/ check that

36

Hi @Gajotres, thanks for the tutorial.
I was facing the exact same issue with transition made too soon or too late.
Instead of playing with delays, I reversed the logic: it’s the target controller that handle transition.

For instance:

// the target view should be ready
$scope.$on('$ionicView.afterEnter', function() {
      var options = {
        "direction": "left",
        "duration": 500,
        "slowdownfactor": 1,
        "androiddelay": 125
      };
      window.plugins.nativepagetransitions.slide(
        options,
        function () {},
        function () {}
      );
});
37

When you say you reversed the logic - what has actually changed? Does this now work without issue?

38

If we have two page (1 and 2), with a button in the first page which goes to page 2:

  • We won’t write anything about transitions in first page’ controller
    or view.
  • Instead, we’ll catch the $ionicView.afterEnter event in the
    page 2’ controller and launch the transition without delay.

You got it?

39

Almost, so

page 1 has a button
tap on button
starts trying to go to page 2
won’t go to page 2 until the image is ready to do the animation

Is it correct that it should be on after enter rather than before enter?

Maybe I’ll just have to try this :slight_smile:

40

Yup, that’s it. Try it.