jsdk-offical
Version:
JSDK is the most comprehensive TypeScript framework, like JDK.
80 lines (72 loc) • 2.88 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-cache,no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>JSDK Example</title>
<link rel="shortcut icon" href="#" />
<link href="anim.css?_=0" rel="stylesheet" type="text/css" />
<script src="/jsdk/dist/jscore.js?_=1"></script>
<script src="/jsdk/dist/jsdk-config.js"></script>
</head>
<body>
<div class="content">
<section class="pane demos">
<header>
<h2 class="demos-title">TWEEN ANIMATION</h2>
</header>
<div id="demo" class="demo">
<div class="demo-content">
<div class="line">
<div class="small square shadow"></div>
<div class="small square el"></div>
</div>
<div class="line">
<div class="small square shadow"></div>
<div class="small square el"></div>
</div>
<div class="line">
<div class="small square shadow"></div>
<div class="small square el"></div>
</div>
<div class="line controls">
<input class="progress" step=".001" type="range" min="0" max="100" value="0"></input>
</div>
</div>
</div>
</section>
<section class="pane demo-info">
<header>
<h2>Controls: SEEK</h2>
</header>
<div class="info-output">
<p>Jump to an elapsed time (in milliseconds).
</p>
<pre><code class="hljs javascript">anim.seek((scrollPercent / 100) * duration);</code></pre>
<div class="code-preview">
<h2>CODE EXAMPLE</h2>
<pre><code class="hljs javascript">let anim = new TweenAnim({
keys: {
translateX: function (el, i) {
return 100 * (i + 1)
}
},
direction: 'alternate',
loop: true,
duration: 10000
}).targets($L('.el')), progressEl = $1('.progress');
progressEl.on('input', function(this: HTMLInputElement) {
anim.seek(anim.config().duration * (parseFloat(this.value) / 100));
});</code></pre>
</div>
</div>
</section>
</div>
<script src="../env.js"></script>
<script src="tween_controls_seek.js"></script>
</body>
</html>