0

My goal is to mimic Z-translation in perspective mode by using multiple modifiers. I can not use just z-translation of a surface because a text of translated surface became blurred (at least at Chrome but also on another browsers). The idea of using concurrent modifiers is explained in my blog: https://ozinchenko.wordpress.com/2015/02/04/how-to-avoid-blurring-of-the-text-in-famo-us-during-transition-in-z-direction/

As a result I want to have smooth translation in Z direction surface with a smooth text scaling.

the codepen code is here: http://codepen.io/Qvatra/pen/yyPMyK?editors=001

var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var ImageSurface = famous.surfaces.ImageSurface;
var ContainerSurface = famous.surfaces.ContainerSurface;
var View = famous.core.View;
var Entity = famous.core.Entity;
var Modifier = famous.core.Modifier;
var StateModifier = famous.modifiers.StateModifier;
var Transform = famous.core.Transform;
var Transitionable = famous.transitions.Transitionable;
var TransitionableTransform = famous.transitions.TransitionableTransform;
var Easing = famous.transitions.Easing;
var Scrollview = famous.views.Scrollview;

    var perspective = 1000;
    var fontValue = 100;      //initially font-size is 100%
    var surfSize = [100,100];

    var mainContext = Engine.createContext();
    mainContext.setPerspective(perspective);
    var transitionable = new Transitionable(0);

    var mySurface = new Surface({
        size: surfSize,
        properties: {
            backgroundColor: 'red',
            textAlign: 'center',
            color: 'white',
            fontSize: fontValue + '%',
            lineHeight: surfSize[1] + 'px'
        },
        content: 'Click Me'
    });
    var transitionModifier = new StateModifier({
        origin: [.5, .5],
        align: [.5, .5],
        transform: Transform.translate(0,0,0.01)
    });
    mainContext.add(transitionModifier).add(mySurface);

    function translateZ(dist, transition) {
        transitionable.reset(0); 
        transitionable.set(dist, transition);

        function prerender() {
            var currentDist = transitionable.get(); 
            //perspective formula: dist = perspective(1 - 1/scaleFactor)
            var currentScale = 1 / (1 - currentDist / perspective);
            var currentSize = [surfSize[0] * currentScale, surfSize[1] * currentScale]; 
            var currentFontValue = fontValue * currentScale;  

            //f.e: bring closer => make projection scaleFactor times bigger
            var transitionTransform = Transform.translate(0,0, currentDist); 
            //scaling back to avoid text blurring           
            var scaleTransform = Transform.scale(1/currentScale, 1/currentScale, 1);                 
            transitionModifier.setTransform(Transform.multiply(transitionTransform, scaleTransform));

            mySurface.setSize(currentSize); //resize to get correct projection size                                                  
            mySurface.setOptions({          
                properties:{
                    fontSize: currentFontValue + '%', //resizing font;                                               
                    lineHeight: currentSize[1] + 'px' //align text;                                                  
                }
            })

            if (currentDist === dist) {
                Engine.removeListener('prerender', prerender);
            }
        }

        Engine.on('prerender', prerender);
    }

    Engine.on('click', function() {
        translateZ(750, {curve: 'easeOutBounce', duration: 2000});
    });

Why do I have the shaking of the image? How to avoid that?

31415926
  • 3,811
  • 7
  • 47
  • 78

1 Answers1

0

The StateModifier is changing the size of your surface while you are setting the size of the surface. Because you are handling the size of the surface, there is no need to change (set) the StateModifier to scale. I am not sure your method will hold up in all cases, but this answers your question.

Here is a new translateZ function:

  function translateZ(dist, transition) {
    transitionable.reset(0); 
    transitionable.set(dist, transition);

    function prerender() {
      var currentDist = transitionable.get(); 
      //perspective formula: dist = perspective(1 - 1/scaleFactor)
      var currentScale = 1 / (1 - currentDist / perspective);
      var currentSize = [surfSize[0] * currentScale, surfSize[1] * currentScale]; 
      var currentFontValue = fontValue * currentScale;  

      mySurface.setSize(currentSize); //resize to get correct projection size                                                    
      mySurface.setOptions({          
        properties:{
          fontSize: currentFontValue + '%', //resizing font;                                                 
          lineHeight: currentSize[1] + 'px' //align text;                                                
        }
      })

      if (currentDist === dist) {
        Engine.removeListener('prerender', prerender);
      }
      console.log('trans')
    }

    Engine.on('prerender', prerender);
  }
Community
  • 1
  • 1
talves
  • 13,993
  • 5
  • 40
  • 63
  • This is not what I need. As a result I want to get translated in direction z surface with not blurred text. Your function doesn't translate the surface at all. Theoretically my solution should not tremble because I calculate exact size and exact matrix in each tick of the engine and I use the same transition. And I don't think that rounding errors could cause such big trembling. – 31415926 Feb 06 '15 at 20:03
  • Did you try the function change? The reason you have the tremble is because you are transitioning the modifier and resizing the surface at the same time. If you run the function change for `translateZ` you will see the tremble stop. – talves Feb 06 '15 at 22:54
  • what is "the function change"? – 31415926 Feb 06 '15 at 23:06
  • The function `translateZ` above. – talves Feb 07 '15 at 01:09
  • Sure I tried it but there is no translation in z direction. btw using just transitionTransform VS scaleTransform gives no trembling but we modifying the size of projection by 2 transforms. So I expect to see the same result using, lets say, scale vs setSize transforms – 31415926 Feb 07 '15 at 12:53