使用著名的框架制作模糊动画

Question

有人知道我会用什么修改器来设置项目模糊属性的动画吗？我想设置从清晰到一定程度模糊的动画。类似于：

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

祝你好运！