序列帧动图原理

最新推荐文章于 2023-12-04 15:19:27 发布

L824627453

最新推荐文章于 2023-12-04 15:19:27 发布

阅读量766

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/L824627453/article/details/126489839

版权

序列帧动图，顾名思义就是很多张图一张这一张的轮播，图片之间切换的时间很短，从而在视觉上感觉是一个动图的效果。

简单的js逻辑：

下面我有一个10帧的长图

接下来我想让他有一个头发和衣服在飘动的效果，使用js里的 setInterval（）方法

function actGif(){
	var imgActive = setInterval(activeFun,50)
	var num=0;
	function activeFun(){
		num--
		// 0 - -19
		if(num <-19){
			num=0
		}
		$(".renwu").css("left",(num*100)+"%")
	}
}

//微沙盘进阶版

一个圆盘，点击指定的按钮圆盘旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>黄梅天地</title>
		<!--<link rel="stylesheet" href="css/animate.min.css" />-->
		<link rel="stylesheet" href="css/animations.css" />
		<link rel="stylesheet" href="css/style.css" />
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' />
		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="js/pinchzoom.js"></script> //放大缩小插件js
		<script>
			var pinchArr=new Array();
			// document.documentElement.style.fontSize=document.documentElement.clientWidth*50/375+"px";
			document.documentElement.style.fontSize=document.documentElement.clientWidth*50/960+"px";
			window.onresize=function(){
				// document.documentElement.style.fontSize=document.documentElement.clientWidth*50/375+"px";	
				document.documentElement.style.fontSize=document.documentElement.clientWidth*50/960+"px";			
			}
			$(function () 
			{
                $('.pinch-zoom').each(function () {
                	
                       new RTP.PinchZoom($(this), {})
                       pinchArr.push(RTP.PinchZoom);
                       //console.log(RTP.PinchZoom)
                });
          })
		</script>
		
		<script type="text/javascript" src="js/music.js"></script>
		<script type="text/javascript" src="js/createjs-2015.11.26.min.js" ></script>
		<script type="text/javascript" src="quwei3d.js" ></script>
		<script type="text/javascript" src="js/app_zl.js" ></script>
		<style>
			.close{position: absolute;width: 0.79rem;height: 0.79rem;bottom: 0.25rem;left: 50%;margin-left: -0.4rem;}
			.pinch-zoom-container{ display:none; z-index: 1333;width: 100%;}
			.pinch-zoom,.pinch-zoom img{
				width: 100%;
				-webkit-user-drag: none;
				-moz-user-drag: none;
				-ms-user-drag: none;
				user-drag: none;
			}
		</style>
	</head>
	<body>
		<img src="img/dibg.png" class="dibg pos-ab">
		<img src="img/logo.png" class="logo pos-ab">
		
		<div class="box3" style="display: block;">
			<div class="xuliezhen" >
				<div class="xuliezhen1">
					
					<img src="img/pic_49.png" class="p1" />
					<img src="img/pic_48.png" class="p2" />
					<img src="img/pic_47.png" class="p3" />
					<img src="img/pic_46.png" class="p4" />
					<img src="img/pic_45.png" class="p5" />
					<img src="img/pic_44.png" class="p6" />
					<img src="img/pic_43.png" class="p7" />
					<img src="img/pic_42.png" class="p8" />
					<img src="img/pic_41.png" class="p9" />
					<img src="img/pic_40.png" class="p10" />
					<img src="img/pic_39.png" class="p11" />
					<img src="img/pic_38.png" class="p12" />
					<img src="img/pic_37.png" class="p13" />
					<img src="img/pic_36.png" class="p14" />
					<img src="img/pic_35.png" class="p15" />
					<img src="img/pic_34.png" class="p16" />
					<img src="img/pic_33.png" class="p17" />
					<img src="img/pic_32.png" class="p18" />
					<img src="img/pic_31.png" class="p19" />
					<img src="img/pic_30.png" class="p20" />
					<img src="img/pic_29.png" class="p21" />
					<img src="img/pic_28.png" class="p22" />
					<img src="img/pic_27.png" class="p23" />
					<img src="img/pic_26.png" class="p24" />
					<img src="img/pic_25.png" class="p25" />
					<img src="img/pic_24.png" class="p26" />
					<img src="img/pic_23.png" class="p27" />
					<img src="img/pic_22.png" class="p28" />
					<img src="img/pic_21.png" class="p29" />
					<img src="img/pic_20.png" class="p30" />
					<img src="img/pic_19.png" class="p31" />
					<img src="img/pic_18.png" class="p32" />
					<img src="img/pic_17.png" class="p33" />
					<img src="img/pic_16.png" class="p34" />
					<img src="img/pic_15.png" class="p35" />
					<img src="img/pic_14.png" class="p36" />
					<img src="img/pic_13.png" class="p37" />
					<img src="img/pic_12.png" class="p38" />
					<img src="img/pic_11.png" class="p39" />
					<img src="img/pic_10.png" class="p40" />
					<img src="img/pic_09.png" class="p41" />
					<img src="img/pic_08.png" class="p42" />
					<img src="img/pic_07.png" class="p43" />
					<img src="img/pic_06.png" class="p44" />
					<img src="img/pic_05.png" class="p45" />
					<img src="img/pic_04.png" class="p46" />
					<img src="img/pic_03.png" class="p47" />
					<img src="img/pic_02.png" class="p48" />
					<img src="img/pic_01.png" class="p49" />
					<img src="img/pic_00.png" class="p50" />
				</div>
				<div class="gl_box">
					<img src="img/A11.png" class="room1">
					<img src="img/B15.png" class="room2">
					<img src="img/D28.png" class="room3">
					<img src="img/C00.png" class="room4">
					<img src="img/D29.png" class="room5">
					<img src="img/t1.png" class="room1" id="t1">
					<img src="img/t2.png" class="room2" id="t2">
					<img src="img/t3.png" class="room3" id="t3">
					<img src="img/t4.png" class="room4" id="t4">
					<img src="img/t5.png" class="room5" id="t5">
				</div>
			</div>
			
				
			<!-- <div class="gl_box">
				<img src="img/A11.png" class="room1">
				<img src="img/B15.png" class="room2">
				<img src="img/D28.png" class="room3">
				<img src="img/C00.png" class="room4">
				<img src="img/D29.png" class="room5">
				<img src="img/t1.png" class="room1" id="t1">
				<img src="img/t2.png" class="room2" id="t2">
				<img src="img/t3.png" class="room3" id="t3">
				<img src="img/t4.png" class="room4" id="t4">
				<img src="img/t5.png" class="room5" id="t5">
			</div> -->
			


			</div>
			<div class="btn_box">
				<img src="img/a1.png" class="rm1"/>
				<img src="img/a2.png" class="rm2"/>
				<img src="img/a3.png" class="rm3"/>
				<img src="img/a4.png" class="rm4"/>
				<img src="img/a5.png" class="rm5"/>
			</div>
			<img src="img/xmlogo.png" class="xmlogo pos-ab">
			<img src="img/xzzs.png" class="xzzs pos-ab">
		</div>
	</body>
	<script>
	var a=1,totNum=50,crFrame=0,lastFrame=0;
	var flag = false;
	// var dis=10;
	var dis=5;
	var sto,endNum,stNum;
	var delayTime=40;
	// var glArr=[19,15,30,2];//按class序号
	// var glArr=[2,15,30,40,50];//按class序号
	// var glArr=[2,15,30,40,50];//按class序号
	var glArr=[50,46,20,43,9];//按class序号
	var crRoom=0;
	// var isGaoliang=false;
	var isGaoliang=true;
	var cr_dis;
	var count=1;
	var isAdd=0;//0为默认，无需抄近路，1为往a=30走再++，-1为往a=1走再--
	var isRounding=false;
	//setRoomImg();
	function zizhuan()
	{
		console.log("zizhuan");
		endNum=totNum;
		var zizhuanDelay=setTimeout(gotoFrame,1000);
	}
	function setRoomImg(r)
	{
		console.log("setRoomImg："+r);
		var imgHeight=$(".tc_img"+r).height();
		if($(window).height()>imgHeight)
		{
			var hy=($(window).height()-imgHeight)/2;
			$(".tc_img"+r).css({"top":hy});
		}
	}
	function click_img(m){
		
		// $(".roomImgbgDiv").show();
		// $(".tc_img"+m).parent(".pinch-zoom-container").show();
		// $(".tc_img"+m).parent(".pinch-zoom-container").height($(window).height());
		// $(".tc_img"+m).parent(".pinch-zoom-container").addClass("zoomIn").addClass("animated");
		// $(".tc_img"+m).addClass("zoomIn");
		// $(".tc_img"+m).show();
		$(".chakan"+m).hide();
		setRoomImg(m);
//		$(".fanhui").fadeIn(1000);
	}
	function count_cishu(x){
		$(".rm"+x).click(function()
		{
			if(isRounding==false)
			{
				crRoom=x;
				isRounding=true;
				endNum=glArr[crRoom-1];
				turnGl(0);
				var step=endNum-a;//2-30
				if(Math.abs(step)>15)
				{
					//抄近路
					if(step>0)
					{
						isAdd=-1;
						console.log("捷径2~："+endNum,a)//30,2
						gotoFrame2();
					}
					else
					{
						isAdd=1;
						console.log("捷径1~："+endNum,a);//2,30
						gotoFrame1();
					}
				}
				else
				{
					isAdd=0
					console.log("无捷径0~："+endNum,a)
					gotoFrame();
				}
				// isGaoliang=false; 
				isGaoliang=true; 
				roomBtnReback(x);
			}
		})
		$(".chakan"+x).click(function()
		{
			$(".fanhui").fadeOut();
			click_img(x);
			// $(".close").fadeIn(1200)
		})
	}	
	function roomBtnReback(n) 
	{
		for(var r=1;r<=5;r++)
		{
			if(n==r)
			{
				$(".rm"+r).attr("src","img/aa"+r+".png");
			}
			else
			{
				$(".rm"+r).attr("src","img/a"+r+".png")
			}
		}
	}
	function addTouchEvent()
	{
		console.log("addTouchEvent")
		$(".xuliezhen").on("touchstart", touchStart);
		$(".xuliezhen").on("touchmove", touchMove);
		$(".xuliezhen").on("touchend", touchEnd);
		// TODO:
		$(".xuliezhen").on("mousedown", touchStart);
		$(".xuliezhen").on("mouseup", touchEnd);

		// TODO:
		//$(".xuliezhen").on("mousemove", touchMove);
		
		
		// $(".xuliezhen").on("mouseout", touchEnd);
//		$(document).on("touchstart", touchStart);
//		$(document).on("touchmove", touchMove);
	}
	function touchEnd(e)
	{
		lastFrame=a;
		$(".xuliezhen").unbind("mousemove", touchMove);
	}
	function touchStart(e)
	{
		this.flag = true 
		console.log(e.type,'ssssssss');
		$(".xuliezhen").on("mousemove", touchMove);
		if (e.cancelable) 
		{
	        // 判断默认行为是否已经被禁用
	        if (!e.defaultPrevented) 
	        {
	            e.preventDefault();
	        }
	    }  
		if(e.type=="touchstart")
		{
			startX = e.originalEvent.changedTouches[0].pageX;
		}
		else
		{
			startX = e.pageX;
		}
	    
	}
	function touchMove(e)
	{
		// console.log(isGaoliang,lastFrame,'ssss');
		console.log(e.type,);
		
		if (e.cancelable) 
		{
		        // 判断默认行为是否已经被禁用
		        if (!e.defaultPrevented) {
		            e.preventDefault();
		        }
	    }   
		
	    if(isGaoliang==true && a!=lastFrame)
	    {
	    	console.log("a:"+a+"~lastFrame:"+lastFrame);
	    	turnGl(0)
	    	isGaoliang=false;
	    }
		if(e.type=="touchmove"){
			moveEndX = e.originalEvent.changedTouches[0].pageX;
		}
		else
		{
			moveEndX = e.pageX;
		}
	   
	    cr_dis = moveEndX - startX;
	    //左滑
	    if ( cr_dis > dis )
	    {
	        a++;
	        if(a>totNum)
	        {
	        	a=1;
	        }
	       // console.log('左滑:'+cr_dis,a);
	        turnPic(a);
	    }
	    //右滑
	    else if (cr_dis < -dis ) 
	    {
	        a--;
	        if(a<1)
	        {
	        	a=totNum;
	        }
	       //console.log("右滑:"+cr_dis,a);   
	        turnPic(a);
	    }
	    startX=moveEndX;
	}	
	function turnPic(n)
	{
		for(var i=1;i<=totNum;i++)
		{
			if(n==i)
			{
				$(".p"+i).show();
				a=i;
				//console.log("turnPic a:"+a);   
			}//效果同上;
			else
			{
				$(".p"+i).hide();
			}
		}
	}
	function turnGl(n)
	{
		console.log("turnGl:"+n)
		for(var j=1;j<=5;j++)
		{
			if(n==j)
			{
				$(".room"+j).fadeIn(400);
				// $(".chakan"+j).fadeIn(1000);
				isRounding=false;
				lastFrame=a;
			}//效果同上;
			else
			{
				$(".room"+j).hide();
				// $(".chakan"+j).hide();
				console.log(crRoom);
			}
		}
	}
	
	</script>
	<script>
