MooTools教程(11):Fx.Morph、Fx选项和Fx事件

作者佚名技术来源网页制作浏览发布时间 2012-03-07

transition（过渡效果）

最后一个选项：transition，可以让你决定过渡类型。例如，它是不是一个平滑的过渡或者它应该先慢慢开始然后加速直到结束。看看这些在MooTools的核心库里可以用的过渡效果：

参考代码： [复制代码] [保存代码]

var tweenObject = new Fx.Tween(tweenElement, {
transition: ''quad:in''
});

注意：第一个过渡条在开始时触发了一个红色的醒目效果，在结束时触发了一个橙色的醒目效果。看看下面是怎么使用Fx的事件的。

这上面30个过渡类型可以分成十组：

Quad
Cubic
Quart
Quint
Expo
Circ
Sine
Back
Bounce
Elastic

每一个组都有三个选项：

Ease In
Ease Out
Ease In Out

Fx的事件

Fx的事件使得你在动画效果的执行过程中，在不同的点执行一些代码。在创建用户反馈信息时这会很有用，这也给了你另一层控制权来控制你的渐变和形变：

onStart——当Fx开始时触发
onCancel——当Fx取消时触发
onComplete——当Fx完成时触发
onChainComplete——当Fx链完成时触发

当你建立一个渐变或者形变时，你可以设置这其中的一个事件，就像你设置一个或多个选项一样，不过不是设置一个值，而是设置一个函数：

参考代码： [复制代码] [保存代码]

// 首先我们把一个新的Fx.Tween赋值给一个变量
// 然后定义我们要渐变的元素
quadIn = new Fx.Tween(quadIn, {
// 这里是一些选项
link: ''cancel'',
transition: ‘quad:in’,
// 这里是一些事件
onStart: function(passes_tween_element){
// 这些事件都会传递渐变的对象
// 因此当动画开始时
// 这里我们调用一个"highlight"效果
passes_tween_element.highlight(''#C54641'');
},
// 注意这个逗号是怎样始终出现在每个事件和选项之间的
// 但是最后一个事件或者选项后面没有
onComplete: function(passes_tween_element){
// 在结束时，我们再应用一个highlight效果
passes_tween_element.highlight(''#C54641'');
}
});

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: rails制作rss feed下一篇: javascript变量作用域在不同浏览器的处理

关于MooTools教程(11):Fx.Morph、Fx选项和Fx事件的所有评论

随机推荐