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:.........完整代码请登录后点击上方下载按钮下载查看