在 Famo.us 中转换颜色（或非转换/不透明度 CSS 属性）的正确方法？答案

【问题标题】：Proper way to transition color (or non-transform/opacity CSS properties) in Famo.us?在 Famo.us 中转换颜色（或非转换/不透明度 CSS 属性）的正确方法？
【发布时间】：2014-09-15 17:36:25
【问题描述】：

我试图让一个正方形在 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 之类的东西。有没有更好的办法？

【问题讨论】：

标签： javascript famo.us

【解决方案1】：

最好的方法是使用 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(...) 调用的末尾添加了缺少的括号。

【讨论】：

在纸上看起来不错，我唯一的反对意见是，如果您使用它来创建一些可切换的按钮/控件，那么您实际上是在使用 2-4 个表面，而通常只有一个表面。著名的复杂 GUI 是否应该由数百个表面组成？（又名，这种方法是否可以充分扩展/执行？）
Hey Theodor.. 是的，再次从性能指南和陷阱中，他们提到了这种情况..“转换颜色值会导致大量的重新绘制，并且性能非常差。要达到类似的效果，请尝试堆叠一些不同颜色的画布元素或 div，然后相应地对它们进行不透明处理。” famo.us/guides/dev/pitfalls.html

【解决方案2】：

我能想到的最简单的方法是使用 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/

【讨论】：