我已经阅读了所有文档、指南和 famo.us 大学。我了解了所有概念,但 famo.us 似乎只允许在可渲染属性的一小部分子集上使用可转换属性。
- 我是否遗漏了什么,或者这实际上是不可能的?
- 这在路线图中吗?
- 如果以上两个答案都是“否”,是否有一种我没有想到的巧妙方法可以做到这一点?
谢谢!!
最佳答案
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);
希望对你有帮助!
关于javascript - 如何将 border-radius 等 css 属性与可转换对象一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26122401/