javascript - 如何将 border-radius 等 css 属性与可转换对象一起使用

Question

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

1. 我是否遗漏了什么，或者这实际上是不可能的？
2. 这在路线图中吗？
3. 如果以上两个答案都是“否”，是否有一种我没有想到的巧妙方法可以做到这一点？

谢谢!!

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);

希望对你有帮助!