//			 $(".zp").css({"left":"3rem","top":"3rem"});
		var _gamma;//水平角度
		var _beta;
		
		var _left =true;
		var _up =true;
		var _right=true;
		
		var _angle = 0;
		var _angle1 = 0;
		
		// function zuobian(){
		// 		$(".ball1").css({"right":-_gamma*0.85+76.5})//右下橘黄色
 		// 		$(".ball2").css({"right":-_gamma*1.2+40})//右边灰色小球
		// 		$(".ball3").css({"left":_gamma*1.1-5})//左边灰色
		// 		$(".ball4").css({"left":_gamma*1.3+20})//左边绿色
		// 		$(".ball5").css({"left":_gamma*0.82+151.5})//蓝色大球
		// 	}
		// function upbian(){
		// 		$(".ball1").css({"bottom":-_beta*1.25+100})//右下橘黄色
		// 		$(".ball2").css({"top":_beta*1.6+350})//右边灰色小球
		// 		$(".ball3").css({"top":_beta*1.2+460})//左边灰色
		// 		$(".ball4").css({"top":_beta*1.3+310})//左边绿色
		// 		$(".ball5").css({"top":_beta*0.8+352.5})//蓝色大球
		// 	}
		window.addEventListener("deviceorientation", function(event) 
		{
			//手机平放桌面，时针角度alpha(罗盘，指南针)，头朝上竖起beta+++，左侧翻gamma--
//			    $(".topText1").text(Math.round(event.alpha));
//			    $(".topText2").text(Math.round(event.beta));
//		    $(".topText1").text(_angle);//-90~90--90-270
//		    $(".topText2").text(_gamma);
//		    $(".topText3").text(Math.round(event.gamma));
		    
			
			// _gamma=Math.round(event.gamma);
			// _beta=Math.round(event.beta);
			
			// if (_gamma - _angle < -90) {
			// 	//右翻转
		    // 	//_gamma = _angle + ( _gamma + 90 );
		    // 	_gamma = 90;
		    // } else if (_gamma - _angle > 90) {
		    // 	//右翻转
		    // 	//_gamma = _angle + _gamma - 90;
		    // 	_gamma = -90;
		    // } else {
		    // 	_angle = _gamma;
		    // }	
			 
		    // if(_left){
		    // 	// zuobian()
		    // }
			// if (_beta - _angle1 < -90) {
			// 	//右翻转
		    // 	//_gamma = _angle + ( _gamma + 90 );
		    // 	_beta = 180;
		    // } else if (_beta - _angle1 > 90) {
		    // 	//右翻转
		    // 	//_gamma = _angle + _gamma - 90;
		    // 	_beta = -180;
		    // } else {
		    // 	_angle1 = _beta;
		    // }	
			 
		    // if(_up){
		    // 	upbian()
		    // }

		 },true)
		
		
		 window.addEventListener("compassneedscalibration", function(event) {
//			      alert('您的罗盘需要校准，请将设备沿数字8方向移动。');
		      event.preventDefault();
		  }, true);

	</script>
	<script>
		
		document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
	</script>
  
