并发修饰语导致famo.us中的巨大表面颤抖

Question

我的目标是通过使用多个修饰符来模拟透视模式下的Z平移。我不能只使用表面的z平移，因为翻译表面的文本变得模糊（至少在Chrome上，但在其他浏览器上）。我在博客中解释了使用并发修饰符的想法：https://ozinchenko.wordpress.com/2015/02/04/how-to-avoid-blurring-of-the-text-in-famo-us-during-transition-in-z-direction/

因此，我希望在Z方向表面上进行平滑平移，并使用平滑的文本缩放。

codepen代码在这里： 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});
    });

为什么我会震动图像？如何避免？

Answer 1

在设置曲面大小时，StateModifier正在改变曲面的大小。因为您正在处理曲面的大小，所以无需更改（设置）StateModifier以进行缩放。我不确定你的方法会在所有情况下都能解决，但这会回答你的问题。

这是一个新的translateZ函数：

  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);
  }