0

我试图让一个正方形在 Famo.us 中单击时更改颜色，并带有过渡。我目前正在使用 CSS 类：

var square = new Surface({
  size: [200, 200],
  content: 'Hello.',
  properties: {
    lineHeight: '200px',
    textAlign: 'center'
  }
});

square.on('click', function() {
  square.addClass('active');
});

以及样式（用 Stylus 编写）：

.famous-container
  .famous-surface
    background: rgba(200, 200, 200, 0.5)

    transition: background 0.3s ease

    &.active
      background: rgba(200, 255, 200, 0.5)

感觉不对，而且我无法利用 Snap/SpringTransition 之类的东西。有没有更好的办法？

4

2 回答 2

2

最好的方法是使用 RenderController 对象。

RenderController 允许您使用您选择的过渡隐藏和显示不同的可渲染项目。

查看在 Famo.us Github 帐户下发布的这个示例（为您稍作修改）。

https://github.com/Famous/examples/blob/master/src/examples/views/RenderController/example.js

var Engine           = require("famous/core/Engine");
var Modifier         = require("famous/core/Modifier");
var Surface          = require("famous/core/Surface");
var RenderController = require("famous/views/RenderController");

var mainContext = Engine.createContext();
var renderController = new RenderController();
var surfaces = [];
var counter = 0;

surfaces.push(new Surface({
     content: "Surface 1",
     size: [200, 200],
     properties: {
         backgroundColor: "green",
         lineHeight: "200px",
         textAlign: 'center'
     }
}));

surfaces.push(new Surface({
     content: "Surface: 2",
     size: [200, 200],
     properties: {
         backgroundColor: "red",
         lineHeight: "200px",
         textAlign: 'center'
     }
}));

renderController.show(surfaces[0]);

Engine.on("click", function() {
    var next = (counter++ + 1) % surfaces.length;
    this.show(surfaces[next]);
}.bind(renderController));

mainContext.add(new Modifier({origin: [.5, .5]})).add(renderController);

已修复：在两个surfaces.push(...) 调用的末尾添加了缺少的括号。

于 2014-04-16T18:42:08.903 回答
0

我能想到的最简单的方法是使用 Surface 的 setProperties 方法更新 backgroundColor。

在 Surface 的渲染方法中执行此操作，该方法在每个渲染滴答时调用。请记住返回渲染规范（规范 ID）。

不要使用字符串或十六进制值来表示颜色，而是使用接受数字值的 rgb() 或 rgba()。数值是使用 get 方法从 Transitionable 对象中获取的。

在“click”事件处理程序中使用 Transitionable 的 set 方法切换数值。

请记住在设置可转换值（持续时间和缓动曲线）时传递补间选项以获得平滑的动画效果。

这是代码：

var bgColorRed = new Transitionable(0);
var bgColorGreen = new Transitionable(255);
var bgColorBlue = new Transitionable(0);

var colorTweenTime = 500;

var clicked = false; 

var square = new Surface({
  size: [200, 200],
  content: 'Hello.',
  properties: {
    lineHeight: '200px',
    textAlign: 'center'
  }
});

square.render = function() {
    var red = Math.ceil(bgColorRed.get()),
        green = Math.ceil(bgColorGreen.get()),
        blue = Math.ceil(bgColorBlue.get());

    this.setProperties({
        backgroundColor: 'rgb(' + red + ', ' + green + ', ' + blue + ')'
    });

    return this.id;
};

square.on('click', function() {
    if (clicked) {
        bgColorRed.set(0, { duration: colorTweenTime, curve: 'easeIn' });
        bgColorGreen.set(255, { duration: colorTweenTime, curve: 'easeIn' });
    } else {
        bgColorRed.set(255, { duration: colorTweenTime, curve: 'easeIn' });
        bgColorGreen.set(0, { duration: colorTweenTime, curve: 'easeIn' });
    }
    clicked = !clicked;
});

jsFiddle 在这里可用：http: //jsfiddle.net/mcr85/6fx9jo9e/

于 2014-09-15T09:36:25.657 回答