<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 SVG可交互拖拉的赛车动画</title>
<style>
body {
margin: 0;
background-color: #61E8E1;
overflow: hidden;
}
.bm_container {
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
position: absolute;
}
.dragSVG {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.dragger {
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<div class='bm_container'></div>
<svg viewBox="0 0 800 600" class="dragSVG">
<!-- Tanks @ChrisGannon -->
<g transform="translate(156, 509)">
<g class="dragger">
<rect id="dragger" x="1.5" y="1.5" width="60" height="36" rx="18" ry="18" fill="#303135" stroke="#5d5d5d" stroke-miterlimit="10" stroke-width="3" />
<polyline points="41.5 12.08 48.92 19.5 41.5 26.92" fill="none" stroke="#5d5d5d" stroke-miterlimit="10" stroke-width="4" />
<polyline points="21.5 26.92 14.08 19.5 21.5 12.08" fill="none" stroke="#5d5d5d" stroke-miterlimit="10" stroke-width="4" />
</g>
</g>
</svg>
<script src='js/bodymovin_light.min.js'></script>
<script src='js/TweenMax.min.js'></script>
<script src='js/Draggable.min.js'></script>
<script>
var animData = {
wrapper: document.querySelector('.bm_container'),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: 'car_driving_seg.json'
};
var anim = bodymovin.loadAnimation(animData);
anim.addEventListener('DOMLoaded', startAnimation);
anim.setSpeed(1);
bodymovin.setSubframeRendering(false);
var dragSVG = document.querySelector('.dragSVG'),
dragger = document.querySelector('.dragger'),
animationWindow = document.querySelector('.bm_container'),
dragMaxX = 444,
maxRunSpeed = 2,
minRunSpeed = 0.05,
runSpeed,
dragPercent,
segment04 = false;
isChanging = false;
goingFast = false;
animationWindow.appendChild(dragSVG)
Draggable.create(dragger, {
type: 'x',
bounds: {
minX: 0,
maxX: dragMaxX
},
onDrag: onDrag
})
function onDrag() {
dragPercent = dragger._gsTransform.x / dragMaxX;
runSpeed = dragPercent * maxRunSpeed + minRunSpeed;
anim.setSpeed(runSpeed);
}
TweenMax.set(dragger, {
x: dragMaxX / 2,
//y:510,
onComplete: onDrag
})
function changeComplete() {
isChanging = false;
anim.removeEventListener('loopComplete', changeComplete);
console.log(changeComplete);
}
function goFast() {
if (isChanging) {
return;
} else if (goingFast) {
return;
} else {
isChanging = true;
goingFast = true;
anim.playSegments([
[20, 39],
[40, 60]
], true);
anim.addEventListener('loopComplete', changeComplete);
}
}
function goSlow() {
if (isChanging) {
return;
} else if (goingFast) {
isChanging = true;
goingFast = false;
anim.playSegments([
[60, 79],
[0, 19]
], true);
anim.addEventListener('loopComplete', changeComplete);
} else {
console.log("CHECK");
}
}
window.onload = function() {
window.requestAnimationFrame(loop);
};
function loop() {
window.requestAnimationFrame(loop);
console.log(runSpeed);
if ((runSpeed > 2) && (segment04 === false)) {
console.log("FAST SEGMENT");
segment04 = true;
goFast();
}
if ((runSpeed < 2) && (segment04 === true)) {
console.log("SLOW SEGMENT");
segment04 = false;
goSlow();
}
}
function startAnimation() {
anim.playSegments([
[0, 20]
], true);
}
</script>
</body>
</html>