</html>

说到手指缩放，pinchzoom.js有一个神坑就是在包裹的指定div中，会出现闪白屏的情况，最省心的解决办法就是在上面加一个白色的div。

还有一个bug就是如果放大缩小的功能是绑定在按钮上的，有时候点多了会出现缩放卡住的现象，解决的方法是在点击事件之中再次初始化缩放功能。（html的最上方的初始化方法也是要写的）上代码：

<img src="img/fangda.png" class="fangda pos-ab btn_link">

<div class="fangdabg none" style="background-color:#fff;width:100%;height:100%;position:absolute;"></div>
                            <div class="tesss pos-fix none">
                                <div class="pinch-zoom ">
                                    <img src="img/big6.png" class="big1 pos-ab">
                                    <img src="img/close.png" class="close pos-ab">
                                </div>
                            </div>


$(".fangda").click(function(){
    console.log('放大');
    $(".fangdabg").show()
    $(".tesss").show()
    $(".pinch-zoom-container").height($(window).height());
    $(".pinch-zoom-container").width($(window).width());
    $('div.pinch-zoom').each(function () {
        new RTP.PinchZoom($(this), {});
    });
    $(".nbtn").hide()
    $(".fangda").hide()
})
$(".close").click(function(){
    console.log('关闭放大');
    $(".fangdabg").hide()
    $(".tesss").hide()
    $(".nbtn").show()
    $(".fangda").show()
    // $(".tesss").addClass("vshide")
    // $(".nbtn").removeClass("vshide")
})

L824627453

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
序列帧动图原理

序列帧动图，顾名思义就是很多张图一张这一张的轮播，图片之间切换的时间很短，从而在视觉上感觉是一个动图的效果。序列帧动图，顾名思义就是很多张图一张这一张的轮播，图片之间切换的时间很短，从而在视觉上感觉是一个动图的效果。序列帧动图，顾名思义就是很多张图一张这一张的轮播，图片之间切换的时间很短，从而在视觉上感觉是一个动图的效果。
复制链接

扫一扫