用着名的框架动画模糊 [英] Animating blur with the famous framework
问题描述
有谁知道我会使用什么修饰符来动画项目的模糊属性?我想从清晰到一定程度的模糊动画。类似于:
Does anyone know what Modifier I would use to animate the blur properties of an item? I'd like to animate from clear to a certain level of blur. Something similar to:
.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;
}
我想我总是可以尝试将项目上的类改为上面的,我只是想知道是否有一个Modifier用于这样做?
I guess I could always try changing the class on an item to the above, I was just wondering if there was a Modifier for doing this?
推荐答案
目前没有特定的修饰符用于动画模糊。这就是说。无论何时你想要一个自定义动画,你都可以使用TweenTransition或Transitionable。这些类允许您在具有指定转换的两个值之间创建曲线。一旦定义了这个,你可以使用.get()获取值并将它们应用到你想要的任何属性。
There is currently no specific modifier for animating blur. That being said.. Anytime you want a custom animation, you use TweenTransition or Transitionable. These classes allow you to create a curve between two values with a specified transition. Once this is defined, you can grab the values using .get() and apply them to any property you wish.
这是一个有效的例子..
Here is a working example..
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);
祝你好运!
这篇关于用着名的框架动画模糊的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!