Question

我已经浏览了所有的文档，指南和famo.us大学。我得到了所有的概念，但似乎famo.us只允许在可渲染的一小部分属性上使用可转换。

我有什么遗漏，或者这实际上是不可能的？
这是路线图吗？
如果上述两个答案都不是，那么我有没有想到的聪明方法呢？

谢谢！

Answer 1

CSS属性对于浏览器呈现速度缓慢，并且无法利用制作Famo.us，Famo.us的任何GPU增强功能。话虽这么说，我建立了我之前称之为PropertyTransitionable的东西。它只是管理CSS属性上的可转换的包装器。这是演示/代码的链接。

http://famousco.de/2014/07/transition-button-ripple-effect/

如果链接发生变化，这里就是一个工作示例。

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
var Transitionable = require('famous/transitions/Transitionable');
var SnapTransition = require('famous/transitions/SnapTransition');

Transitionable.registerMethod('snap', SnapTransition);

var snap = {
    method: 'snap',
    period: 400,
    dampingRatio: 0.1
};
var snap2 = {
    method: 'snap',
    period: 200,
    dampingRatio: 1
};

var context = Engine.createContext();

function PropertyTransitionable() {
    this._trans = {};
    this._fns = {};
    this._renders = {};
}

PropertyTransitionable.prototype.constructor = PropertyTransitionable;

PropertyTransitionable.prototype.registerProperty = function (property, initial, fn) {
    this._fns[property] = fn;
    this._trans[property] = new Transitionable(initial);

    var propertyUpper = 'set' + property[0].toUpperCase() + property.substr(1);

    this[propertyUpper] = function (object, value, transition, callback) {

        var existing = this._renders[property];

        if (existing) Engine.removeListener('prerender', existing);

        this._renders[property] = function () {
            var currentPos = this._trans[property].get();
            var calculated = this._fns[property](currentPos);
            var properties = {};

            properties[property] = calculated;

            object.setProperties(properties);
        }.bind(this);

        this._trans[property].halt();

        this._trans[property].set(value, transition, function () {
            Engine.removeListener('prerender', this._renders[property]);
            if (callback) callback();
        }.bind(this));

        Engine.on('prerender', this._renders[property]);
    }.bind(this);
};

PropertyTransitionable.DEFAULT_OPTIONS = {};

var surface = new Surface({
    size: [200, 200],
    content: 'Click me!',
    properties: {
        backgroundColor: 'rgb(0,255,0)',
        fontSize: "14px",
        lineHeight: "190px",
        fontFamily: "arial",
        textAlign: 'center',
        webkitUserSelect: 'none'
    }
});

var state = false;

var propertyTransitionable = new PropertyTransitionable();

propertyTransitionable.registerProperty('borderRadius', 0, function (value) {
    return Math.round(value) + '%';
});


propertyTransitionable.registerProperty('border', 0, function (value) {
    return Math.round(value) + 'px solid black';
});

propertyTransitionable.registerProperty('backgroundColor', 0, function (value) {
    var rounded = Math.round(value);
    return 'rgb(' + rounded + ',' + (255 - rounded) + ',0)';
});

propertyTransitionable.registerProperty('boxShadow', 0, function (value) {
    var rounded = Math.round(value);
    var string = '0px ' + rounded + 'px ' + rounded + 'px rgba(0,0,0,0.5), ';
    string += 'inset 0px ' + rounded + 'px ' + rounded + 'px rgba(255,255,255,0.5), ';
    string += 'inset 0px ' + -rounded + 'px ' + rounded + 'px rgba(0,0,0,0.5)  ';
    return string;
});

propertyTransitionable.registerProperty('fontSize', 14, function (value) {
    return Math.round(value) + 'px';
});

propertyTransitionable.registerProperty('color', 0, function (value) {
    var rounded = Math.round(value);
    return 'rgb(' + rounded + ',' + rounded + ',' + rounded + ')';
});

surface.on('click', function () {

    if (state) {
        propertyTransitionable.setBorderRadius(surface, 0, snap2);
        propertyTransitionable.setBorder(surface, 0, snap2);
        propertyTransitionable.setBackgroundColor(surface, 0, snap2);
        propertyTransitionable.setBoxShadow(surface, 0, snap2);
        propertyTransitionable.setFontSize(surface, 14, snap2);
        propertyTransitionable.setColor(surface, 0, snap2);
    } else {
        propertyTransitionable.setBorderRadius(surface, 50, snap);
        propertyTransitionable.setBorder(surface, 8, snap);
        propertyTransitionable.setBackgroundColor(surface, 255, snap);
        propertyTransitionable.setBoxShadow(surface, 20, snap);
        propertyTransitionable.setFontSize(surface, 36, snap);
        propertyTransitionable.setColor(surface, 255, snap);
    }

    state = !state;
});

context.add(new StateModifier({
    origin: [0.5, 0.5]
})).add(surface);

希望它有所帮助！

如何使用带可转换的border-radius等css属性

1 个答案: