動畫模糊與着名的框架

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

祝您好運！