fcy998-keyframes-to-canvas
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#keyframes{
			width: 100%;
			height: 100vh;
			margin: 0 auto;
		}
		#stopan,#start,#reset,#goto,#gotostop,#sc_btn,#width_btn,#height_btn{
			width: 100px;
			height: 50px;
			position: fixed;
			left: 50px;
			top: 100px;
			z-index: 2020;
		}
		#start{
			left: 150px;
		}
		#reset{
			left: 250px;
		}
		#fps{
			width: 100px;
		}
		#goto{
			left: 630px;
		}
		#gotostop{
			left: 730px;
		}
		#sc_btn{
			left: 1015px;
		}
		#width_btn{
			height: 30px;
			left: 235px;
			top: 175px;
		}
		#height_btn{
			height: 30px;
			left: 235px;
			top: 215px;
		}
		.show_x_y{
			position: absolute;
			left: 1135px;
			top: 95px;
			margin: 0;
		}
		.show_x_y>p{
			margin: 0;
		}
		.fps_box1,.fps_box2{
			width: 400px;
			position: absolute;
			left: 370px;
			top: 95px;
		}
		.fps_box1>input{
			width: 20%;
		}
		.fps_box2>input{
			width: 20%;
		}
		.fps_box2{
			top: 130px;
		}
		.sc_x,.sc_y{
			width: 400px;
			position: absolute;
			left: 845px;
			top: 95px;
		}
		.sc_width,.sc_height{
			width: 400px;
			position: absolute;
			left: 50px;
			top: 175px;
		}
		.sc_x>input{
			width: 20%;
		}
		.sc_y>input{
			width: 20%;
		}
		.sc_y{
			top: 130px;
		}
		.sc_height{
			top: 220px;
		}
		.sc_width>input{
			width: 20%;
		}
		.sc_height>input{
			width: 20%;
		}
	</style>
	<body>
		<div id="keyframes"></div>
		<button type="button" id="stopan">点击停止动画</button>
		<button type="button" id="start">点击开始动画</button>
		<button type="button" id="reset">点击重置动画</button>
		<div class="fps_box1">
			<span>输入指定播放帧数：</span>
			<input type="text" name="" id="fps1" value="" />
		</div>
		<div class="fps_box2">
			<span>输入指定停止帧数：</span>
			<input type="text" name="" id="fps2" value="" />
		</div>
		<button type="button" id="goto">指定帧数位置开始播放</button>
		<button type="button" id="gotostop">指定帧数位置停止</button>
		<div class="sc_x">
			<span>水平缩放</span>
			<input type="text" name="" id="sc_x" value="" placeholder="dx"/>
		</div>
		<div class="sc_y">
			<span>垂直缩放</span>
			<input type="text" name="" id="sc_y" value="" placeholder="dy"/>
		</div>
		<button type="button" id="sc_btn">缩放</button>
		<div class="sc_width">
			<span>画布宽度</span>
			<input type="text" name="" id="sc_width" value="" placeholder="width"/>
		</div>
		<div class="sc_height">
			<span>画布高度</span>
			<input type="text" name="" id="sc_height" value="" placeholder="height"/>
		</div>
		<button type="button" id="width_btn">修改宽度</button>
		<button type="button" id="height_btn">修改高度</button>
	</body>
	<script src="src/js/jq-v3.5.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="./src/js/KeyframesToCanvas.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let arr = '#keyframes'
		let keyframes = document.getElementById('keyframes');
		let fps1 = document.getElementById('fps1');
		let fps2 = document.getElementById('fps2');
		let sc_x = document.getElementById('sc_x')
		let sc_y = document.getElementById('sc_y')
		let sc_width = document.getElementById('sc_width')
		let sc_height = document.getElementById('sc_height')
		let canvas = null;
		$.ajax({
			url:'./src/res.json',
			method:'get',
			success:function(res){
				canvas = new KeyframesToCanvas(arr,res.images,{
					speed:60,
					x:80 * 5 / 2,
					y:102 * 5 / 2,
					width:80 * 5,
					height:102 * 5,
					reverse:false,
					loop:false,
					scX:1,
					scY:1,
					startCallback:function(res){
						console.log(res)
					}
				})
			}
		})
		$('#stopan').on('click',()=>{
			canvas.stop()
		})
		$('#start').on('click',()=>{
			canvas.start()
		})
		$('#reset').on('click',()=>{
			canvas.reset()
		})
		$('#goto').on('click',()=>{
			if(fps1.value){
				canvas.goToAndPlay(Number(fps1.value))
			}else{
				alert('请输入指定帧数')
			}
		})
		$('#gotostop').on('click',()=>{
			if(fps2.value){
				canvas.goToAndStop(Number(fps2.value))
			}else{
				alert('请输入指定帧数')
			}
		})
		$('#sc_btn').on('click',()=>{
			canvas.setZoom(Number(sc_x.value),Number(sc_y.value))
		})
		$('#width_btn').on('click',()=>{
			canvas.setWidth(Number(sc_width.value))
		})
		$('#height_btn').on('click',()=>{
			canvas.setHeight(Number(sc_height.value))
		})
	</script>
</html>