В famo.us вращение ImageSurface вызывает мерцание

Я пытаюсь повернуть изображение по оси 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' }
);

Любая помощь будет оценена по достоинству.


rotation famo.us
person Prabhakar Peri    schedule 16.06.2014    source источник
comment
Какой у вас производитель/версия браузера?   -  person Kraig Walker    schedule 27.06.2014

Ответы (2)


arrow_upward
0
arrow_downward

Вы имеете в виду мерцание строк слева и справа? Это связано с тем, как браузер/графический процессор применяет трехмерное преобразование перспективы к изображению, но на самом деле не имеет ничего общего с famo.us. Используемое изображение имеет размер 505 x 499 пикселей. Попробуйте изменить его размер с помощью графической программы до 200x200 и посмотрите, получится ли у вас лучше.

person IjzerenHein    schedule 28.06.2014
comment
А как насчет того, что что-то находится немного впереди чего-то другого по оси Z, но все равно иногда мерцает и хаотично уходит за объект? Знаете какие-нибудь решения? Я пытаюсь переместить две поверхности вместе в пространстве, одну немного впереди другой, но иногда она отображается позади. Знаешь что я имею ввиду? - person trusktr; 13.10.2014

arrow_upward
0
arrow_downward

Проблема в том, что вращающийся элемент находится слишком близко к фону и пересекает его. Если вы расположите вращающуюся поверхность достаточно далеко по оси Z, мерцание обязательно исчезнет.

Попробуйте что-то вроде этого:

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

П.Д.: Извините за мой плохой английский...

person jarios    schedule 13.10.2014