facebookarchive / Keyframes

A library for converting Adobe AE shape based animations to a data format and playing it back on Android and iOS devices.
https://facebookincubator.github.io/Keyframes/
Other
5.33k stars 302 forks source link

Implement stroke trim & thickness & stuff #99

Open Nabeel-khalid opened 7 years ago

Nabeel-khalid commented 7 years ago

Hi Guys,

I'm using After effects 2017 on macOS Sierra. Every time i export i get a different result. As you can see from the gif below the export doesn't work. It hasn't copied over the colour, stroke thickness or the shape rotation only the shape path.

Image of issue

Here is the log from the export

2017-01-04T18:32:53.560Z    Exporting "animation" from "/Users/user/Desktop/loader.aep"
2017-01-04T18:32:53.560Z    Encoding...
2017-01-04T18:32:53.566Z    tuna
2017-01-04T18:32:53.588Z    tuna/Contents
2017-01-04T18:32:53.593Z    tuna/Contents/Shape 1
2017-01-04T18:32:53.607Z    tuna/Contents/Shape 1/Contents
2017-01-04T18:32:53.612Z    tuna/Contents/Shape 1/Contents/Path 1
2017-01-04T18:32:53.762Z    tuna/Contents/Shape 1/Contents/Stroke 1
2017-01-04T18:32:53.957Z    tuna/Contents/Shape 1/Contents/Stroke 1/Dashes
2017-01-04T18:32:53.964Z    tuna/Contents/Shape 1/Contents/Fill 1
2017-01-04T18:32:54.018Z    tuna/Contents/Shape 1/Transform
2017-01-04T18:32:54.194Z    tuna/Contents/Shape 1/Material Options
2017-01-04T18:32:54.204Z    tuna/Masks
2017-01-04T18:32:54.210Z    tuna/Effects
2017-01-04T18:32:54.215Z    tuna/Transform
2017-01-04T18:32:54.492Z    tuna/Layer Styles
2017-01-04T18:32:54.497Z    tuna/Geometry Options
2017-01-04T18:32:54.503Z    tuna/Material Options
2017-01-04T18:32:54.509Z    tuna/Audio
2017-01-04T18:32:54.515Z    Cloning...
2017-01-04T18:32:54.526Z    Exporting...
2017-01-04T18:32:54.532Z    UNSUPPORTED: %s Root → animation → tuna → Contents → Rotation → Rotation on vector
2017-01-04T18:32:54.545Z    Saving...
2017-01-04T18:32:54.553Z    FB Keyframes JSON Exported:
2017-01-04T18:32:54.554Z    /Users/loader.aep.comp-1-animation.kf.json
2017-01-04T18:32:54.555Z    Calling After Creation Hook command: `"/Users/(lib)/hooks-macos/after-creation.sh" "/Users/loader.aep.comp-1-animation.kf.json"`
2017-01-04T18:32:54.618Z    + LocalFile='/Users/loader.aep.comp-1-animation.kf.json'
++ /sbin/md5 -q '/Users/loader.aep.comp-1-animation.kf.json'
+ RemoteFile=/sdcard/PreviewKeyframesAnimation-4217af87847c8b50f41f2653b40e7fe5.json
+ main
+ read serial
++ adb devices
++ awk 'NR>1 {print $1}'
+ [[ emulator-5554 == '' ]]
+ echo 'serial='\''emulator-5554'\'''
+ read serial
+ [[ '' == '' ]]
+ break
+ push-the-animation emulator-5554
+ local serial=emulator-5554
+ /platform-tools/adb -s emulator-5554 push '/Users/loader.aep.comp-1-animation.kf.json' /sdcard/PreviewKeyframesAnimation-4217af87847c8b50f41f2653b40e7fe5.json
/Users/Desktop/Keyframes-master/Keyframes After Effects Scripts/(lib)/hooks-macos/after-creation.sh: line 9: /platform-tools/adb: No such file or directory
serial='emulator-5554'

2017-01-04T18:32:54.620Z    Raw JSON Exported:
2017-01-04T18:32:54.623Z    /Users/loader.aep.comp-1-animation.json

Here is the JSON File

{
  "formatVersion": "1.0",
  "name": "ANIMATION",
  "key": 0,
  "frame_rate": 30,
  "animation_frame_count": 50,
  "canvas_size": [
    200,
    200
  ],
  "features": [
    {
      "name": "tuna",
      "feature_animations": [
        {
          "property": "ANCHOR_POINT",
          "key_values": [
            {
              "start_frame": 0,
              "data": [
                0,
                0
              ]
            }
          ],
          "timing_curves": []
        },
        {
          "property": "X_POSITION",
          "key_values": [
            {
              "start_frame": 0,
              "data": [
                100
              ]
            }
          ],
          "timing_curves": []
        },
        {
          "property": "Y_POSITION",
          "key_values": [
            {
              "start_frame": 0,
              "data": [
                100
              ]
            }
          ],
          "timing_curves": []
        }
      ],
      "stroke_line_cap": "butt",
      "key_frames": [
        {
          "start_frame": 0,
          "data": [
            "M0.33,0.33",
            "L0.33,0.33",
            "L0.33,0.33",
            "L0.33,0.33",
            "L0.33,0.33"
          ]
        },
        {
          "start_frame": 24,
          "data": [
            "M30.69,-30.12",
            "L-30.02,-30.12",
            "L-30.02,30.79",
            "L30.69,30.79",
            "L30.69,-30.12"
          ]
        },
        {
          "start_frame": 28,
          "data": [
            "M30.69,-30.12",
            "L-30.02,-30.12",
            "L-30.02,30.79",
            "L30.69,30.79",
            "L30.69,-30.12"
          ]
        },
        {
          "start_frame": 49,
          "data": [
            "M60.34,-59.87",
            "L-59.67,-59.87",
            "L-59.67,60.54",
            "L60.34,60.54",
            "L60.34,-59.87"
          ]
        }
      ],
      "timing_curves": [
        [
          [
            0.166666665,
            0
          ],
          [
            0.833333335,
            1
          ]
        ],
        [
          [
            0.166666665,
            0
          ],
          [
            0.833333335,
            1
          ]
        ],
        [
          [
            0.166666665,
            0
          ],
          [
            0.833333335,
            1
          ]
        ]
      ],
      "fill_color": "#ff000000",
      "stroke_color": "#ffff0000",
      "stroke_width": 0
    }
  ],
  "animation_groups": []
}

Also please see the Layer keyframes. I've used shape path instead of scale as it didn't export the scale properties. Image of keyframes

subtleGradient commented 7 years ago

Keyframes exporter doesn't support having transforms on shapes, paths, or path groups themselves (yet). The only transforms that works are the ones on layers. I'd like to get that fixed eventually (#101).

UNSUPPORTED: %s Root → animation → tuna → Contents → Rotation → Rotation on vector
Nabeel-khalid commented 7 years ago

@subtleGradient Does keyframes support stoke thickness? It doesn't look like it currently. Also is there a doc on what is supported and what is not?

Thanks

yozef commented 7 years ago

Here it is: https://github.com/facebookincubator/Keyframes/blob/master/docs/AfterEffectsGuideline.md

Though I'm guessing more and more features will be added.

Nabeel-khalid commented 7 years ago

I guess stroke trim, thickness and others are missing. I'm guessing they are not supposed at the moment.