mirror of
https://github.com/hiloteam/Hilo.git
synced 2025-12-08 20:35:59 +00:00
89 lines
2.7 KiB
HTML
89 lines
2.7 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
|
||
<title>Tween - Hilo Example</title>
|
||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||
<script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
|
||
<script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
|
||
<style type="text/css">
|
||
body{
|
||
/*background-color: #000;*/
|
||
}
|
||
#game-container{
|
||
line-height: 0;
|
||
/*-webkit-tranform: translateZ(0);*/
|
||
}
|
||
.box{
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 15px;
|
||
height: 15px;
|
||
border: 1px solid #fff;
|
||
background-color: blue;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body onload="init();">
|
||
<div id="header">
|
||
<h1>Tween</h1>
|
||
<p>Tween类提供缓动动画功能，使用Tween和Ease函数库可创建各种各样丰富的缓动动画。</p>
|
||
</div>
|
||
<div id="game-container"></div>
|
||
<script type="text/javascript" src="js/demo.js"></script>
|
||
<script type="text/javascript">
|
||
var Ticker = Hilo.Ticker;
|
||
var Tween = Hilo.Tween;
|
||
var Ease = Hilo.Ease;
|
||
var box;
|
||
function init(){
|
||
//start ticker
|
||
var ticker = new Ticker(60);
|
||
ticker.addTick(Tween);
|
||
ticker.start();
|
||
|
||
box = document.createElement('div');
|
||
box.id = 'box';
|
||
box.className = 'box';
|
||
box.x = 0;
|
||
box.y = 0;
|
||
gameContainer.appendChild(box);
|
||
|
||
Tween.to(box, {x:50, y:50}, {
|
||
duration: 500,
|
||
onUpdate: onUpdateTransform,
|
||
onComplete: runLink
|
||
});
|
||
}
|
||
|
||
function runLink(){
|
||
Tween.to(box, {x:50, y:150}, {
|
||
duration: 500,
|
||
onUpdate: onUpdateTransform
|
||
})
|
||
.link(Tween.to(box, {x:150}, {
|
||
duration: 500,
|
||
onUpdate: onUpdateTransform,
|
||
delay:'+0'
|
||
}))
|
||
.link(Tween.to(box, {y:50}, {
|
||
duration: 500,
|
||
onUpdate: onUpdateTransform,
|
||
delay:'+0'
|
||
}))
|
||
.link(Tween.to(box, {x:50}, {
|
||
duration: 500,
|
||
onUpdate: onUpdateTransform,
|
||
delay:'+0',
|
||
onComplete:runLink
|
||
}))
|
||
}
|
||
|
||
function onUpdateTransform(ratio, tween){
|
||
tween.target.style.webkitTransform = 'translate(' + tween.target.x + 'px,' + tween.target.y + 'px)';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|