add animated folding experiment
This commit is contained in:
Fabian Jakobs
parent
fcf3b7928f
commit
5200776c52
3 changed files with 364 additions and 0 deletions
249
experiments/animate_folding.html
Normal file
249
experiments/animate_folding.html
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!--
|
||||
|
||||
Animate Code Folding Experiment
|
||||
|
||||
Animates closing of folds in Chrome and WebKit. Requires 3D CSS and CSS
|
||||
transitions.
|
||||
|
||||
TODO
|
||||
|
||||
* animate opening
|
||||
* fix closing at the bottom of the file
|
||||
* support folding with closed folds on the screen (rows are off)
|
||||
* support more browsers
|
||||
* speed
|
||||
|
||||
-->
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Editor</title>
|
||||
<style type="text/css" media="screen">
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#editor {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#container {
|
||||
-webkit-transform: scaleZ(0.0000001);
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ace_slide {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
background-image: url(zenbg.png);
|
||||
|
||||
/* ease in sine */
|
||||
-webkit-transition: height 500ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||
|
||||
-webkit-perspective: 2000;
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.ace_anim_slide_top {
|
||||
z-index: -1;
|
||||
background-color: white;
|
||||
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.05) 50%);
|
||||
top: 0;
|
||||
|
||||
-webkit-transition: -webkit-transform 500ms linear;
|
||||
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transform-origin: top;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.ace_anim_slide_bottom {
|
||||
background-color: white;
|
||||
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.05) 100%);
|
||||
bottom: 0;
|
||||
|
||||
-webkit-transition: -webkit-transform 500ms linear;
|
||||
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transform-origin: bottom;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.ace_anim_hidden .ace_anim_slide_top {
|
||||
-webkit-transform: rotateX(-90deg);
|
||||
}
|
||||
|
||||
.ace_anim_hidden .ace_anim_slide_bottom {
|
||||
-webkit-transform: rotateX(90deg);
|
||||
}
|
||||
|
||||
.ace_anim_bottom {
|
||||
/* ease in sine */
|
||||
-webkit-transition: top 500ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||
-webkit-transform: scaleZ(0.0000001);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
|
||||
<script src="../build/src/ace-uncompressed.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="../build/src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script id="main">
|
||||
|
||||
window.onload = function() {
|
||||
var editor = ace.edit("editor");
|
||||
|
||||
var JavaScriptMode = require("ace/mode/javascript").Mode;
|
||||
var EditSession = require("ace/edit_session").EditSession;
|
||||
var lang = require("ace/lib/lang");
|
||||
var Range = require("ace/range").Range;
|
||||
editor.getSession().setMode(new JavaScriptMode());
|
||||
editor.getSession().setValue(document.getElementById("main").innerHTML);
|
||||
|
||||
|
||||
function cloneSession(session) {
|
||||
var s = new EditSession(session.getDocument(), session.getMode());
|
||||
|
||||
// Copy over 'settings' from the session.
|
||||
s.setTabSize(session.getTabSize());
|
||||
s.setUseSoftTabs(session.getUseSoftTabs());
|
||||
s.setOverwrite(session.getOverwrite());
|
||||
s.setBreakpoints(session.getBreakpoints());
|
||||
s.setUseWrapMode(session.getUseWrapMode());
|
||||
s.setUseWorker(false);
|
||||
s.setWrapLimitRange(session.$wrapLimitRange.min, session.$wrapLimitRange.max);
|
||||
s.$foldData = session.$cloneFoldData();
|
||||
|
||||
return s;
|
||||
}
|
||||
|
||||
function animateFold(editor, placeholder, range) {
|
||||
var session = editor.getSession();
|
||||
var ed = document.getElementById("editor");
|
||||
var parent = ed.parentNode;
|
||||
|
||||
var clone = ed.cloneNode();
|
||||
var cloneEd = ace.edit(clone);
|
||||
var renderer = cloneEd.renderer;
|
||||
|
||||
cloneEd.setSession(cloneSession(session));
|
||||
cloneEd.setTheme(editor.getTheme());
|
||||
renderer.scrollToY(editor.renderer.getScrollTop());
|
||||
|
||||
parent.appendChild(clone);
|
||||
|
||||
cloneEd.resize();
|
||||
renderer.$size = lang.copyObject(cloneEd.renderer.$size);
|
||||
renderer.layerConfig = lang.copyObject(cloneEd.renderer.layerConfig);
|
||||
renderer.$textLayer.$characterSize = lang.copyObject(editor.renderer.$textLayer.$characterSize);
|
||||
renderer.$textLayer._emit("changeCharaterSize", {data: renderer.$textLayer.$characterSize});
|
||||
|
||||
renderer.$loop.onRender(renderer.$loop.changes);
|
||||
|
||||
// top area
|
||||
var clone2 = clone.cloneNode(true);
|
||||
var topHeight = range.start.row * renderer.lineHeight - renderer.scrollTop
|
||||
clone2.style.height = topHeight + "px";
|
||||
|
||||
parent.appendChild(clone2);
|
||||
|
||||
// middle
|
||||
cloneEd.scrollToRow(range.start.row);
|
||||
renderer.$loop.onRender(renderer.$loop.changes);
|
||||
var middleHeight = (range.end.row - range.start.row) * renderer.lineHeight;
|
||||
|
||||
var slide = document.createElement("div");
|
||||
slide.className = "ace_slide";
|
||||
slide.style.top = topHeight + "px";
|
||||
slide.style.height = middleHeight + "px";
|
||||
|
||||
var clone3 = clone.cloneNode(true);
|
||||
clone3.className += " ace_anim_slide_top";
|
||||
clone3.style.height = middleHeight + "px";
|
||||
slide.appendChild(clone3);
|
||||
|
||||
renderer.scrollToY(renderer.scrollTop + Math.floor(middleHeight / 2));
|
||||
renderer.$loop.onRender(renderer.$loop.changes);
|
||||
|
||||
var clone3 = clone.cloneNode(true);
|
||||
clone3.className += " ace_anim_slide_bottom";
|
||||
clone3.style.top = null;
|
||||
clone3.style.height = (middleHeight / 2) + "px";
|
||||
slide.appendChild(clone3);
|
||||
|
||||
parent.appendChild(slide);
|
||||
|
||||
// bottom
|
||||
cloneEd.scrollToRow(range.start.row)
|
||||
cloneEd.getSession().addFold(placeholder, range);
|
||||
renderer.$loop.onRender(renderer.$loop.changes);
|
||||
|
||||
var clone4 = clone.cloneNode(true);
|
||||
clone4.className += " ace_anim_bottom";
|
||||
clone4.style.top = (topHeight + middleHeight) + "px";
|
||||
parent.appendChild(clone4);
|
||||
|
||||
cloneEd.destroy();
|
||||
parent.removeChild(clone);
|
||||
ed.style.left = "-10000px";
|
||||
|
||||
setTimeout(function() {
|
||||
clone4.style.top = topHeight + "px";
|
||||
slide.style.height = 0;
|
||||
slide.className += " ace_anim_hidden";
|
||||
|
||||
setTimeout(function() {
|
||||
ed.style.left = 0;
|
||||
|
||||
setTimeout(function() {
|
||||
parent.removeChild(clone2);
|
||||
parent.removeChild(slide);
|
||||
parent.removeChild(clone4);
|
||||
}, 0);
|
||||
}, 500);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
var origOnFoldWidgetClick = EditSession.prototype.onFoldWidgetClick;
|
||||
EditSession.prototype.onFoldWidgetClick = function() {
|
||||
|
||||
var orig = EditSession.prototype.addFold;
|
||||
|
||||
EditSession.prototype.addFold = function(placeholder, range) {
|
||||
EditSession.prototype.addFold = orig;
|
||||
animateFold(editor, placeholder, range);
|
||||
this.addFold(placeholder, range);
|
||||
}
|
||||
|
||||
var ret = origOnFoldWidgetClick.apply(this, arguments);
|
||||
|
||||
return ret;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
115
experiments/baisc_animation.html
Normal file
115
experiments/baisc_animation.html
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head profile="http://www.w3.org/2005/10/profile">
|
||||
<title> </title>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
border: 1px solid black;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#top {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
#slide {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 150px;
|
||||
height: 0;
|
||||
background: orange;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-transition: height 5000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
|
||||
-webkit-perspective: 360;
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
#slide-top {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 100px;
|
||||
|
||||
background-color: yellow;
|
||||
/* easeOutSine */
|
||||
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.20) 100%);
|
||||
|
||||
-webkit-transition: -webkit-transform 5000ms linear;
|
||||
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transform-origin: top;
|
||||
-webkit-transform: rotateX(-90deg);
|
||||
}
|
||||
|
||||
.visible #slide-top {
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.visible #slide-bottom {
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
#slide-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
|
||||
background-color: blue;
|
||||
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.20) 50%);
|
||||
|
||||
-webkit-transition: -webkit-transform 5000ms linear;
|
||||
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transform-origin: bottom;
|
||||
-webkit-transform: rotateX(90deg);
|
||||
}
|
||||
|
||||
#bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 150px;
|
||||
height: 500px;
|
||||
background: red;
|
||||
/* easeOutSine */
|
||||
-webkit-transition: top 5000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<div id="top"></div>
|
||||
<div id="slide">
|
||||
<div id="slide-top"></div>
|
||||
<div id="slide-bottom"></div>
|
||||
</div>
|
||||
<div id="bottom"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
setTimeout(function() {
|
||||
document.getElementById("bottom").style.top = "350px";
|
||||
document.getElementById("slide").style.height = "200px";
|
||||
document.getElementById("slide").className += " visible";
|
||||
|
||||
}, 1000);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
experiments/zenbg.png
Normal file
BIN
experiments/zenbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Loading…
Add table
Add a link
Reference in a new issue