Editing custom animation code for SVG files is probably one of the most elusive subjects to find tutorials on. There are several tutorials on how to enter the code into an SVG file after exporting from composer but if you want to create your own code or change it for another device then you may still be hopelessly lost. Hopefully I will be able to clear this up for you a bit with this tutorial. Lets start by breaking down the code just a bit, below is the code for a single icon separated from the rest of the code:

<animateTransform xlink:href="#Layer_1" id="_anim_l1" attributeName="transform" type="translate" to="-40,0" dur="0.5s" fill="freeze" begin="Theme_Button_1.focusin" />

There are a few parts of the code that can cause errors when you are customizing it so I will separate it out to point them out

• Layer_1: This needs to match the name of the layer where your animations will occur, and it needs to match exactly. All spaces must be replaced with an underscore ( _ ) so Layer 1 will be entered as Layer_1
• _anim_l1: This will change with each item that you are animating (_anim_l1, _anim_l2, _anim_l3, etc) it DOES NOT however have to match the icon number (_anim_l1 doesn’t have to be paired with Theme_Button_1)
• to="-40,0": This designates where you would like to move when the action is initiated. Example: to="-40,0" will move 40 pixels to the left.
• dur="0.5s": This is simply how long the movement will take, you can experiment with this to get the desired effect or motion.
• "Theme_Button_1.focusin": This piece decides when the action will happen, so for the code shown here it will be initiated when you focus in on Theme Button 1
• Please note that each animation will effect the ENTIRE layer, so if you have 10 icons on a single layer when you animate a single icon all 10 will move at the same time.

So the whole code string put together translates to this: Theme Button 1 which is located on Layer 1 will move -40 pixels on the X axis and 0 Pixels on the Y axis when Focused In On The code below is for a 10 icon sliding dock on a BlackBerry Pearl 9100

Popularity: 1% [?]