动画模糊与着名的框架

Question

有谁知道我将使用什么Modifier来动画模糊属性的项目？我想从清晰到一定程度的模糊动画。类似的东西来：

.blur-out { 
    -webkit-filter: blur(8px); 
    -webkit-transform: scale(1.1, 1.1); 
    opacity: 0.25; 
    -webkit-transition: all 0.25s ease-out; 
    transition: all 0.25s ease-out;  
} 

.blur-in { 
    -webkit-filter: blur(0px); 
    -webkit-transform: scale(1.0, 1.0); 
    opacity: 1.0; 
    -webkit-transition: all 0.25s ease-in; 
    transition: all 0.25s ease-in; 
} 

我想我可以一直尝试改变一个项目的类上面，我只是想知道是否有这样做的一个修改？

Answer 1

目前没有用于动画模糊的特定修饰符。这就是说。任何时候你想要一个自定义的动画，你使用TweenTransition或Transitionable。这些类允许您通过指定的转换在两个值之间创建曲线。一旦这个被定义，你可以使用.get（）获取值并将它们应用到你想要的任何属性。

这里是工作的例子..

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.7 }; 

var context = Engine.createContext(); 

var surface = new Surface({ 
    size: [200,200], 
    properties: { 
    backgroundColor: 'red' 
    } 
}); 

var transitionable; 
var final_pos; 

var blurred = false; 

var blur_from_to = function(i,f,transition){ 

    var initial_pos = i; 
    final_pos = f; 

    transitionable = new Transitionable(initial_pos); 

    transitionable.set(final_pos, transition); 

    Engine.on('prerender', prerender); 
} 

var prerender = function(){ 

    current_pos = transitionable.get(); 

    var blur_string = 'blur('+ current_pos + 'px)'; 

    surface.setProperties({ webkitFilter:blur_string}); 

    if (current_pos == final_pos) { 
    Engine.removeListener('prerender',prerender); 
    }; 
} 

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

    blurred ? blur_from_to(10,0,snap) : blur_from_to(0,10,snap) ; 
    blurred = !blurred; 

}); 

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

祝您好运！