Question

我试图沿着它的Y轴旋转图像，原点设置为图像的中心。但是，旋转动画会导致闪烁。我尝试在famo.us教程中做同样的事情，也可以在那里看到相同的内容。以下是教程中修改后的代码。教程链接：http://famo.us/university/famous-101/animating/2/ 访问此页面并使用以下代码替换其中的代码。简单的变化是，我使用ImageSurface而不是Surface并应用了rotateY。

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var ImageSurface = require('famous/surfaces/ImageSurface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');

var mainContext = Engine.createContext();
var imgSurface = new ImageSurface({
  content: 'http://www.wpclipart.com/recreation/games/card_deck/cards_symbols/playing_card_symbols.png',
  size: [200, 200]
});

var surface = new Surface({
  size: [100, 100],
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

var stateModifier = new StateModifier({origin: [0.5, 0.5]});

mainContext.add(stateModifier).add(imgSurface);

// stateModifier.setTransform(
//   Transform.translate(50, 10, 0),
//   { duration : 1000, curve: 'easeInOut' }
// );

stateModifier.setTransform(
  Transform.rotateY(-Math.PI/4),
  { duration : 5000, curve: 'easeInOut' }
);

任何帮助都将不胜感激。

Answer 1

你的意思是左右两侧的线条闪烁吗？这与浏览器/ GPU如何在图像上应用3d透视变换有关，但与famo.us无关。您使用的图像大小为505 x 499像素。尝试使用图形程序将其调整为200x200，看看是否会获得更好的效果。

Answer 2

问题是旋转元件太靠近背景并与之相交。如果将旋转表面放置在z轴上足够远，则闪烁肯定会消失。

尝试这样的事情：

mainContext.add(new Modifier({transform: Transform.translate(0,0,100)})).add(stateModifier).add(imgSurface);

P.D：抱歉我的英语不好......

在famo.us中，旋转ImageSurface会导致闪烁

2 个答案: