手机端html5卡通场景动画效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是手机端html5卡通场景动画效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>手机端html5卡通场景动画效果</title>
<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript" charset="utf-8" src="edge.5.0.0.min.js"></script>
<style>
	.edgeLoad-EDGE-27236188 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition('index', 'EDGE-27236188', {
scaleToFit: "both",
centerStage: "both",
minW: "0",
maxW: "undefined",
width: "568px",
height: "320px"
}, {"dom":{}}, {"dom":{}});
</script>
<!--Adobe Edge Runtime End-->

</head>
<body style="margin:0;padding:0;">

	<div id="Stage" class="EDGE-27236188">
	
        <div id="Stage_mb" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_yhwh2" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_ren2177" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_page1th444" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage__122-Play" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_page1_y1" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_page1_y2" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_page1_y3" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_page1_y4" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p2_den1" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p2_den3" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p2_den2" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_page2t5h" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p2_book2" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_yinghuangpaizi" class="edgeLoad-EDGE-27236188">
            <div id="Stage_yinghuangpaizi_p2_jyname"></div>
        </div>
        <div id="Stage_p2_book1" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_page4th1" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p5_x" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_page5th2" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p4_joinus" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p4_plan2" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p4_plan3" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p4_plan4" class="edgeLoad-EDGE-27236188"></div>
        <div id="Stage_p4_plan1" class="edgeLoad-EDGE-27236188"></div>
    </div>
</body>
</html>

JS代码(index_edge.js):

