Свертывание
Кроме столь распространенных эффектов скольжения и проявления/исчезновения, не менее часто используются эффекты свертывания и развертывания, для реализации которых также имеются отдельные функции. Принцип их использования не будет для вас новым. Они принимают практически те же самые аргументы.
Ниже следует еще один набор примеров для этой главы, основу которого составляет пример 8.4.
Пример 8.4. Сворачивание узла
<html>
<head>
<title>Animation Station</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css";
.box {
width : 200px;
height : 200px;
textYalign : center;
float : left;
position : absolute;
margin : 5px;
}
</style>
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dojo.fx");
dojo.addOnLoad(function() {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.fx.wipeOut({
node:box
}).play();
});
});
</script>
</head>
(body)
<div class="box">Now you don't</div>
<div id="box" style="background : blue" class="box">
Now you see me...
</div>
(/body)
</html>
Как и в прежнем примере, может оказаться интересным эксперимент с нестандартной переходной функцией. Подставьте нашу ранее подготовленную немонотонную переходную функцию и получите «пружинистый» эффект внесением следующих изменений в addOnLoad:
dojo.addOnLoad(function() {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.fx.wipeOut({
node:box,
easing : function(x) { return Math.pow(Math.sin(4*x),2); },
duration : 5000
}).play();
});
});
Поскольку возвращаемые значения переходной функции то увеличиваются, то уменьшаются, то опять увеличиваются, объект _Animation, используемый функцией wipeOut, соответствующим образом изменяет высоту узла.
Комментарии:
Нету комментариев для вывода...