|
|
@@ -2,159 +2,12 @@
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
- <style>
|
|
|
- html,
|
|
|
- body {
|
|
|
- margin: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- #timeline {
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 50vh;
|
|
|
- scrollbar-color: gray #161616;
|
|
|
- }
|
|
|
-
|
|
|
- ::-webkit-scrollbar {
|
|
|
- background: #161616;
|
|
|
- color: gray;
|
|
|
- }
|
|
|
-
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- background: gray;
|
|
|
- }
|
|
|
-
|
|
|
- ::-webkit-scrollbar-corner {
|
|
|
- background: #161616;
|
|
|
- }
|
|
|
- </style>
|
|
|
-
|
|
|
- <script src="./lib/animation-timeline.js" type="text/javascript"></script>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Animation Timeline<title>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
- <div>
|
|
|
- <div id="timeline"></div>
|
|
|
- </div>
|
|
|
- <br />
|
|
|
-
|
|
|
- <div id="currentTime"></div>
|
|
|
- <div id="currentKeyframes"></div>
|
|
|
- <script type="text/javascript">
|
|
|
- let rows = [
|
|
|
- {
|
|
|
- style: {
|
|
|
- height: 1,
|
|
|
- keyframesStyle: {
|
|
|
- shape: "rect"
|
|
|
- }
|
|
|
- },
|
|
|
- selected: false,
|
|
|
- draggable: false,
|
|
|
-
|
|
|
- keyframes: [
|
|
|
- {
|
|
|
- val: 40,
|
|
|
- shape: "rhomb"
|
|
|
- },
|
|
|
- {
|
|
|
- shape: "rhomb",
|
|
|
- val: 3000,
|
|
|
- selected: false
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- //keyframesShape: "rect",
|
|
|
- drawKeyframes: true,
|
|
|
-
|
|
|
- selected: false,
|
|
|
- hidden: false,
|
|
|
- keyframes: [
|
|
|
- {
|
|
|
- cursor: "default",
|
|
|
- val: 2000,
|
|
|
- },
|
|
|
- {
|
|
|
- val: 2500
|
|
|
- },
|
|
|
- {
|
|
|
- val: 2600
|
|
|
- }
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- hidden: false,
|
|
|
- keyframes: [
|
|
|
- {
|
|
|
- val: 1000
|
|
|
- },
|
|
|
- {
|
|
|
- val: 1500
|
|
|
- },
|
|
|
- {
|
|
|
- val: 2000
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- keyframes: [
|
|
|
- {
|
|
|
- val: 40
|
|
|
- },
|
|
|
- {
|
|
|
- val: 3000
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- keyframes: [
|
|
|
- {
|
|
|
- val: 100
|
|
|
- },
|
|
|
- {
|
|
|
- val: 3410
|
|
|
- },
|
|
|
- {
|
|
|
- val: 2000
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- keyframes: [
|
|
|
- {
|
|
|
- val: 90
|
|
|
- },
|
|
|
- {
|
|
|
- val: 100
|
|
|
- }
|
|
|
- ]
|
|
|
- }, {
|
|
|
- rowsStyle: {
|
|
|
- height: 40
|
|
|
- }
|
|
|
- }, {}, {}, {}, {}, {}, {}, {}, {}
|
|
|
- ];
|
|
|
-
|
|
|
- let timeline = new timelineModule.Timeline({ id: 'timeline' })
|
|
|
-
|
|
|
- timeline.setModel({ rows: rows });
|
|
|
-
|
|
|
- timeline.on("timechanged", function (object) {
|
|
|
- document.getElementById("currentTime").innerHTML = object.val + "ms";
|
|
|
- });
|
|
|
-
|
|
|
- let dragHandler = function (object, eventName) {
|
|
|
- if (object.elements) {
|
|
|
- document.getElementById("currentKeyframes").innerHTML = 'Keyframe value: ' + object.elements[0].val + '. Selected (' + object.elements.length + ').' + eventName;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- timeline.onDragStarted(function (obj) { dragHandler(obj, 'dragstarted') });
|
|
|
- timeline.onDrag(function (obj) { dragHandler(obj, 'drag') });
|
|
|
- timeline.onDragFinished(function (obj) { dragHandler(obj, 'dragfinished') });
|
|
|
- timeline.on('doubleclick', function (obj) { alert(obj.val); });
|
|
|
- </script>
|
|
|
+ Animation Timeline
|
|
|
</body>
|
|
|
|
|
|
</html>
|
Ievgen Naida