(function(compId){
	"use strict";
	var _=null,y=true,n=false,x2='5.0.0.375',e40='${
	p4_plan4}
',e36='${
	p4_plan2}
',x54='yhwh',e37='${
	p4_joinus}
',e45='${
	page1th444}
',e33='${
	p2_book1}
',e49='${
	p4_plan1}
',x56='343px',e59='${
	yhwh}
',e67='${
	p2_jyname}
',e43='${
	page1_y3}
',i='none',e46='${
	p2_den2}
',x64='p2_jyname',e51='${
	yhwh2}
',bg='background-color',e42='${
	page2t5h}
',x58='auto',tp='top',e47='${
	p5_x}
',e30='${
	mb}
',e39='${
	p4_plan3}
',e35='${
	page5th2}
',zy='scaleY',e41='${
	page4th1}
',x1='5.0.0',x4='rgba(0,0,0,0)',e50='${
	Stage}
',e29='${
	p2_den1}
',x57='57px',zx='scaleX',x3='both',e52='${
	p2_den3}
',e34='${
	p2_book2}
',x55='0px',h='height',e44='${
	ren2177}
',x61='159px',o='opacity',x66='158px',x60='98px',x28='rgba(230,217,200,1.00)',x63='14.8428%',x62='48.3672%',rz='rotateZ',e32='${
	page1_y4}
',g='image',m='rect',e48='${
	page1_y2}
',w='width',e38='${
	yinghuangpaizi}
',e31='${
	_122-Play}
',e53='${
	page1_y1}
';
	var g15='p2_den3.png',g26='p4_plan4.png',g11='page1_y2.png',g10='page1_y1.png',g5='mb.png',g18='p2_book2.png',g22='page5th2.png',g7='ren2177.png',g19='p2_book1.png',g24='p4_plan2.png',g9='122-Play.png',g16='p2_den2.png',g6='yhwh.png',g17='page2t5h.png',g27='p4_plan1.png',g65='p2_jyname.png',g21='p5_x.png',g25='p4_plan3.png',g13='page1_y4.png',g14='p2_den1.png',g12='page1_y3.png',g23='p4_joinus.png',g8='page1th444.png',g20='page4th1.png';
	var im='images/',aud='media/',vid='media/',js='js/',fonts={
}
,opts={
	'gAudioPreloadPreference':'auto','gVideoPreloadPreference':'auto'}
,resources=[],scripts=[],symbols={
	"stage":{
	v:x1,mv:x1,b:x2,stf:x3,cg:x3,rI:n,cn:{
	dom:[{
	id:'mb',t:g,r:['209px','15px','150px','150px','auto','auto'],o:1,f:[x4,im+g5,'0px','0px'],filter:[0,0,1,1,0,0,0,0,"rgba(0,0,0,0)",0,0,0],tf:[[],[],[],['2.00266','2.00266']]}
,{
	id:'yhwh2',t:g,r:['110px','-65px','347px','57px','auto','auto'],f:[x4,im+g6,'0px','0px']}
,{
	id:'ren2177',t:g,r:['195px','-156px','177px','126px','auto','auto'],f:[x4,im+g7,'0px','0px']}
,{
	id:'page1th444',t:g,r:['-111px','-30px','790px','360px','auto','auto'],f:[x4,im+g8,'0px','0px']}
,{
	id:'_122-Play',t:g,r:['251px','207px','66px','66px','auto','auto'],o:0,f:[x4,im+g9,'0px','0px'],filter:[0,0,1,1,0,0,0,0,"rgba(0,0,0,0)",0,0,0]}
,{
	id:'page1_y1',t:g,r:['124px','-76px','71px','66px','auto','auto'],f:[x4,im+g10,'0px','0px']}
,{
	id:'page1_y2',t:g,r:['160px','-89px','113px','89px','auto','auto'],f:[x4,im+g11,'0px','0px']}
,{
	id:'page1_y3',t:g,r:['272px','60px','98px','77px','auto','auto'],f:[x4,im+g12,'0px','0px']}
,{
	id:'page1_y4',t:g,r:['357px','65px','78px','66px','auto','auto'],f:[x4,im+g13,'0px','0px']}
,{
	id:'p2_den1',t:g,r:['217px','13px','104px','150px','auto','auto'],f:[x4,im+g14,'0px','0px']}
,{
	id:'p2_den3',t:g,r:['321px','13px','150px','158px','auto','auto'],f:[x4,im+g15,'0px','0px']}
,{
	id:'p2_den2',t:g,r:['110px','25px','100px','150px','auto','auto'],f:[x4,im+g16,'0px','0px']}
,{
	id:'page2t5h',t:g,r:['-112px','-30px','790px','360px','auto','auto'],f:[x4,im+g17,'0px','0px']}
,{
	id:'p2_book2',t:g,r:['103px','249px','57px','66px','auto','auto'],o:0,f:[x4,im+g18,'0px','0px']}
,{
	id:'yinghuangpaizi',symbolName:'yinghuangpaizi',t:m,r:['103','108','98','158','auto','auto'],o:1}
,{
	id:'p2_book1',t:g,r:['481px','88px','55px','40px','auto','auto'],o:0,f:[x4,im+g19,'0px','0px']}
,{
	id:'page4th1',t:g,r:['-111px','-30px','789px','360px','auto','auto'],f:[x4,im+g20,'0px','0px']}
,{
	id:'p5_x',t:g,r:['395px','120px','150px','179px','auto','auto'],o:0,f:[x4,im+g21,'0px','0px']}
,{
	id:'page5th2',t:g,r:['-111px','360px','789px','345px','auto','auto'],f:[x4,im+g22,'0px','0px']}
,{
	id:'p4_joinus',t:g,r:['67px','-31px','245px','195px','auto','auto'],f:[x4,im+g23,'0px','0px']}
,{
	id:'p4_plan2',t:g,r:['47px','-56px','77px','74px','auto','auto'],f:[x4,im+g24,'0px','0px']}
,{
	id:'p4_plan3',t:g,r:['-12px','273px','167px','157px','auto','auto'],f:[x4,im+g25,'0px','0px']}
,{
	id:'p4_plan4',t:g,r:['-75px','90px','98px','90px','auto','auto'],f:[x4,im+g26,'0px','0px']}
,{
	id:'p4_plan1',t:g,r:['549px','273px','103px','89px','auto','auto'],f:[x4,im+g27,'0px','0px']}
],style:{
	'${
	Stage}
':{
	isStage:true,r:['null','null','568px','320px','auto','auto'],overflow:'hidden',f:[x28]}
}
}
,tt:{
	d:27000,a:y,data:[["eid242",tp,11750,570,"easeInQuart",e29,'-131px','13px'],["eid262",tp,14070,570,"easeInQuart",e29,'13px','-131px'],["eid313",zy,3630,870,"linear",e30,'1','2.00266'],["eid59",o,1000,1000,"easeInOutElastic",e31,'0','1'],["eid299",o,2000,500,"easeInOutElastic",e31,'1','0'],["eid225",tp,7683,317,"easeInBounce",e32,'-71px','65px'],["eid235",tp,9588,317,"easeOutBounce",e32,'65px','-71px'],["eid248",o,12500,500,"linear",e33,'0','1'],["eid265",o,15337,413,"easeInQuart",e33,'1','0'],["eid249",o,12500,500,"linear",e34,'0','1'],["eid264",o,15337,413,"easeInQuart",e34,'1','0'],["eid293",tp,25250,1000,"easeInQuad",e35,'360px','-17px'],["eid282","location",17571,2429,"easeInQuad",e36,[[85.5,-18.7,0,0,0,0,0],[138.15,-1.05,63.09,33.61,75.32,40.13,55.72],[178.5,30.84,0,0,0,0,107.32],[269.59,99.15,105.33,43.76,157.74,65.54,222.09],[386.61,105.86,150.86,36.64,105.69,25.67,340],[470.5,152.16,0,0,0,0,436.82]]],["eid285","location",22750,1500,"easeInQuad",e36,[[470.5,152,0,0,0,0,0],[530.58,261.43,90.51,85.17,119.11,112.09,126.02],[612.9,286,0,0,0,0,213.98]]],["eid283",tp,16000,701,"easeInBounce",e37,'-197px','-31px'],["eid288",tp,24250,750,"easeInBounce",e37,'-31px','-200px'],["eid266",o,15337,413,"easeInQuart",e38,'1','0'],["eid279",w,16500,1750,"easeInQuad",e39,'167px','61px'],["eid29","filter.blur",2630,0,"linear",e30,'0px','0px'],["eid281","location",17250,2000,"easeInQuad",e40,[[-26.2,135.22,0,0,0,0,0],[36.8,144,0,0,0,0,63.61],[104.78,170.63,78.95,79.46,62.09,62.49,137.64],[132.19,240,0,0,0,0,213.71]]],["eid286","location",21250,1500,"easeInQuad",e40,[[132.19,239.78,0,0,0,0,0],[207.63,297.56,149.9,72.28,133.6,64.42,95.54],[321.81,331.22,0,0,0,0,214.9]]],["eid268",tp,15545,955,"easeInQuart",e41,'360px','-30px'],["eid289",tp,24250,1250,"easeInQuad",e41,'-30px','-360px'],["eid244",tp,11209,791,"linear",e42,'360px','-30px'],["eid263",tp,14790,710,"easeInQuart",e42,'-30px','-360px'],["eid312",zx,3630,870,"linear",e30,'1','2.00266'],["eid226",tp,8000,385,"easeInBounce",e43,'-77px','60px'],["eid233",tp,9853,385,"easeOutBounce",e43,'60px','-77px'],["eid217",tp,6000,750,"linear",e44,'-156px','156px'],["eid219",tp,6750,750,"linear",e45,'360px','-30px'],["eid239",tp,10627,873,"easeInCubic",e45,'-30px','-360px'],["eid241",tp,11820,570,"easeInQuart",e46,'-127px','25px'],["eid260",tp,14000,570,"easeInQuart",e46,'25px','-127px'],["eid277","location",16500,1750,"easeInQuad",e39,[[71.5,351.5,0,0,0,0,0],[177.76,315.98,114.8,-106.59,104.77,-97.28,113.86],[250.17,165.47,74.3,-114.47,80.22,-123.59,282.05],[320.5,120.3,0,0,0,0,367.79]]],["eid287","location",21500,1500,"easeInQuad",e39,[[320.5,120.3,0,0,0,0,0],[464.09,48.98,215.38,-52.02,210.56,-50.86,161.18],[604.5,51.7,0,0,0,0,302.92]]],["eid298",o,0,0,"easeInQuad",e47,'0','0'],["eid295",o,26250,750,"easeInQuad",e47,'0','1'],["eid223",tp,7500,333,"linear",e48,'-89px','53px'],["eid231",tp,9750,333,"easeOutBounce",e48,'53px','-89px'],["eid38",o,0,1000,"easeInExpo",e30,'0','1'],["eid300",o,2630,125,"linear",e30,'1','0'],["eid301",o,2755,125,"linear",e30,'0.000000','1'],["eid302",o,2880,125,"linear",e30,'1','0'],["eid303",o,3005,125,"linear",e30,'0.000000','1'],["eid304",o,3130,125,"linear",e30,'1','0'],["eid305",o,3255,125,"linear",e30,'0.000000','1'],["eid314",o,3630,870,"linear",e30,'1','0'],["eid276","location",18656,1750,"easeInQuad",e49,[[600.3,317.5,0,0,0,0,0],[485.99,165.15,-135.8,-107.71,-230.49,-182.81,192.16],[321.64,117.3,-124.67,-53.88,-131.5,-56.83,364.78],[268.7,54.5,0,0,0,0,449.46]]],["eid284","location",22000,1500,"easeInQuad",e49,[[268.7,54.5,0,0,0,0,0],[160.66,28.11,-158.93,-57.41,-156.64,-56.58,111.37],[58.31,-21.5,0,0,0,0,225.26]]],["eid62",bg,3630,810,"easeInExpo",e50,'rgba(0,178,178,1)','rgba(230,217,200,1.00)'],["eid240",bg,10627,733,"easeInCubic",e50,'rgba(230,217,200,1)','rgba(92,168,194,1.00)'],["eid296",bg,14790,1210,"easeInQuad",e50,'rgba(92,168,194,1)','rgba(235,214,211,1.00)'],["eid297",bg,25250,1000,"easeInQuad",e50,'rgba(235,214,211,1)','rgba(239,239,239,1.00)'],["eid79",tp,4874,506,"easeInCubic",e51,'-65px','20px'],["eid238",tp,10238,389,"easeInCubic",e51,'20px','-70px'],["eid278",h,16500,1750,"easeInQuad",e39,'157px','57px'],["eid243",tp,11600,570,"easeInQuart",e52,'-135px','13px'],["eid261",tp,14220,570,"easeInQuart",e52,'13px','-135px'],["eid227",tp,8250,405,"easeInBounce",e53,'-76px','60px'],["eid229",tp,9500,405,"easeOutBounce",e53,'60px','-76px'],["eid57",tp,1000,1000,"easeInOutElastic",e31,'338px','207px'],["eid80",rz,5084,120,"easeInCubic",e51,'0deg','5deg'],["eid81",rz,5204,121,"easeInCubic",e51,'5deg','0deg'],["eid82",rz,5325,129,"easeInCubic",e51,'0deg','-5deg'],["eid83",rz,5454,136,"easeInCubic",e51,'-5deg','0deg']]}
}
,"yinghuanglogo":{
	v:x1,mv:x1,b:x2,stf:i,cg:i,rI:n,cn:{
	dom:[{
	id:x54,t:g,r:[x55,x55,x56,x57,x58,x58],f:[x4,im+g6,x55,x55]}
],style:{
	'${
	symbolSelector}
':{
	r:[_,_,x56,x57]}
}
}
,tt:{
	d:1000,a:y,data:[["eid74",rz,0,250,"easeInElastic",e59,'0deg','10deg'],["eid75",rz,250,250,"easeInElastic",e59,'10deg','0deg'],["eid76",rz,500,250,"easeInElastic",e59,'0deg','-10deg'],["eid77",rz,750,250,"easeInElastic",e59,'-10deg','0deg']]}
}
,"yinghuangpaizi":{
	v:x1,mv:x1,b:x2,stf:i,cg:i,rI:n,cn:{
	dom:[{
	r:[x55,x55,x60,x61,x58,x58],tf:[[],[],[],[],[x62,x63]],id:x64,o:0,t:g,f:[x4,im+g65,x55,x55]}
],style:{
	'${
	symbolSelector}
':{
	r:[_,_,x60,x66]}
}
}
,tt:{
	d:14000,a:y,data:[["eid251","originY",13250,0,"linear",e67,'14.8428%','14.8428%'],["eid250","originX",13250,0,"linear",e67,'48.3672%','48.3672%'],["eid253",rz,13250,185,"linear",e67,'0deg','10deg'],["eid254",rz,13435,170,"linear",e67,'10deg','0deg'],["eid255",rz,13605,185,"linear",e67,'0deg','-10deg'],["eid256",rz,13790,210,"linear",e67,'-10deg','0deg'],["eid247",o,12750,500,"linear",e67,'0','1']]}
}
}
;
	AdobeEdge.registerCompositionDefn(compId,symbols,fonts,scripts,resources,opts);
}
)("EDGE-27236188");
	(function($,Edge,compId){
	var Composition=Edge.Composition,Symbol=Edge.Symbol;
	Edge.registerEventBinding(compId,function($){
	//Edge symbol:'stage'(function(symbolName){
	Symbol.bindTriggerAction(compId,symbolName,"Default Timeline",2000,function(sym,e){
	sym.stop();
}
);
	//Edge binding endSymbol.bindElementAction(compId,symbolName,"${
	_122-Play}
","click",function(sym,e){
	sym.play();
}
);
	//Edge binding end}
)("stage");
	//Edge symbol end:'stage'//=========================================================//Edge symbol:'yinghuanglogo'(function(symbolName){
}
)("yinghuanglogo");
	//Edge symbol end:'yinghuanglogo'//=========================================================//Edge symbol:'yinghuangpaizi'(function(symbolName){
}
)("yinghuangpaizi");
	//Edge symbol end:'yinghuangpaizi'}
)}
)(AdobeEdge.$,AdobeEdge,"EDGE-27236188");

附件:下载该文件资源,减少时间成本(增值服务)