В famo.us , поворот поверхности изображения вызывает мерцание

#rotation #famo.us

#поворот #famo.us

Вопрос:

Я пытаюсь повернуть изображение вдоль его оси Y, при этом начало координат установлено в центр изображения. Но анимация поворота приводит к мерцанию. Я попытался сделать то же самое в famo.us учебные пособия и могли бы увидеть то же самое и там. Ниже приведен измененный код в руководстве. Ссылка на учебное пособие: http://famo.us/university/famous-101/animating/2 / Посетите эту страницу и замените код на ней следующим. Вкратце, я использую поверхность изображения вместо поверхности и применяю поворотный режим.

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

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

Ответ №1:

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

1. Что делать, когда что-то находится немного впереди чего-то другого по оси Z, но оно все равно иногда будет мерцать и случайным образом заходить за объект? Знаете какие-либо решения? Я пытаюсь переместить две поверхности вместе в пространстве, одна немного впереди другой, но иногда она отображается позади. Понимаете, что я имею в виду?

Ответ №2:

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

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

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

P.D: Извините за мой плохой английский…