TweenMax操作小狗行走动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：TweenMax操作小狗行走动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Running Dog</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" >
    $(function(){var change_t=0.2
$(".whitedog").click(function(){TM.to(".seg_main",change_t,{fill:"#ddd"})
TM.to(".seg_lf",change_t,{fill:"#bbb"})
TM.to(".skin_main",change_t,{attr:{style:"stop-color:#ddd"}})
TM.to(".skin_shadow",change_t,{attr:{style:"stop-color:#ccc"}})
TM.to(".skin_shadow_dark",change_t,{attr:{style:"stop-color:#bbb"}})
TM.to(".skin_left",change_t,{attr:{style:"stop-color:#bbb"}})
TM.to(".skin_left_dark",change_t,{attr:{style:"stop-color:#ccc"}})
TM.to(".seg",change_t,{fillOpacity:1,strokeWidth:0})
TM.to(".bone",change_t,{opacity:0})
TM.to(".shadow_set",change_t,{attr:{stdDeviation:"10 6"}})
TM.to(".Dog_shadow",change_t,{fillOpacity:0.3,strokeWidth:0})})
$(".blackdog").click(function(){TM.to(".seg_main",change_t,{fill:"#404040"})
TM.to(".seg_lf",change_t,{fill:"#282828"})
TM.to(".skin_main",change_t,{attr:{style:"stop-color:#404040"}})
TM.to(".skin_shadow",change_t,{attr:{style:"stop-color:#303030"}})
TM.to(".skin_shadow_dark",change_t,{attr:{style:"stop-color:#202020"}})
TM.to(".skin_left",change_t,{attr:{style:"stop-color:#282828"}})
TM.to(".skin_left_dark",change_t,{attr:{style:"stop-color:#222"}})
TM.to(".seg",change_t,{fillOpacity:1,strokeWidth:0})
TM.to(".bone",change_t,{opacity:0})
TM.to(".shadow_set",change_t,{attr:{stdDeviation:"10 6"}})
TM.to(".Dog_shadow",change_t,{fillOpacity:0.3,strokeWidth:0})})
$(".showBone").click(function(){TM.to(".seg",change_t,{fillOpacity:0,strokeWidth:0})
TM.to(".bone",change_t,{opacity:1})
TM.to(".shadow_set",change_t,{attr:{stdDeviation:"0"}})
TM.to(".Dog_shadow",change_t,{fillOpacity:0,strokeWidth:0})})
$(".showSeg").click(function(){TM.to(".seg",change_t,{fillOpacity:0,strokeWidth:1})
TM.to(".bone",change_t,{opacity:1})
TM.to(".shadow_set",change_t,{attr:{stdDeviation:"0"}})
TM.to(".Dog_shadow",change_t,{fillOpacity:0,strokeWidth:1,stroke:"#666"})})
$(".x1").click(function(){$(".runningdog").css({transform:"scale(0.5)"})})
$(".x2").click(function(){$(".runningdog").css({transform:"scale(1)"})})
$(".x4").click(function(){$(".runningdog").css({transform:"scale(2)"})})
$(".x8").click(function(){$(".runningdog").css({transform:"scale(4)"})})
$(".toleft").click(function(){$(".RunningdogWrap").css({marginLeft:"+=50px"})})
$(".toright").click(function(){$(".RunningdogWrap").css({marginLeft:"-=50px"})})
$(".totop").click(function(){$(".RunningdogWrap").css({marginTop:"+=50px"})})
$(".tobottom").click(function(){$(".RunningdogWrap").css({marginTop:"-=50px"})})
$(document).keydown(function(event){var keyNum=event.which;var Item=$(".RunningdogWrap");switch(keyNum){case 37:Item.css({marginLeft:'+=50px'});break;case 38:Item.css({marginTop:'+=50px'});break;case 39:Item.css({marginLeft:'-=50px'});break;case 40:Item.css({marginTop:'-=50px'});break;default:break;}})
$(".yawn").click(function(){dog_yawn()})
$(".walk").click(function(){stand2walk()})
$(".stand").click(function(){walk2stand()})
var blink_t=0.1,breathe_t=0.8,TM=TweenMax,g_DogEye_TL=new TimelineMax(),allTL=["g_Dog_TL","g_Fleg_TL","g_Fleg_1_TL","g_FlegL_TL","g_FlegL_1_TL","g_FlegL_2_TL","g_FlegL_3_TL","g_FlegL_4_TL","g_FlegL_5_TL","g_FlegR_TL","g_FlegR_1_TL","g_FlegR_2_TL","g_FlegR_3_TL","g_FlegR_4_TL","g_FlegR_5_TL","g_Hleg_TL","g_Hleg_1_TL","g_HlegL_TL","g_HlegL_1_TL","g_HlegL_2_TL","g_HlegL_3_TL","g_HlegL_4_TL","g_HlegL_5_TL","g_HlegR_TL","g_HlegR_1_TL","g_HlegR_2_TL","g_HlegR_3_TL","g_HlegR_4_TL","g_HlegR_5_TL","g_Tail_TL","g_Tail_1_TL","g_Tail_2_TL","g_Tail_3_TL","g_Tail_4_TL","g_Tail_5_TL","g_Tail_6_TL","g_Tail_7_TL","g_Tail_8_TL","g_Tail_9_TL","g_Tail_10_TL","g_Tail_11_TL","g_Body_TL","g_Body_1_TL","g_Body_2_TL","g_Body_3_TL","g_Body_4_TL","g_Body_5_TL","g_Neck_TL","g_Neck_1_TL","g_Neck_2_TL","g_Neck_3_TL","g_Neck_4_TL","g_DogHead_TL","g_Ear_TL","g_EarL_TL","g_EarL_2_TL","g_EarL_3_TL","g_EarR_TL","g_EarR_2_TL","g_EarR_3_TL","g_Jaw_TL","g_Tongue_TL","g_Tongue_2_TL","g_Tongue_3_TL","g_Tongue_4_TL","g_Tongue_5_TL","g_Tongue_6_TL","ground_TL","Dog_shadow_TL"],allTL_l=allTL.length,TL={};for(var i=0;i<allTL_l;i++){TL[allTL[i]]=new TimelineMax()}
function initTL(myTimeLine){myTimeLine.eventCallback("onStart",null).eventCallback("onComplete",null).eventCallback("onReverseComplete",null).eventCallback("onUpdate",null).eventCallback("onRepeat",null).clear().delay(0).repeat(0).repeatDelay(0).yoyo(false).time(0);}
TM.set(".g_Dog",{x:0,y:-20})
TM.set(".g_Fleg_1",{transformOrigin:"21.53 15.83"})
TM.set(".g_Fleg_2",{transformOrigin:"25.23 14.9"})
TM.set(".g_Fleg_3",{transformOrigin:"17.52 12.72"})
TM.set(".g_Fleg_4",{transformOrigin:"8.43 10.21"})
TM.set(".g_Fleg_5",{transformOrigin:"5.74 7.81"})
TM.set(".g_FlegL_1",{rotation:0})
TM.set(".g_FlegL_2",{rotation:6})
TM.set(".g_FlegL_3",{rotation:-3})
TM.set(".g_FlegL_4",{rotation:-3})
TM.set(".g_FlegL_5",{rotation:0})
TM.set(".g_FlegR_1",{rotation:0})
TM.set(".g_FlegR_2",{rotation:0})
TM.set(".g_FlegR_3",{rotation:0})
TM.set(".g_FlegR_4",{rotation:0})
TM.set(".g_FlegR_5",{rotation:0})
TM.set(".g_Hleg_1",{transformOrigin:"58.83 2.27"})
TM.set(".g_Hleg_2",{transformOrigin:"40.52 38.18"})
TM.set(".g_Hleg_3",{transformOrigin:"50.45 20.63"})
TM.set(".g_Hleg_4",{transformOrigin:"10.32 10.18"})
TM.set(".g_Hleg_5",{transformOrigin:"8.34 9.99"})
TM.set(".g_HlegL_1",{rotation:0})
TM.set(".g_HlegL_2",{rotation:2})
TM.set(".g_HlegL_3",{rotation:4})
TM.set(".g_HlegL_4",{rotation:0})
TM.set(".g_HlegL_5",{rotation:0})
TM.set(".g_HlegR_1",{rotation:0})
TM.set(".g_HlegR_2",{rotation:0})
TM.set(".g_HlegR_3",{rotation:0})
TM.set(".g_HlegR_4",{rotation:0})
TM.set(".g_HlegR_5",{rotation:0})
TM.set(".g_Tail_1",{transformOrigin:"124.58 7.57",rotation:0})
TM.set(".g_Tail_2",{transformOrigin:"90.45 10.94",rotation:0})
TM.set(".g_Tail_3",{transformOrigin:"71.46 8.03",rotation:0})
TM.set(".g_Tail_4",{transformOrigin:"58.53 4.1",rotation:0})
TM.set(".g_Tail_5",{transformOrigin:"51.6 5.09",rotation:0})
TM.set(".g_Tail_6",{transformOrigin:"49.25 4.72",rotation:0})
TM.set(".g_Tail_7",{transformOrigin:"49.25 4.48",rotation:0})
TM.set(".g_Tail_8",{transformOrigin:"49.25 4.92",rotation:0})
TM.set(".g_Tail_9",{transformOrigin:"44.54 4.67",rotation:0})
TM.set(".g_Tail_10",{transformOrigin:"33.95 3.72",rotation:0})
TM.set(".g_Tail_11",{transformOrigin:"18.65 6.35",rotation:0})
TM.set(".g_Body",{transformOrigin:"264.88 134.44",rotation:0})
TM.set(".g_Body_1",{transformOrigin:"264.88 32.93",rotation:0})
TM.set(".g_Body_2",{transformOrigin:"217.80 33.70",rotation:0})
TM.set(".g_Body_3",{transformOrigin:"160.12 28.98",rotation:0})
TM.set(".g_Body_4",{transformOrigin:"109.51 16.04",rotation:0})
TM.set(".g_Body_5",{transformOrigin:"61.25 10.15",rotation:0})
TM.set(".g_Neck_1",{transformOrigin:"26.88 134.44",rotation:0})
TM.set(".g_Neck_2",{transformOrigin:"37.13 115.1",rotation:0})
TM.set(".g_Neck_3",{transformOrigin:"29.74 92.59",rotation:0})
TM.set(".g_Neck_4",{transformOrigin:"23.36 70.07",rotation:0})
TM.set(".g_DogHead",{transformOrigin:"21.43 57.94",rotation:0})
TM.set(".g_EarL",{transformOrigin:"7.58 34.4",rotation:28,x:-2})
TM.set(".g_EarL_2",{transformOrigin:"4.22 21.26",rotation:-8})
TM.set(".g_EarL_3",{transformOrigin:"3.56 17.92",rotation:0})
TM.set(".g_EarR",{transformOrigin:"7.58 34.4",rotation:30,x:-2})
TM.set(".g_EarR_2",{transformOrigin:"4.22 21.26",rotation:0})
TM.set(".g_EarR_3",{transformOrigin:"3.56 17.92",rotation:0})
TM.set(".g_DogEye",{transformOrigin:"5 5.5",rotation:0})
function eyeBlink_r(){var r=Math.round(Math.random()*10)
console.log("眨眼，下次间隔："+r+"秒")
initTL(g_DogEye_TL)
g_DogEye_TL.to(".g_DogEye",blink_t,{repeat:1,scaleY:0,yoyo:true,delay:r,onComplete:eyeBlink_r})}
TM.set(".g_Jaw",{transformOrigin:"9.18 8.34",rotation:0})
TM.set(".g_Tongue",{transformOrigin:"-0.4 0.03",rotation:8,scaleX:0.9})
TM.set(".g_Tongue_2",{transformOrigin:"3.47 5.55",rotation:4,scaleX:0.93})
TM.set(".g_Tongue_3",{transformOrigin:"2.66 2.63",rotation:0,scaleX:0.96})
TM.set(".g_Tongue_4",{transformOrigin:"2.2 2.44",rotation:0,scaleX:1})
TM.set(".g_Tongue_5",{transformOrigin:"2.4 2.26",rotation:0,scaleX:1})
TM.set(".g_Tongue_6",{transformOrigin:"1.66 2.07",rotation:0,scaleX:1})
TM.set(".Dog_shadow",{transformOrigin:"204.1 9.6",y:-20})
function dog_normal(){console.log("开始正常呼吸状态")
TL.g_Dog_TL.repeat(-1).yoyo(true)
TL.g_Dog_TL.add([TM.to(".g_Body",breathe_t,{x:4.5,y:6}),TM.to(".g_Body_1",breathe_t,{scaleX:1.01,scaleY:1.02,rotation:"+=5"}),TM.to(".g_Body_2",breathe_t,{scaleX:1.01,scaleY:1.01,rotation:"-=1"}),TM.to(".g_Body_3",breathe_t,{scaleY:1.01,rotation:"-=3"}),TM.to(".g_Body_4",breathe_t,{rotation:"-=2"}),TM.to(".g_Body_5",breathe_t,{rotation:"-=1"}),TM.to(".g_Neck_1",breathe_t,{rotation:"-=1"}),TM.to(".g_Neck_2",breathe_t,{rotation:"-=1"}),TM.to(".g_Neck_3",breathe_t,{rotation:"+=1"}),TM.to(".g_Neck_4",breathe_t,{rotation:"+=2"}),TM.to(".g_FlegL_1",breathe_t,{x:5,y:6,rotation:"-=5.0"}),TM.to(".g_FlegL_2",breathe_t,{rotation:"+=15.4"}),TM.to(".g_FlegL_3",breathe_t,{rotation:"-=13.6"}),TM.to(".g_FlegL_4",breathe_t,{rotation:"+=0.6"}),TM.to(".g_FlegL_5",breathe_t,{rotation:"+=3"}),TM.to(".g_FlegR_1",breathe_t,{x:5,y:6,rotation:"-=5.3"}),TM.to(".g_FlegR_2",breathe_t,{rotation:"+=18.2"}),TM.to(".g_FlegR_3",breathe_t,{rotation:"-=18.0"}),TM.to(".g_FlegR_4",breathe_t,{rotation:"+=2.6"}),TM.to(".g_FlegR_5",breathe_t,{rotation:"+=3"}),TM.to(".g_FlegR_4",breathe_t/2,{repeat:1,yoyo:true,y:"-=.2"}),TM.to(".g_FlegR_5",breathe_t/2,{repeat:1,yoyo:true,y:"-=.2"}),TM.to(".g_HlegL_1",breathe_t,{x:1,y:-3,rotation:"-=1"}),TM.to(".g_HlegL_2",breathe_t,{rotation:"+=9"}),TM.to(".g_HlegL_3",breathe_t,{rotation:"-=9.0"}),TM.to(".g_HlegL_4",breathe_t,{rotation:"-=2"}),TM.to(".g_HlegL_5",breathe_t,{rotation:"+=0.5"}),TM.to(".g_HlegR_1",breathe_t,{x:1,y:-3,rotation:"+=1"}),TM.to(".g_HlegR_2",breathe_t,{rotation:"+=6"}),TM.to(".g_HlegR_3",breathe_t,{rotation:"-=9.2"}),TM.to(".g_HlegR_4",breathe_t,{rotation:"-=0"}),TM.to(".g_HlegR_5",breathe_t,{rotation:"+=1.5"}),TM.to(".g_Tail_1",breathe_t,{x:1,y:-3}),TM.to(".g_Tail_2",breathe_t,{rotation:"-=1"}),TM.to(".g_Tail_3",breathe_t,{rotation:"-=.5"}),TM.to(".g_Tail_7",breathe_t,{rotation:"-=5"}),TM.to(".g_Jaw",breathe_t/2,{rotation:"+=2"}),],0,"normal",0)
eyeBlink_r()}
dog_normal()
function dog_yawn(){console.log("打了一个哈欠")
var yawn_t=1;initTL(g_DogEye_TL)
g_DogEye_TL.to(".g_DogEye",blink_t,{delay:yawn_t+0.5,repeat:0,scaleY:0}).to(".g_DogEye",blink_t,{delay:yawn_t,repeat:0,scaleY:1,onComplete:eyeBlink_r})
TL.g_Tongue_TL.repeat(1).yoyo(true)
initTL(TL.g_Dog_TL)
TL.g_Dog_TL.eventCallback("onComplete",initAnimtn)
TL.g_Dog_TL.add([TL.g_Jaw_TL.to(".g_Jaw",yawn_t,{rotation:"+=30"}).to(".g_Jaw",yawn_t/2,{rotation:"+=5"}).to(".g_Jaw",yawn_t,{rotation:"+=10"}).to(".g_Jaw",yawn_t,{rotation:"-=45"}).to(".g_Jaw",yawn_t,{delay:yawn_.........完整代码请登录后点击上方下载按钮下载查看