在Famo.us中转换颜色(或非转换/不透明度CSS属性）的正确方式

Proper way to transition color (or non-transform/opacity CSS properties) in Famo.us?

本文关键字：转换 属性 CSS 不透明度 方式 us Famo 颜色      更新时间：2023-09-26

我正试图在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之类的东西。有更好的方法吗？

最好的方法是使用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);

修正了：在两个曲面的末尾都添加了缺失的括号。push（…）调用。

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

在曲面的渲染方法中执行此操作，该方法在每个渲染记号上都会调用。请记住返回渲染等级库（等级库id）。

不要使用字符串或十六进制值来表示颜色，而是使用接受数值的rgb（）或rgba（）。数值是使用get方法从可转换对象中获得的。

在"点击"事件处理程序中使用Transitionable的set方法切换数值。

在设置平滑动画效果的"可过渡"值（持续时间和缓和曲线）时，请记住传递tween选项。

这是代码：

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/

相关文章：