Essentially this thing:

<objectAnimator propertyXName... propertyYName... pathData...>

Would probably help bring in contributors, at least in the early stages of the project.

It is possible to animate the entire vector's opacity by animating the <vector> tag's android:alpha property. AndroidIconAnimator doesn't yet support setting or animating this property.

Here is an example AVD that animates this property.

Test on real devices, with both support library and native versions

• All objectAnimators have an unnecessary name attribute
• vector and all objectAnimators unnecessary declared the android namespace
• consider a particular order of attributes within an objectAnimator: propertyName, valueFrom, valueTo, (startOffset), duration, (interpolator), (valueType)
• skip float valueTypes as they're the default
• Using a linear interpolator outputs android:anim/linear_interpolator, should change to android:interpolator/linear

Lower priority, as most of the use cases right now are for small icons.

For example, things like:

@android:color/transparent

or

@android:integer/config_mediumAnimTime

etc.

The second half of the stem animation is delayed a bit. The duration is also too long (currently 2500ms).

Part of the effort to clean up the output AVD

log:

>gulp server
[09:55:34] Using gulpfile F:\bower\AndroidIconAnimator\gulpfile.js
[09:55:34] Task 'server' is not in your gulpfile
[09:55:34] Please check the documentation for proper gulpfile formatting

npm version:4.0.3
gulp version:

gulp -v
[10:00:16] CLI version 3.9.1
[10:00:16] Local version 3.9.1

environment:

操作系统名称	Microsoft Windows 10 专业版
版本	10.0.14393 版本 14393

Maybe use PaperJS? Or implement it ourselves. Need to unwind layer transforms.

In the property inspector, since you can manually enter path data, show an error when there's a problem parsing the path data

From Nick: When adding a second animation to a property i.e. clicking on the plus icon in the left pane which shows an 'Add another animation' tooltip it seemed hit or miss if this would work. I think this might have been when acting on the bottom-most layer where the tooltip shows on top of the button

Obviously super long term goal, but it'd be pretty bad ass IMO.

The below SVG incorrectly imports the fill color as #000000ff instead of #ff000000. Same thing happens with stroke colors too.

<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="#000"/>
</svg>

If you have a path with a stroke, and add a scale to its group, ensure that the preview output matches what you'd see on a real device. A good test case is the menu-to-back animation.

Ensure that colors are always cleaned up into #AARRGGBB format

[deleted comment]

Right now the right panel has an editable 'id' field. I think it would make more sense to rename this to 'name' as this way it corresponds more closely to the actual android:name attribute used in XML.

i.e. ?attr/colorControlNormal, ?attr/colorControlActivated, ?attr/colorAccent, etc.

Not sure if this is possible or not because I guess it would require users to also specify some sort of Android theme as well... but just an idea.

Just for the sake of completeness... :)

...because I feel like it would be a crime not to. :)

For example, consider this ic_add_black_24dp.svg that I downloaded/modified from go/icons:

<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" 
        viewBox="0 0 24 24" fill="#ff000000">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="#fffffff"/>
</svg>

AndroidIconAnimator displays a white plus sign path. However, the SVG should really display a black plus sign path.

Right now it erroneously says there are no shared properties :-(

I mean I know this project is mainly geared towards Android... but it seems like it wouldn't be that hard to do. :)

Specifically where android:repeatCount="-1" which is used to specify an animation that loops forever (such as the indeterminate progress bar).

This might be tricky given the current UI for playing animations. A simple repeating animation that would be nice to get working is the circular indeterminate progress indicator, which plays four animations in parallel: three that are 1,333ms and another that is 4,444ms.

Unless you think it's super obvious. :p

I assumed all you needed to do was:

npm install

and then

gulp serve

However, when I tried this it serves a blank website and the following output:

alockwood@kida:~/AndroidIconAnimator$ gulp serve
[14:03:26] Using gulpfile ~/AndroidIconAnimator/gulpfile.js
[14:03:26] Starting 'styles'...
[14:03:26] Starting 'scripts'...
[14:03:26] Starting 'icons'...
[14:03:27] Starting 'bower'...
[14:03:27] Using cwd: /usr/local/google/home/alockwood/AndroidIconAnimator
[14:03:27] Using bower dir: .tmp/lib
[14:03:28] styles all files 18.65 kB
[14:03:28] Finished 'styles' after 1.68 s
[14:03:31] icons all files 4.87 kB
[14:03:31] Finished 'icons' after 4.83 s
Error: Cannot find module '../../../_sandbox/debug.iconanim.json' from '/usr/local/google/home/alockwood/AndroidIconAnimator/app/pages/studio'
    at /usr/local/google/home/alockwood/AndroidIconAnimator/node_modules/browserify/node_modules/resolve/lib/async.js:55:21
    at load (/usr/local/google/home/alockwood/AndroidIconAnimator/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/usr/local/google/home/alockwood/AndroidIconAnimator/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /usr/local/google/home/alockwood/AndroidIconAnimator/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)
[14:03:34] Finished 'scripts' after 7.71 s
[14:03:37] Finished 'bower' after 11 s
[14:03:37] Starting 'serve'...
[14:03:38] Finished 'serve' after 95 ms
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://172.26.113.33:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://172.26.113.33:3001
 --------------------------------------
[BS] Serving files from: .tmp
[BS] Serving files from: app

Possibly by providing an "Import" drop down menu in between "File" and "Export". The option to import VD/AVDs could go here too (see #8).

This is apparently what VectorDrawable uses by default. It is also the default used by SVG.

Possibly mark as Will Not Fix if there's nothing simple

Could be a cool (low-priority) feature to add in the future.

It is sometimes necessary to create 0-duration animators in order to reset a vector's state to it's desired value (Nick Butcher makes use of it in a few of his Plaid animations, such as the search to back animation here.

It is possible to create zero-duration animators using AndroidIconAnimator right now... however, the user must be aware of this hack ahead of time and it's not super obvious to newcomers. We might want to investigate whether there is a way for these animators to be generated automatically (rather than requiring the user to insert them manually).

According to the docs:

Sets the fillType for a path. The types can be either "evenOdd" or "nonZero". They behave the same as SVG's "fill-rule" properties. For more details, see FillRuleProperty.

In Android, the following path command strings are equivalent and legal:

android:pathData="M0,0 L24,24"

and

android:pathData="L24,24"

AndroidIconAnimator currently requires you to begin command strings with "M0,0", which technically shouldn't be necessary.

Would be nice to be able to export to other formats besides AVD, including Facebook Keyframes

Also possibly, hold down some modifier key to snap to 100ms increments

Using 2 bezier points, or an entire custom path?