For this assignment I decided that I wanted to create a scalable search bar animation. The user presses the search icon and a basketball appears that then reveals a search field. I initially was planning on using Adobe After Effects and a library called “bodyinmotion” that converts .aep files into .svg files. However, I struggled with after effects and the svg files had load of unnecessary code. Then, instead, I decided to use default SVG and CSS for the animation. I wanted to use SVG so that the animation will look crisp on any screen dimensions. I designed my shapes in inkscape and then copied only the necessary code into an html file. While time consuming as the documentation for SVG animation isn’t the best, I was able to figure out how to do multiple animations. I plan on adapting this animation to javascript so that I can use it in my Web UI project. Everything in the animation is how I initially designed it. The only thing I was not able to do was to have the ball rotate as it moves. I am very pleased with how the ball seems to stretch the search bar as it moves. Surprisingly, I found that I was a lot more comfortable programming the animations than using a large software suite like Adobe After Effects. I have included a .gif screen recording of the animation and will also include the html file below that I wrote that does the animation. For some reason the animation translate feature does not work in a browser that is not firefox.
index.html:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Bball Stats</title>
</head>
<body>
<svg width=”500″ height=”200″>
<g opacity=”1″ transform=”scale(2,2)” class=”search-icon” stroke-width=”2.5″ stroke=”#000000″ fill=”#fa8320″>
<animateTransform attributeName=”transform”
type=”scale”
from=”2 2″
to=”1.75 1.75″
begin=”0.5s”
dur=”0.1s”
repeatCount=”1″
fill=”freeze”/>
<animateTransform attributeName=”transform”
type=”scale”
from=”1.75 1.75″
to=”2 2″
begin=”0.6s”
dur=”0.1s”
repeatCount=”1″
fill=”freeze”/>
<animate attributeName=”opacity”
from=”1″
to=”0″
begin=”0.7s”
dur=”0.3s”
repeatCount=”1″
fill=”freeze”/>
<path d=”M62.00 57.00l-6-6″/>
<circle cx=”50″ cy=”46″ r=”8″>
</circle>
</g>
<rect id=”search-rect” transform=”scale(2,2)” fill=”#fa8320″ stroke=”#000000″ stroke-width=”5″ fill=”none” x=”25″ y=”25″ rx=”25″ rx=”25″ width=”50″ height=”50″ opacity = “0”>
<animate attributeName=”width”
from=”50″
to=”200″
begin=”2.0s”
dur=”1s”
repeatCount=”1″
fill=”freeze”/>
<animate attributeName=”opacity”
from=”0″
to=”1″
begin=”1.5s”
dur=”0.5s”
repeatCount=”1″
fill=”freeze”/>
</rect>
<svg x=”50″ y=”50″ width=”400″ height=”100″>
<style>svg { background-color: #fa8320; }</style>
<g
inkscape:label=”Layer 1″
inkscape:groupmode=”layer”
id=”layer1″
transform=”translate(0,-197)”
opacity=”0″>
<animate attributeName=”opacity”
from=”0″
to=”1″
begin=”1.5s”
dur=”0.5s”
repeatCount=”1″
fill=”freeze”/>
<animate attributeName=”opacity”
from=”1″
to=”0″
begin=”3s”
dur=”0.5s”
repeatCount=”1″
fill=”freeze”/>
<circle
style=”fill:none;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1″
id=”path1445″
cx=”49.979401″
cy=”247.15424″
r=”48.626514″ />
<path
style=”fill:#000000;stroke:#000000;stroke-width:10;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none”
d=”M 1.6036172,249.02512 H 98.22155″
id=”path1449″
inkscape:connector-curvature=”0″ />
<path
style=”fill:none;stroke:#000000;stroke-width:10;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none”
d=”m 49.892857,199.10417 v 96.00595″
id=”path1453″
inkscape:connector-curvature=”0″ />
<path
style=”fill:none;stroke:#000000;stroke-width:10;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1″
d=”m 22.678571,207.28936 c 0,0 23.434523,37.41965 0,79.75298″
id=”path1455″
inkscape:connector-curvature=”0″ />
<path
style=”fill:none;stroke:#000000;stroke-width:10;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1″
d=”m 76.996288,287.01912 c 0,0 -23.43452,-37.41966 0,-79.753″
id=”path1455-3″
inkscape:connector-curvature=”0″ />
</g>
<animateTransform attributeName=”transform”
type=”translate”
from=”0 0″
to=”300 0″
begin=”2s”
dur=”1s”
repeatCount=”1″
fill=”freeze”/>
</svg>
</body>
</html>