Jump to content
  • Advertisement
Sign in to follow this  
lynob

Libgdx: Candy crush style bouncing button animation

This topic is 494 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.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!