Question

我正在使用famo.us示例中的DeviceView来让使用台式机/笔记本电脑的人能够设想应用在手机上的外观。我不得不从famo.us网站上提取DeviceView.js和支持图片。我现在有一个手机的2D图像，屏幕上有一个表面，我可以做任何我想做的事情，现在我想在右边做一个小的“操纵杆”，我可以用来做两件事：

当操纵杆移动时，我希望DeviceView以3维旋转，因此它实际上就像设备在旋转
向我的famo.us代码发送信号以调整视差效果的应用层

对我来说困难的部分是＃1，因为我不知道如何让这个2D图像在3D空间中旋转。有没有famo.us转换？如果我可以拍摄图像并挤出到Z维度，它看起来像3D对象，那也很棒。

有人可以帮忙吗？

Answer 1

很酷的想法。

我编辑了hello-famous example中的代码，您应该可以复制和粘贴。

var Engine        = require('famous/core/Engine');
var Surface       = require('famous/core/Surface');
var Transform     = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing        = require('famous/transitions/Easing');
var Lightbox      = require('famous/views/Lightbox');
var DeviceView    = require('./DeviceView');

var mainContext = Engine.createContext();

// Set perspective
mainContext.setPerspective(1000);

var device, lightbox;
var slides = [];
var index = 0;

var RotatorX = new StateModifier();
var RotatorY = new StateModifier();
var RotatorZ = new StateModifier();

function joyStickMovedUpDown(positionX) {
    RotatorX.setTransform(new Transform.rotateX(positionX));   
}

function joyStickMovedLeftRight(positionY) {
    RotatorY.setTransform(new Transform.rotateY(positionY));
}
function spin(positionZ) {
    RotatorZ.setTransform(new Transform.rotateZ(positionZ));
}
// Hook this up to your joystick movement
joyStickMovedUpDown(0.9);
joyStickMovedLeftRight(0.3)
spin(0.25);

var lightboxOptions = {
  inOpacity: 1,
  outOpacity: 1,
  inTransform: Transform.translate(320,0, 0),
  outTransform: Transform.translate(-320, 0, 1),
  inTransition: { duration: 400, curve: Easing.outBack },
  outTransition: { duration: 150, curve: Easing.easeOut }
};

createDevice();
createSlides();
createLightbox();

function createDevice() {
  var deviceOptions = {
    type: 'iphone',
    height: window.innerHeight - 100
  };

  device = new DeviceView(deviceOptions);

  var deviceModifier = new StateModifier({
    size: device.getSize(),
    origin: [0.5, 0.5]
  });

  // Add rotators
  mainContext.add(deviceModifier).add(RotatorY).add(RotatorX).add(RotatorZ).add(device);
}

function createSlides() {
  var slideContent = [
    '<img src="http://launch.famo.us/fu-assets/hello/slide1.png" width="100%">',
    '<img src="http://launch.famo.us/fu-assets/hello/slide2.png" width="100%">',
    '<img src="http://launch.famo.us/fu-assets/hello/slide3.png" width="100%">'];

  var background = new Surface({
    properties: {
      backgroundColor: '#FA5C4F'
    }
  });

  device.add(background);

  for (var i = 0; i < slideContent.length; i++) {
    var slide = new Surface({
      content: slideContent[i],
      properties: {
        color: 'white',
        lineHeight: '200%',
        textAlign: 'center',
        fontSize: '36px',
        cursor: 'pointer'
      }
    });

    slide.on('click', showNextSlide);

    slides.push(slide);
  }
}

function createLightbox() {
  lightbox = new Lightbox(lightboxOptions);
  device.add(lightbox);
  lightbox.show(slides[0]);
}

function showNextSlide() {
  index++;
  if(index >= slides.length) index = 0;
  lightbox.show(slides[index]);
}

famo.us：从桌面Web浏览器模拟Parallax

1 个答案: