Custom Navigation Animation (fall/drop)



  • no clue how to create custom animations - you mention it here:

    https://onsen.io/guide/overview.html#Transitionanimation

    but when i go to look at the code i have zero idea of how to first NAME my custom animation or link it to the ONSEN js calls?

    how does

    module.factory('FadeTransitionAnimator', ['NavigatorTransitionAnimator', function(NavigatorTransitionAnimator) {})
    

    translate into a call of:

    pushPage('page2.html', {animation: 'fade'})
    

    furthermore, i think alot of people would like a DROP of FALL animation. Exactly like LIFT - but it drops from the top of the viewport rather than from the bottom.

    if you can provide a basic COMPLETE example of how to accomplish this that is TESTED and working, i can go an implement it.

    my stats:
    cordova v6.0.0
    OnsenIO v1.3.14

    THANK YOU VERY MUCH

    -Dan



  • @DirtyRed5789 Dan, check out this thread for more info: http://stackoverflow.com/questions/29115915/how-to-change-slide-direction-for-resettopage/33349225#33349225

    Specifically, copying @Fran-Diox’s post info:

    Basically, you can create a new animator and define it as you need. This is the basic example in OnsenUI repository: https://github.com/OnsenUI/OnsenUI/blob/1.3.14/framework/views/simpleSlideTransitionAnimator.js

    As you can see there, two functions are defined: push and pop animations. resetToPage() uses the “push” animation like pushPage() does, not like popPage(). However, if you just want to invert that, you can create a new animator and define its “push” function exactly the same as the previous “pop” function. You have a quick example here:

    http://codepen.io/frankdiox/pen/azQMZE

    If you change the parameters of the transform functions you will get a different behavior, so you can adapt it as you want. Hope it helps!

    If you need more help than what those examples show, let me know and I can see what I can do.


  • Onsen UI

    @DirtyRed5789

    In the link that @munsterlander posted this is the code that is registering a name for the animator:

    angular.module('onsen').run(function(NavigatorView, reversedSlide) {
      NavigatorView.registerTransitionAnimator('foo', new reversedSlide())
    });
    

    So you can do { animation: 'foo' } or { animation: new reversedSlide() }.
    I agree this should be documented better. We will try to cover this when writing the final docs for Onsen 2.0. Perhaps meanwhile we could write a blog post about it :)

    By the way, @munsterlander , I just edited your post to fix a broken link :sweat_smile: I also updated it on SOF.



  • @Fran-Diox Thank you thank you!



  • This post is deleted!


  • This post is deleted!


  • here is my custom drop if anyone else wants to use it!

    (function() {
        'use strict;';
    
        var module = angular.module('onsen');
    
        module.factory('customDropAnimation', function(NavigatorTransitionAnimator) {
    
            var customDropAnimation = NavigatorTransitionAnimator.extend({
    
                backgroundMask : angular.element(
                    '<div style="position: absolute; width: 100%;' +
                    'height: 100%; background-color: #ffffff;"></div>'
                ),
    
                push: function(enterPage, leavePage, callback) {
                    var mask = this.backgroundMask.remove();
                    leavePage.element[0].parentNode.insertBefore(mask[0], leavePage.element[0]);
    
                    var maskClear = animit(mask[0])
                      .wait(0.6)
                      .queue(function(done) {
                        mask.remove();
                        done();
                      });
    
                    animit.runAll(
                        maskClear,
    
                        animit(enterPage.element[0])
                        .queue({
                            css: {
                                transform: 'translate3D(0, -100%, 0)',
                            },
                            duration: 0
                        })
                        .queue({
                            css: {
                                transform: 'translate3D(0, 0, 0)',
                            },
                            duration: 0.4,
                            timing: 'cubic-bezier(.1, .7, .1, 1)'
                        })
                        .wait(0.2)
                        .resetStyle()
                        .queue(function(done) {
                            callback();
                            done();
                        }),
    
                        // dont move leaving page
                        animit(leavePage.element[0])
                    );
                },
    
                pop: function(enterPage, leavePage, callback) {
                    var mask = this.backgroundMask.remove();
                    enterPage.element[0].parentNode.insertBefore(mask[0], enterPage.element[0]);
    
                    animit.runAll(
    
                      animit(mask[0])
                        .wait(0.4)
                        .queue(function(done) {
                          mask.remove();
                          done();
                        }),
    
                      // dont move entering page
                      animit(enterPage.element[0]),
    
                      animit(leavePage.element[0])
                        .queue({
                          css: {
                            transform: 'translate3D(0, 0, 0)'
                          },
                          duration: 0
                        })
                        .queue({
                          css: {
                            transform: 'translate3D(0, -100%, 0)'
                          },
                          duration: 0.4,
                          timing: 'cubic-bezier(.1, .7, .1, 1)'
                        })
                        .wait(0.2)
                        .resetStyle()
                        .queue(function(done) {
                            callback();
                            done();
                        })
                        
                    );
                }
            });
    
            return customDropAnimation;
        });
    
    })();
    

  • Onsen UI

    @DirtyRed5789 Thanks for sharing :)



  • Thanks i’ll check to my apps. ;)



  • Pretty cool! I just really like how extensible Onsen is!



  • Little update - i was seeing a flicker happen during PAGE PUSH when i was emulating IOS devices with the drop animation. Removing the

    .wait(0.2)
    

    solved it for now…

    push: function(enterPage, leavePage, callback) {
        var mask = this.backgroundMask.remove();
        leavePage.element[0].parentNode.insertBefore(mask[0], leavePage.element[0]);
    
        var maskClear = animit(mask[0])
          .wait(0.6)
          .queue(function(done) {
            mask.remove();
            done();
          });
    
        animit.runAll(
            maskClear,
    
            animit(enterPage.element[0])
            .queue({
                css: {
                    transform: 'translate3D(0, -100%, 0)',
                },
                duration: 0
            })
            .queue({
                css: {
                    transform: 'translate3D(0, 0, 0)',
                },
                duration: 0.4,
                timing: 'cubic-bezier(.47,0,.47,1)'
            })
            // .wait(0.2) -> causes flicker sometimes
            .resetStyle()
            .queue(function(done) {
                callback();
                done();
            }),
    
            // dont move leaving page
            animit(leavePage.element[0])
        );
    },
    

Log in to reply