Custom Drop Animation for Onsen 2.5.1 for Angular 1.X



  • Id like an animation for the Navigator that is the opposite of Lift… so a DROP animation.

    Re: Custom Navigation Animation (fall/drop)

    i got the previous example to work when Onsen was pre 2.0 release…

    Now I’m stuck again. I have no idea how to register the new animation so it can be used with the Navigator.

    i found this aberrant CODEPEN that shows how to register a name for an animation - but the resulting animation is always a SLIDE regardless of what i change the animators too.

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

    i have my previous animation code ready - i just need a way to hook into onsen’s navigator for use.

    Please help!
    Thank you
    Dan


  • Onsen UI

    @dirtyred57890 Welcome back! Remember the docs we mentioned in that post? Here. I hope it’s enough :)

    I think you are looking for this step: ons.NavigatorElement.registerAnimator('customAnimationName', customAnimator);



  • thanks for the reply - following the docs i got the animation to successfully drop when PUSHING a page - but i am not successful to get the page to LIFT back up from whence it came on a POP event.

    on a POP event the page simply disappears instantly.

    Here is my code so far - any guidance would be greatly appreciated.

    var dropAnimator = function(options) {
      options = options || {};
    
      this.timing = options.timing || 'ease';
      this.duration = options.duration || 0.4;
      this.delay = options.delay || 0;
    
      var div = document.createElement('div');
      div.innerHTML = '<div style="position: absolute; width: 100%; height: 100%; z-index: 2; background-color: black; opacity: 0;"></div>';
      this.backgroundMask = div.firstChild;
      this.blackMaskOpacity = 0.4;
    };
    
    dropAnimator.prototype = Object.create(ons.NavigatorElement.NavigatorTransitionAnimator.prototype);
    
    dropAnimator.prototype.push = function(enterPage, leavePage, done) {
        this.backgroundMask.remove();
        leavePage.parentNode.insertBefore(this.backgroundMask, leavePage);
    
        const maskClear = ons.animit(this.backgroundMask)
          .wait(this.delay + this.duration)
          .queue(done => {
            this.backgroundMask.remove();
            done();
          });
    
        ons.animit.runAll(
            maskClear,
            ons.animit(enterPage)
              .saveStyle()
              .queue({
                css: {
                  transform: 'translate3D(0px, -100%, 0px)',
                  opacity: 0.9
                },
                duration: 0
              })
              .wait(this.delay)
              .queue({
                css: {
                  transform: 'translate3D(0px, 0px, 0px)',
                  opacity: 1.0
                },
                duration: this.duration,
                timing: this.timing
              })
              .restoreStyle(),
            done()
    
        );
    };
    
    dropAnimator.prototype.pop = function(enterPage, leavePage, done) {
        this.backgroundMask.remove();
        enterPage.parentNode.insertBefore(this.backgroundMask, enterPage);
    
        ons.animit.runAll(
            ons.animit(leavePage)
              .queue({
                css: {
                  transform: 'translate3D(0px, 0px, 0px)'
                },
                duration: 0
              })
              .wait(this.delay)
              .queue({
                css: {
                  transform: 'translate3D(0px, -100%, 0px)'
                },
                duration: this.duration,
                timing: this.timing
              }),
            done()
        );
    };
    
    // register animation name
    ons.NavigatorElement.registerAnimator('drop', dropAnimator);
    

  • Onsen UI

    @dirtyred57890 Two issues:

    • done() is called at a wrong timing.
    • backgroundMask is not correctly removed.

    I made some minor changes here:

    var dropAnimator = function(options) {
      options = options || {};
    
      this.timing = options.timing || 'ease';
      this.duration = options.duration || 0.4;
      this.delay = options.delay || 0;
    
      var div = document.createElement('div');
      div.innerHTML = '<div style="position: absolute; width: 100%; height: 100%; z-index: 2; background-color: black; opacity: 0;"></div>';
      this.backgroundMask = div.firstChild;
      this.blackMaskOpacity = 0.4;
    };
    
    dropAnimator.prototype = Object.create(ons.NavigatorElement.NavigatorTransitionAnimator.prototype);
    
    dropAnimator.prototype.push = function(enterPage, leavePage, callback) {
        this.backgroundMask.remove();
        leavePage.parentNode.insertBefore(this.backgroundMask, leavePage);
    
        ons.animit.runAll(
            ons.animit(enterPage)
              .saveStyle()
              .queue({
                css: {
                  transform: 'translate3D(0px, -100%, 0px)',
                  opacity: 0.9
                },
                duration: 0
              })
              .wait(this.delay)
              .queue({
                css: {
                  transform: 'translate3D(0px, 0px, 0px)',
                  opacity: 1.0
                },
                duration: this.duration,
                timing: this.timing
              })
              .restoreStyle()
              .queue(function(done) {
                this.backgroundMask.remove();
                callback();
                done();
              }.bind(this))
    
        );
    };
    
    dropAnimator.prototype.pop = function(enterPage, leavePage, callback) {
        this.backgroundMask.remove();
        enterPage.parentNode.insertBefore(this.backgroundMask, enterPage);
    
        ons.animit.runAll(
            ons.animit(leavePage)
              .queue({
                css: {
                  transform: 'translate3D(0px, 0px, 0px)'
                },
                duration: 0
              })
              .wait(this.delay)
              .queue({
                css: {
                  transform: 'translate3D(0px, -100%, 0px)'
                },
                duration: this.duration,
                timing: this.timing
              })
              .queue(function(done) {
                this.backgroundMask.remove();
                callback();
                done();
              }.bind(this))
        );
    };
    
    // register animation name
    ons.NavigatorElement.registerAnimator('drop', dropAnimator);
    

    As a side note, there is an easier way to extend animators described here.



  • That works like a charm! Thank you very much - glad to see ONSEN is still kicking butt. Cheers


Log in to reply