0

I'm trying to rotate an image along it's Y axis, with the origin set to center of the image. But, the rotate animation is resulting in flickering. I tried to do the same in famo.us tutorials and could see the same there as well. Following is the modified code in the tutorial. The tutorial link: http://famo.us/university/famous-101/animating/2/ Visit this page and replace the code in it with the following one. The change in brief is, I'm using ImageSurface instead of Surface and applied 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' }
);

Any help would be appreciated.

Prabhakar Peri
  • 29
  • 3

2 Answers2

0

Do you mean the flickering of the lines at the left and right? This has to do with how the browser/GPU applies the 3d perspective transform on the image, but has nothing to do with famo.us really. The image that you are using has a size of 505 x 499 pixels. Try resizing it using a graphics program to 200x200 and see whether you get better results.

IjzerenHein
  • 2,690
  • 1
  • 17
  • 13
  • What about when something is slightly in front of something else in the Z axis, but it will still sometimes flicker and go behind the object randomly? Know any solutions? I'm trying to move two surfaces together through space, one ever so slightly in front of the other, but sometime it renders behind. Know what I mean? – trusktr Oct 13 '14 at 09:15
0

The problem is that the rotating element is too close to the background and intersects it. If you position the rotating surface far enough in the z axis, the flickering, surely disappear.

Try something like this:

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

P.D: Sorry for my bad English...

jarios
  • 101
  • 1