如何使用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); 

希望它有帮助！