Advertisement Jump to content
Sign in to follow this  
lynob

Libgdx: Candy crush style bouncing button animation

This topic is 672 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

This article describes how to make candy crush style bouncing button animation using SVG. Demo
 
 
 
<?xml version="1.0" encoding="utf-8" standalone="no"?>
                  <svg width="100%" height="100%" viewBox="0 0 200 200"  version="1.2" preserveAspectRatio="xMidYMin slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc> find more buttons like this on http://www.genolve.com </desc>
    <defs>
    <filter  width="200%" height="200%" x="-50%" y="-50%" filterUnits="userSpaceOnUse" id="bevel_shadow" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
    <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
    <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb"  result="specOut">
    <fePointLight x="-5000" y="-10000" z="20000"/>
    </feSpecularLighting>
    <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
    <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
    <feMerge>
    <feMergeNode in="offsetBlur"/>
    <feMergeNode in="litPaint"/>
    </feMerge>
    </filter>
    </defs>
    <symbol overflow="visible" id="mybutton">
    <g id="button">
     <rect id="rect1" fill="#f422f2" x="-40" y="-14" width="80" height="28" filter="url(#bevel_shadow)" rx="10" ry="10" shape-rendering="optimizeSpeed">
     </rect>
     <text id="text" fill="#000000" x="1" y="7" font-size="20" text-anchor="middle" font-family="Arial,Chaparral,Lucida Console, Monaco" font-weight="bold" text-rendering="optimizeSpeed">
     Start!
     </text>
    <a target="_blank" xlink:href="http://www.genolve.com/svg/en/searchNew.php?q=animated+buttons&pageNum_rsGenes=0">
     <text id="text" fill="#ffffff" x="0" y="6" font-size="20" text-anchor="middle" font-family="Arial,Chaparral,Lucida Console, Monaco" font-weight="bold"  text-rendering="optimizeSpeed">
    Start!
     </text></a>
    <animateTransform
      attributeName="transform"
     calcMode="spline" 
      type="scale"
      values="1.02,.98; .98,1.02; 1.02,.98"
     keyTimes="0;.5;1"
     keySplines="0.4 0 .6 1;.4 0  0.6 1"
     dur="1.2s"
     repeatCount="indefinite"
      ></animateTransform>
     
    </g>
    </symbol>
    <use xlink:href="#mybutton" x="100" y="50" />
    </svg>
 
 
I want to use it on the main menu screen. I could try to make it as an animated Gif and play it using GifDecoder. But is it possible to make it as PNG and do the animation using Libgdx instead?

Share this post


Link to post
Share on other sites
Advertisement

 

This article describes how to make candy crush style bouncing button animation using SVG. Demo
 
 
 
<?xml version="1.0" encoding="utf-8" standalone="no"?>
                  <svg width="100%" height="100%" viewBox="0 0 200 200"  version="1.2" preserveAspectRatio="xMidYMin slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc> find more buttons like this on http://www.genolve.com </desc>
    <defs>
    <filter  width="200%" height="200%" x="-50%" y="-50%" filterUnits="userSpaceOnUse" id="bevel_shadow" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
    <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
    <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb"  result="specOut">
    <fePointLight x="-5000" y="-10000" z="20000"/>
    </feSpecularLighting>
    <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
    <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
    <feMerge>
    <feMergeNode in="offsetBlur"/>
    <feMergeNode in="litPaint"/>
    </feMerge>
    </filter>
    </defs>
    <symbol overflow="visible" id="mybutton">
    <g id="button">
     <rect id="rect1" fill="#f422f2" x="-40" y="-14" width="80" height="28" filter="url(#bevel_shadow)" rx="10" ry="10" shape-rendering="optimizeSpeed">
     </rect>
     <text id="text" fill="#000000" x="1" y="7" font-size="20" text-anchor="middle" font-family="Arial,Chaparral,Lucida Console, Monaco" font-weight="bold" text-rendering="optimizeSpeed">
     Start!
     </text>
    <a target="_blank" xlink:href="http://www.genolve.com/svg/en/searchNew.php?q=animated+buttons&pageNum_rsGenes=0">
     <text id="text" fill="#ffffff" x="0" y="6" font-size="20" text-anchor="middle" font-family="Arial,Chaparral,Lucida Console, Monaco" font-weight="bold"  text-rendering="optimizeSpeed">
    Start!
     </text></a>
    <animateTransform
      attributeName="transform"
     calcMode="spline" 
      type="scale"
      values="1.02,.98; .98,1.02; 1.02,.98"
     keyTimes="0;.5;1"
     keySplines="0.4 0 .6 1;.4 0  0.6 1"
     dur="1.2s"
     repeatCount="indefinite"
      ></animateTransform>
     
    </g>
    </symbol>
    <use xlink:href="#mybutton" x="100" y="50" />
    </svg>
 
 
I want to use it on the main menu screen. I could try to make it as an animated Gif and play it using GifDecoder. But is it possible to make it as PNG and do the animation using Libgdx instead?

 

Nice concept,can I use this concept for HTML5 game development?

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!