Etusivu Tutki Apua
Kirjaudu sisään
typescript
/
ievgennaida.animation-timeline-control
peilaus alkaen https://github.com/ievgennaida/animation-timeline-control.git
2
0
Fork 0
Tiedostot Ongelmat 0 Wiki
Selaa lähdekoodia

Updated path to the demo page

Ievgen Naida 5 vuotta sitten
vanhempi
2852928545
commit
5cd2f886cb
2 muutettua tiedostoa jossa 151 lisäystä ja 4 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 150 3
      index.html
  2. 1 1
      package.json

+ 150 - 3
index.html
Näytä tiedosto 

@@ -2,12 +2,159 @@
 
 <html>

 <html>

 

 

 <head>

 <head>

-  <meta charset="UTF-8">

-  <title>Animation Timeline<title>

+  <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>

 </head>

 </head>

 

 

 <body>

 <body>

-  Animation Timeline

+  <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>

 </body>

 </body>

 

 

 </html>
 
 </html>

+ 1 - 1
package.json
Näytä tiedosto 

@@ -52,5 +52,5 @@
 
   "bugs": {
 
   "bugs": {
 
     "url": "https://github.com/ievgennaida/js-animation-timeline-control/issues"
 
     "url": "https://github.com/ievgennaida/js-animation-timeline-control/issues"
 
   },
 
   },
 
-  "homepage": "https://github.com/ievgennaida/js-animation-timeline-control#readme"
 
+  "homepage": "https://ievgennaida.github.io/animation-timeline-control/index.html"
 
 }
 
 }