jsdk-offical
Version:
JSDK is the most comprehensive TypeScript framework, like JDK.
110 lines (102 loc) • 3.06 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?_=1" rel="stylesheet" type="text/css" />
<script src="/jsdk/dist/jscore.js"></script>
<script src="/jsdk/dist/jsdk-config.js"></script>
</head>
<body>
<div class="content">
<section class="pane demos">
<header>
<h2 class="demos-title">Timeline ANIMATION</h2>
</header>
<div id="demo" class="demo" style="height:400px;background-color:rgb(0,67,171);">
<div class="demo-content">
<div class="line">
<div class="a5m" style="position:absolute;left:100px;top:100px;z-index:10;"></div>
<div class="submarine" style="position:absolute;left:120px;top:90px;"></div>
</div>
</div>
</div>
</section>
<section class="pane demo-info">
<header>
<h2>Composite Frame Animations</h2>
</header>
<div class="info-output">
<p><p>Play composite frame animations in a timeline.</p>
<div class="code-preview">
<h2>CODE EXAMPLE</h2>
<pre><code class="hljs javascript">let R = 50, CENTER = Point2.toPoint([150, 150]), EL = $1('.a5m'),
setXY = (el: HTMLElement, p:Point2)=>{
el.css({
left: p.x + 'px',
top: p.y + 'px'
})
},
anim = new Timeline({
targets: '.a5m'
})
.add({
type: 'frame',
frames: {
src: '../js2d/1945.gif',
w: 32,
h: 32,
items: {
ox: 4,
oy: 4,
split: 1,
axis: 'x',
total: 8
}
},
on: {
updated: function(e, t, d) {
let rad = - t / d * Radians.ONE_CYCLE + Math.PI,
p = CENTER.clone().toward(R, rad);
setXY(EL, p);
}
},
loop: true,
duration: 2000
})
.add({
type: 'frame',
targets: '.submarine',
frames: {
src: '../js2d/1945.gif',
w: 32,
h: 98,
items: {
ox: 532,
oy: 103,
split: 1,
axis: '-x',
total: 6
}
},
duration: 3000,
loop: true,
direction: 'alternate'
}, 0)
$1('#demo').on('click', () => {
anim.play()
})</code></pre>
</div>
</div>
</section>
</div>
<script src="../env.js"></script>
<script src="timeline_frame.js"></script>
</body>
</html>