├── .gitignore ├── README.md ├── assets ├── animation1_expand_collpase │ ├── expand_collapse_colored.shapeshifter │ ├── ic_baseline_expand_less_24.xml │ └── ic_baseline_expand_more_24.xml ├── animation2_add_tick │ ├── add.svg │ ├── add_tick.sketch │ ├── add_to_tick.shapeshifter │ ├── tick.svg │ └── tick_to_add.shapeshifter ├── animation3_a_camera_lines │ ├── camera1.svg │ ├── camera2.svg │ └── camera_colored_lines.shapeshifter └── animation3_camera_curves │ ├── camera.sketch │ ├── camera4.svg │ ├── camera5.svg │ ├── camera_curve_colored.shapeshifter │ └── wip_camera_curves.shapeshifter └── gifs ├── add_tick_colored.gif ├── camera_line_to_curve.gif ├── camera_lines.gif ├── expand_collapse.gif └── tick_to_add_colored.gif /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # meaningful-vector-animations 2 | This is the place to find all the assets used in the talk "Meaningful vector animations using Shape Shifter" found [here](https://www.youtube.com/watch?v=mU6x7CY1Moc&list=PLnD_TKDSaFyXWrnnEhfxeKABuq49Is-8o) 3 | 4 | All the assets have been taken from Android Asset Studio. 5 | 6 | ## Tools Used 7 | - Shape Shifter 8 | - Sketch 9 | 10 | ## Animation 1 : Expand Collapse Animation 11 | 12 | Start with the Vector Drawables from the first animation folder : [Animation 1](https://github.com/ragdroid/meaningful-vector-animations/tree/master/assets/animation1_expand_collpase) 13 | 14 | ![Hope it turns out like this](https://github.com/ragdroid/meaningful-vector-animations/blob/master/gifs/expand_collapse.gif) 15 | 16 | ### Final Shape Shifter File: [ShapeShifter](https://github.com/ragdroid/meaningful-vector-animations/blob/master/assets/animation1_expand_collpase/expand_collapse_colored.shapeshifter) 17 | 18 | 19 | ## Animation 2 : Add to Favorites Animation 20 | 21 | Start with the Vector Drawables from the first animation folder : [Animation 2](https://github.com/ragdroid/meaningful-vector-animations/tree/master/assets/animation2_add_tick) 22 | 23 | ![Hope it turns out like this: Add to Done](https://github.com/ragdroid/meaningful-vector-animations/blob/master/gifs/add_tick_colored.gif) 24 | 25 | ![Done, Back to Add](https://github.com/ragdroid/meaningful-vector-animations/blob/master/gifs/tick_to_add_colored.gif) 26 | 27 | ### Final Shape Shifter File: [ShapeShifter-Add to Done](https://github.com/ragdroid/meaningful-vector-animations/blob/master/assets/animation2_add_tick/add_to_tick.shapeshifter) 28 | ### Final Shape Shifter File: [ShapeShifter-Done to Add](https://github.com/ragdroid/meaningful-vector-animations/blob/master/assets/animation2_add_tick/tick_to_add.shapeshifter) 29 | 30 | 31 | ## Animation 3 : Camera Click Animation, Lines 32 | 33 | Start with the Vector Drawables from the first animation folder : [Animation 3](https://github.com/ragdroid/meaningful-vector-animations/tree/master/assets/animation3_a_camera_lines) 34 | 35 | ![Hope it turns out like this](https://github.com/ragdroid/meaningful-vector-animations/blob/master/gifs/camera_lines.gif) 36 | 37 | ### Final Shape Shifter File: [ShapeShifter](https://github.com/ragdroid/meaningful-vector-animations/blob/master/assets/animation3_a_camera_lines/camera_colored_lines.shapeshifter) 38 | 39 | ## Animation 4 : Camera Click Animation, Line to Curve 40 | 41 | Start with the Vector Drawables from the first animation folder : [Animation 4](https://github.com/ragdroid/meaningful-vector-animations/tree/master/assets/animation3_camera_curves) 42 | 43 | ![Hope it turns out like this](https://github.com/ragdroid/meaningful-vector-animations/blob/master/gifs/camera_line_to_curve.gif) 44 | 45 | ### Final Shape Shifter File: [ShapeShifter](https://github.com/ragdroid/meaningful-vector-animations/blob/master/assets/animation3_camera_curves/camera_curve_colored.shapeshifter) 46 | 47 | -------------------------------------------------------------------------------- /assets/animation1_expand_collpase/expand_collapse_colored.shapeshifter: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "layers": { 4 | "vectorLayer": { 5 | "id": "14", 6 | "name": "vector", 7 | "type": "vector", 8 | "width": 24, 9 | "height": 24, 10 | "children": [ 11 | { 12 | "id": "3", 13 | "name": "path", 14 | "type": "path", 15 | "pathData": "M 16.59 8.59 L 12 13.17 L 7.41 8.59 L 6 10 L 12 16 L 18 10 Z", 16 | "fillColor": "#7f1751" 17 | } 18 | ] 19 | }, 20 | "hiddenLayerIds": [] 21 | }, 22 | "timeline": { 23 | "animation": { 24 | "id": "16", 25 | "name": "anim", 26 | "duration": 600, 27 | "blocks": [ 28 | { 29 | "id": "34", 30 | "layerId": "3", 31 | "propertyName": "pathData", 32 | "startTime": 0, 33 | "endTime": 250, 34 | "interpolator": "OVERSHOOT", 35 | "type": "path", 36 | "fromValue": "M 12 13.17 L 7.41 8.59 L 6 10 L 12 16 L 18 10 L 16.59 8.59 L 12 13.17", 37 | "toValue": "M 12 8 L 6 14 L 7.41 15.41 L 12 10.83 L 16.59 15.41 L 18 14 L 12 8" 38 | }, 39 | { 40 | "id": "1042", 41 | "layerId": "3", 42 | "propertyName": "pathData", 43 | "startTime": 351, 44 | "endTime": 600, 45 | "interpolator": "OVERSHOOT", 46 | "type": "path", 47 | "fromValue": "M 12 8 L 6 14 L 7.41 15.41 L 12 10.83 L 16.59 15.41 L 18 14 L 12 8", 48 | "toValue": "M 12 13.17 L 7.41 8.59 L 6 10 L 12 16 L 18 10 L 16.59 8.59 L 12 13.17" 49 | } 50 | ] 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /assets/animation1_expand_collpase/ic_baseline_expand_less_24.xml: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /assets/animation1_expand_collpase/ic_baseline_expand_more_24.xml: -------------------------------------------------------------------------------- 1 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /assets/animation2_add_tick/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | add_empty 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/animation2_add_tick/add_tick.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ragdroid/meaningful-vector-animations/390d88c72cc1d74264b5307c952b6ad1f7fc7dca/assets/animation2_add_tick/add_tick.sketch -------------------------------------------------------------------------------- /assets/animation2_add_tick/add_to_tick.shapeshifter: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "layers": { 4 | "vectorLayer": { 5 | "id": "72", 6 | "name": "vector", 7 | "type": "vector", 8 | "width": 20, 9 | "height": 20, 10 | "children": [ 11 | { 12 | "id": "37", 13 | "name": "path", 14 | "type": "path", 15 | "pathData": "M 10 0 C 4.48 0 0 4.48 0 10 C 0 15.52 4.48 20 10 20 C 15.52 20 20 15.52 20 10 C 20 4.48 15.52 0 10 0 Z M 10 18 C 5.59 18 2 14.41 2 10 C 2 5.59 5.59 2 10 2 C 14.41 2 18 5.59 18 10 C 18 14.41 14.41 18 10 18 Z", 16 | "fillColor": "#7f1751", 17 | "strokeWidth": 1 18 | }, 19 | { 20 | "id": "70", 21 | "name": "group", 22 | "type": "group", 23 | "pivotX": 10, 24 | "pivotY": 10, 25 | "children": [ 26 | { 27 | "id": "53", 28 | "name": "path_1", 29 | "type": "path", 30 | "pathData": "M 5 9 L 5 11 L 15 11 L 15 9 Z", 31 | "fillColor": "#7f1751", 32 | "strokeWidth": 1 33 | }, 34 | { 35 | "id": "69", 36 | "name": "path_2", 37 | "type": "path", 38 | "pathData": "M 11 5 L 9 5 L 9 15 L 11 15 Z", 39 | "fillColor": "#7f1751", 40 | "strokeWidth": 1 41 | } 42 | ] 43 | } 44 | ] 45 | }, 46 | "hiddenLayerIds": [] 47 | }, 48 | "timeline": { 49 | "animation": { 50 | "id": "74", 51 | "name": "anim", 52 | "duration": 400, 53 | "blocks": [ 54 | { 55 | "id": "16305", 56 | "layerId": "53", 57 | "propertyName": "pathData", 58 | "startTime": 0, 59 | "endTime": 300, 60 | "interpolator": "FAST_OUT_SLOW_IN", 61 | "type": "path", 62 | "fromValue": "M 5 9 L 5 11 L 15 11 L 15 9 Z", 63 | "toValue": "M 6.702 12.337 L 7.878 13.955 L 15.968 8.077 L 14.792 6.459 Z" 64 | }, 65 | { 66 | "id": "16741", 67 | "layerId": "69", 68 | "propertyName": "pathData", 69 | "startTime": 0, 70 | "endTime": 300, 71 | "interpolator": "FAST_OUT_SLOW_IN", 72 | "type": "path", 73 | "fromValue": "M 9 15 L 11 15 L 11 5 L 9 5 L 9 15", 74 | "toValue": "M 7.875 13.888 L 9.16 12.356 L 5.33 9.142 L 4.044 10.674 L 7.875 13.888" 75 | }, 76 | { 77 | "id": "17260", 78 | "layerId": "70", 79 | "propertyName": "rotation", 80 | "startTime": 0, 81 | "endTime": 300, 82 | "interpolator": "FAST_OUT_SLOW_IN", 83 | "type": "number", 84 | "fromValue": 0, 85 | "toValue": 720 86 | } 87 | ] 88 | } 89 | } 90 | } -------------------------------------------------------------------------------- /assets/animation2_add_tick/tick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | add_tick 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/animation2_add_tick/tick_to_add.shapeshifter: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "layers": { 4 | "vectorLayer": { 5 | "id": "72", 6 | "name": "vector", 7 | "type": "vector", 8 | "width": 20, 9 | "height": 20, 10 | "children": [ 11 | { 12 | "id": "37", 13 | "name": "path", 14 | "type": "path", 15 | "pathData": "M 10 0 C 4.48 0 0 4.48 0 10 C 0 15.52 4.48 20 10 20 C 15.52 20 20 15.52 20 10 C 20 4.48 15.52 0 10 0 Z M 10 18 C 5.59 18 2 14.41 2 10 C 2 5.59 5.59 2 10 2 C 14.41 2 18 5.59 18 10 C 18 14.41 14.41 18 10 18 Z", 16 | "fillColor": "#7f1751", 17 | "strokeWidth": 1 18 | }, 19 | { 20 | "id": "70", 21 | "name": "group", 22 | "type": "group", 23 | "pivotX": 10, 24 | "pivotY": 10, 25 | "children": [ 26 | { 27 | "id": "53", 28 | "name": "path_1", 29 | "type": "path", 30 | "pathData": "M 5 9 L 5 11 L 15 11 L 15 9 Z", 31 | "fillColor": "#7f1751", 32 | "strokeWidth": 1 33 | }, 34 | { 35 | "id": "69", 36 | "name": "path_2", 37 | "type": "path", 38 | "pathData": "M 11 5 L 9 5 L 9 15 L 11 15 Z", 39 | "fillColor": "#7f1751", 40 | "strokeWidth": 1 41 | } 42 | ] 43 | } 44 | ] 45 | }, 46 | "hiddenLayerIds": [] 47 | }, 48 | "timeline": { 49 | "animation": { 50 | "id": "74", 51 | "name": "anim", 52 | "duration": 400, 53 | "blocks": [ 54 | { 55 | "id": "16305", 56 | "layerId": "53", 57 | "propertyName": "pathData", 58 | "startTime": 0, 59 | "endTime": 300, 60 | "interpolator": "FAST_OUT_SLOW_IN", 61 | "type": "path", 62 | "fromValue": "M 6.702 12.337 L 7.878 13.955 L 15.968 8.077 L 14.792 6.459 Z", 63 | "toValue": "M 5 9 L 5 11 L 15 11 L 15 9 Z" 64 | }, 65 | { 66 | "id": "16741", 67 | "layerId": "69", 68 | "propertyName": "pathData", 69 | "startTime": 0, 70 | "endTime": 300, 71 | "interpolator": "FAST_OUT_SLOW_IN", 72 | "type": "path", 73 | "fromValue": "M 7.875 13.888 L 9.16 12.356 L 5.33 9.142 L 4.044 10.674 L 7.875 13.888", 74 | "toValue": "M 9 15 L 11 15 L 11 5 L 9 5 L 9 15" 75 | }, 76 | { 77 | "id": "17260", 78 | "layerId": "70", 79 | "propertyName": "rotation", 80 | "startTime": 0, 81 | "endTime": 300, 82 | "interpolator": "FAST_OUT_SLOW_IN", 83 | "type": "number", 84 | "fromValue": 0, 85 | "toValue": -720 86 | } 87 | ] 88 | } 89 | } 90 | } -------------------------------------------------------------------------------- /assets/animation3_a_camera_lines/camera1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | camera1 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/animation3_a_camera_lines/camera2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | camera2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/animation3_a_camera_lines/camera_colored_lines.shapeshifter: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "layers": { 4 | "vectorLayer": { 5 | "id": "233", 6 | "name": "vector", 7 | "type": "vector", 8 | "width": 553, 9 | "height": 558, 10 | "children": [ 11 | { 12 | "id": "234", 13 | "name": "group_1", 14 | "type": "group", 15 | "pivotX": 276.5, 16 | "pivotY": 279, 17 | "children": [ 18 | { 19 | "id": "235", 20 | "name": "path_1", 21 | "type": "path", 22 | "pathData": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 L 214.333 209.869 L 438.549 80.418 C 394.486 44.529 338.26 23 277 23 Z M 461.664 101.714 L 302 187 L 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 Z M 29.177 214.59 L 184.333 304.17 L 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 Z M 365 249 L 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 L 365 249 Z M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 L 254 372 L 23.147 245.75 Z M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 L 347.667 344 L 124.765 484.823 Z", 23 | "fillColor": "#7f1751", 24 | "strokeWidth": 1 25 | } 26 | ] 27 | } 28 | ] 29 | }, 30 | "hiddenLayerIds": [] 31 | }, 32 | "timeline": { 33 | "animation": { 34 | "id": "236", 35 | "name": "anim", 36 | "duration": 800, 37 | "blocks": [ 38 | { 39 | "id": "237", 40 | "layerId": "235", 41 | "propertyName": "pathData", 42 | "startTime": 0, 43 | "endTime": 400, 44 | "interpolator": "FAST_OUT_SLOW_IN", 45 | "type": "path", 46 | "fromValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 L 214.333 209.869 L 438.549 80.418 C 394.486 44.529 338.26 23 277 23 Z M 461.664 101.714 L 302 187 L 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 Z M 29.177 214.59 L 184.333 304.17 L 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 Z M 365 249 L 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 L 365 249 Z M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 L 254 372 L 23.147 245.75 Z M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 L 347.667 344 L 124.765 484.823 Z", 47 | "toValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 L 247 269 L 438.549 80.418 C 394.486 44.529 338.26 23 277 23 Z M 461.664 101.714 L 272 249 L 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 Z M 29.177 214.59 L 252 299 L 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 Z M 302 259 L 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 L 302 259 Z M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 L 282 309 L 23.147 245.75 Z M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 L 307 285 L 124.765 484.823 Z" 48 | }, 49 | { 50 | "id": "238", 51 | "layerId": "235", 52 | "propertyName": "pathData", 53 | "startTime": 400, 54 | "endTime": 800, 55 | "interpolator": "FAST_OUT_SLOW_IN", 56 | "type": "path", 57 | "fromValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 L 247 269 L 438.549 80.418 C 394.486 44.529 338.26 23 277 23 Z M 461.664 101.714 L 272 249 L 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 Z M 29.177 214.59 L 252 299 L 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 Z M 302 259 L 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 L 302 259 Z M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 L 282 309 L 23.147 245.75 Z M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 L 307 285 L 124.765 484.823 Z", 58 | "toValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 L 214.333 209.869 L 438.549 80.418 C 394.486 44.529 338.26 23 277 23 Z M 461.664 101.714 L 302 187 L 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 Z M 29.177 214.59 L 184.333 304.17 L 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 Z M 365 249 L 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 L 365 249 Z M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 L 254 372 L 23.147 245.75 Z M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 L 347.667 344 L 124.765 484.823 Z" 59 | }, 60 | { 61 | "id": "239", 62 | "layerId": "234", 63 | "propertyName": "rotation", 64 | "startTime": 0, 65 | "endTime": 400, 66 | "interpolator": "FAST_OUT_SLOW_IN", 67 | "type": "number", 68 | "fromValue": 0, 69 | "toValue": 180 70 | }, 71 | { 72 | "id": "240", 73 | "layerId": "234", 74 | "propertyName": "rotation", 75 | "startTime": 400, 76 | "endTime": 800, 77 | "interpolator": "FAST_OUT_SLOW_IN", 78 | "type": "number", 79 | "fromValue": 180, 80 | "toValue": 0 81 | } 82 | ] 83 | } 84 | } 85 | } -------------------------------------------------------------------------------- /assets/animation3_camera_curves/camera.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ragdroid/meaningful-vector-animations/390d88c72cc1d74264b5307c952b6ad1f7fc7dca/assets/animation3_camera_curves/camera.sketch -------------------------------------------------------------------------------- /assets/animation3_camera_curves/camera4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | camera4 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/animation3_camera_curves/camera5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | camera5 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/animation3_camera_curves/camera_curve_colored.shapeshifter: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "layers": { 4 | "vectorLayer": { 5 | "id": "593", 6 | "name": "vector", 7 | "type": "vector", 8 | "width": 553, 9 | "height": 558, 10 | "children": [ 11 | { 12 | "id": "594", 13 | "name": "group", 14 | "type": "group", 15 | "pivotX": 276.5, 16 | "pivotY": 279, 17 | "children": [ 18 | { 19 | "id": "595", 20 | "name": "path", 21 | "type": "path", 22 | "pathData": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 L 214.333 209.869 L 438.549 80.418 C 394.486 44.529 338.26 23 277 23 Z M 461.664 101.714 L 302 187 L 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 Z M 29.177 214.59 L 184.333 304.17 L 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 Z M 365 249 L 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 L 365 249 Z M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 L 254 372 L 23.147 245.75 Z M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 L 347.667 344 L 124.765 484.823 Z", 23 | "fillColor": "#7f1751", 24 | "strokeWidth": 1 25 | } 26 | ] 27 | } 28 | ] 29 | }, 30 | "hiddenLayerIds": [] 31 | }, 32 | "timeline": { 33 | "animation": { 34 | "id": "596", 35 | "name": "anim", 36 | "duration": 800, 37 | "blocks": [ 38 | { 39 | "id": "597", 40 | "layerId": "595", 41 | "propertyName": "pathData", 42 | "startTime": 0, 43 | "endTime": 400, 44 | "interpolator": "FAST_OUT_SLOW_IN", 45 | "type": "path", 46 | "fromValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 C 214.333 80.773 214.333 130.806 214.333 180.84 C 214.333 190.516 214.333 200.193 214.333 209.869 C 222.854 204.949 231.375 200.03 239.896 195.11 C 306.114 156.88 372.331 118.649 438.549 80.418 C 394.486 44.529 338.26 23 277 23 L 277 23 M 461.664 101.714 C 408.443 130.143 355.221 158.571 302 187 C 310.464 191.757 318.928 196.514 327.393 201.272 C 395.067 239.307 462.742 277.343 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 L 461.664 101.714 M 29.177 214.59 C 29.177 214.59 29.177 214.59 29.177 214.59 C 80.896 244.45 132.614 274.31 184.333 304.17 C 184.333 295.782 184.333 287.394 184.333 279.005 C 184.333 199.437 184.333 119.868 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 L 29.177 214.59 M 366.333 276.928 C 370.111 356.098 373.889 435.267 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 C 471.021 313.889 418.011 281.445 365 249 L 365 249 C 365.444 258.309 365.889 267.619 366.333 276.928 M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.372 51.031 416.728 99.311 463.289 C 99.655 463.621 99.999 463.951 100.345 464.281 C 143.043 438.638 185.741 412.995 228.438 387.352 C 236.959 382.234 245.479 377.117 254 372 C 177.049 329.917 100.098 287.833 23.147 245.75 L 23.147 245.75 M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 C 347.667 473.755 347.667 422.395 347.667 371.036 C 347.667 362.024 347.667 353.012 347.667 344 C 342.312 347.383 336.958 350.766 331.603 354.149 C 262.657 397.707 193.711 441.265 124.765 484.823 L 124.765 484.823", 47 | "toValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 C 191.535 84.089 199.37 159.427 237.838 256.755 C 240.72 264.046 243.774 271.462 247 279 C 249.752 267.888 252.752 260.888 256 258 C 282.553 155.152 343.402 95.958 438.549 80.418 C 394.486 44.529 338.26 23 277 23 L 277 23 M 461.664 101.714 C 369.888 112.571 302.333 163.667 259 255 C 266.333 251 274 249 282 249 C 385.59 221.299 468.396 243.425 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 L 461.664 101.714 M 29.177 214.59 C 32.002 215.078 33.93 215.826 34.962 216.835 C 85.654 266.402 162.333 296.18 265 306.17 C 254.333 298.723 248.333 290.667 247 282 C 182.097 209.492 161.208 128.925 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 L 29.177 214.59 M 304 267 C 359.333 339.667 383.889 422.145 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 C 498.011 279.278 419.444 247.5 288.333 251 L 288.333 251 C 294.778 253 300 258.333 304 267 M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 C 100.99 463.424 101.59 462.932 102.146 462.805 C 171.382 446.935 236.667 392.667 298 300 C 291.555 306 282.555 309 271 309 C 192.333 316.473 109.716 295.389 23.147 245.75 L 23.147 245.75 M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 C 367.27 475.798 357.983 402.344 319.808 304.755 C 315.279 293.176 310.343 281.258 305 269 C 308.333 283 306.667 292.667 300 298 C 284.667 372 226.255 434.274 124.765 484.823 L 124.765 484.823" 48 | }, 49 | { 50 | "id": "598", 51 | "layerId": "595", 52 | "propertyName": "pathData", 53 | "startTime": 400, 54 | "endTime": 800, 55 | "interpolator": "FAST_OUT_SLOW_IN", 56 | "type": "path", 57 | "fromValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 C 191.535 84.089 199.37 159.427 237.838 256.755 C 240.72 264.046 243.774 271.462 247 279 C 249.752 267.888 252.752 260.888 256 258 C 282.553 155.152 343.402 95.958 438.549 80.418 C 394.486 44.529 338.26 23 277 23 L 277 23 M 461.664 101.714 C 369.888 112.571 302.333 163.667 259 255 C 266.333 251 274 249 282 249 C 385.59 221.299 468.396 243.425 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 L 461.664 101.714 M 29.177 214.59 C 32.002 215.078 33.93 215.826 34.962 216.835 C 85.654 266.402 162.333 296.18 265 306.17 C 254.333 298.723 248.333 290.667 247 282 C 182.097 209.492 161.208 128.925 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 L 29.177 214.59 M 304 267 C 359.333 339.667 383.889 422.145 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 C 498.011 279.278 419.444 247.5 288.333 251 L 288.333 251 C 294.778 253 300 258.333 304 267 M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 C 100.99 463.424 101.59 462.932 102.146 462.805 C 171.382 446.935 236.667 392.667 298 300 C 291.555 306 282.555 309 271 309 C 192.333 316.473 109.716 295.389 23.147 245.75 L 23.147 245.75 M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 C 367.27 475.798 357.983 402.344 319.808 304.755 C 315.279 293.176 310.343 281.258 305 269 C 308.333 283 306.667 292.667 300 298 C 284.667 372 226.255 434.274 124.765 484.823 L 124.765 484.823", 58 | "toValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 C 214.333 80.773 214.333 130.806 214.333 180.84 C 214.333 190.516 214.333 200.193 214.333 209.869 C 222.854 204.949 231.375 200.03 239.896 195.11 C 306.114 156.88 372.331 118.649 438.549 80.418 C 394.486 44.529 338.26 23 277 23 L 277 23 M 461.664 101.714 C 408.443 130.143 355.221 158.571 302 187 C 310.464 191.757 318.928 196.514 327.393 201.272 C 395.067 239.307 462.742 277.343 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 L 461.664 101.714 M 29.177 214.59 C 29.177 214.59 29.177 214.59 29.177 214.59 C 80.896 244.45 132.614 274.31 184.333 304.17 C 184.333 295.782 184.333 287.394 184.333 279.005 C 184.333 199.437 184.333 119.868 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 L 29.177 214.59 M 366.333 276.928 C 370.111 356.098 373.889 435.267 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 C 471.021 313.889 418.011 281.445 365 249 L 365 249 C 365.444 258.309 365.889 267.619 366.333 276.928 M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.372 51.031 416.728 99.311 463.289 C 99.655 463.621 99.999 463.951 100.345 464.281 C 143.043 438.638 185.741 412.995 228.438 387.352 C 236.959 382.234 245.479 377.117 254 372 C 177.049 329.917 100.098 287.833 23.147 245.75 L 23.147 245.75 M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 C 347.667 473.755 347.667 422.395 347.667 371.036 C 347.667 362.024 347.667 353.012 347.667 344 C 342.312 347.383 336.958 350.766 331.603 354.149 C 262.657 397.707 193.711 441.265 124.765 484.823 L 124.765 484.823" 59 | }, 60 | { 61 | "id": "599", 62 | "layerId": "594", 63 | "propertyName": "rotation", 64 | "startTime": 0, 65 | "endTime": 400, 66 | "interpolator": "FAST_OUT_SLOW_IN", 67 | "type": "number", 68 | "fromValue": 0, 69 | "toValue": 180 70 | }, 71 | { 72 | "id": "600", 73 | "layerId": "594", 74 | "propertyName": "rotation", 75 | "startTime": 400, 76 | "endTime": 800, 77 | "interpolator": "FAST_OUT_SLOW_IN", 78 | "type": "number", 79 | "fromValue": 180, 80 | "toValue": 0 81 | } 82 | ] 83 | } 84 | } 85 | } -------------------------------------------------------------------------------- /assets/animation3_camera_curves/wip_camera_curves.shapeshifter: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "layers": { 4 | "vectorLayer": { 5 | "id": "293", 6 | "name": "vector", 7 | "type": "vector", 8 | "width": 553, 9 | "height": 558, 10 | "children": [ 11 | { 12 | "id": "294", 13 | "name": "group", 14 | "type": "group", 15 | "pivotX": 276.5, 16 | "pivotY": 279, 17 | "children": [ 18 | { 19 | "id": "295", 20 | "name": "path", 21 | "type": "path", 22 | "pathData": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 L 214.333 209.869 L 438.549 80.418 C 394.486 44.529 338.26 23 277 23 Z M 461.664 101.714 L 302 187 L 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 Z M 29.177 214.59 L 184.333 304.17 L 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 Z M 365 249 L 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 L 365 249 Z M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 L 254 372 L 23.147 245.75 Z M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 L 347.667 344 L 124.765 484.823 Z", 23 | "fillColor": "#7f1751", 24 | "strokeWidth": 1 25 | } 26 | ] 27 | } 28 | ] 29 | }, 30 | "hiddenLayerIds": [] 31 | }, 32 | "timeline": { 33 | "animation": { 34 | "id": "296", 35 | "name": "anim", 36 | "duration": 800, 37 | "blocks": [ 38 | { 39 | "id": "297", 40 | "layerId": "295", 41 | "propertyName": "pathData", 42 | "startTime": 0, 43 | "endTime": 400, 44 | "interpolator": "FAST_OUT_SLOW_IN", 45 | "type": "path", 46 | "fromValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 C 214.333 80.773 214.333 130.806 214.333 180.84 C 214.333 190.516 214.333 200.193 214.333 209.869 C 222.854 204.949 231.375 200.03 239.896 195.11 C 306.114 156.88 372.331 118.649 438.549 80.418 C 394.486 44.529 338.26 23 277 23 L 277 23 M 461.664 101.714 C 408.443 130.143 355.221 158.571 302 187 C 310.464 191.757 318.928 196.514 327.393 201.272 C 395.067 239.307 462.742 277.343 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 L 461.664 101.714 M 29.177 214.59 C 29.177 214.59 29.177 214.59 29.177 214.59 C 80.896 244.45 132.614 274.31 184.333 304.17 C 184.333 295.782 184.333 287.394 184.333 279.005 C 184.333 199.437 184.333 119.868 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 L 29.177 214.59 M 366.333 276.928 C 370.111 356.098 373.889 435.267 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 C 471.021 313.889 418.011 281.445 365 249 L 365 249 C 365.444 258.309 365.889 267.619 366.333 276.928 M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.372 51.031 416.728 99.311 463.289 C 99.655 463.621 99.999 463.951 100.345 464.281 C 143.043 438.638 185.741 412.995 228.438 387.352 C 236.959 382.234 245.479 377.117 254 372 C 177.049 329.917 100.098 287.833 23.147 245.75 L 23.147 245.75 M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 C 347.667 473.755 347.667 422.395 347.667 371.036 C 347.667 362.024 347.667 353.012 347.667 344 C 342.312 347.383 336.958 350.766 331.603 354.149 C 262.657 397.707 193.711 441.265 124.765 484.823 L 124.765 484.823", 47 | "toValue": "M 277 23 C 255.379 23 234.388 25.693 214.333 30.74 C 191.535 84.089 199.37 159.427 237.838 256.755 C 240.72 264.046 243.774 271.462 247 279 C 249.752 267.888 252.752 260.888 256 258 C 282.553 155.152 343.402 95.958 438.549 80.418 C 394.486 44.529 338.26 23 277 23 L 277 23 M 461.664 101.714 C 369.888 112.571 302.333 163.667 259 255 C 266.333 251 274 249 282 249 C 385.59 221.299 468.396 243.425 530.416 315.379 C 532.106 303.494 533 291.352 533 279 C 533 210.184 505.841 147.717 461.664 101.714 L 461.664 101.714 M 29.177 214.59 C 32.002 215.078 33.93 215.826 34.962 216.835 C 85.654 266.402 162.333 296.18 265 306.17 C 254.333 298.723 248.333 290.667 247 282 C 182.097 209.492 161.208 128.925 184.333 40.3 C 108.317 69.832 49.903 134.617 29.177 214.59 L 29.177 214.59 M 304 267 C 359.333 339.667 383.889 422.145 377.667 514.436 C 448.854 483.958 503.417 422.143 524.032 346.334 C 498.011 279.278 419.444 247.5 288.333 251 L 288.333 251 C 294.778 253 300 258.333 304 267 M 23.147 245.75 C 21.735 256.634 21 267.731 21 279 C 21 351.887 51.46 417.658 100.345 464.281 C 100.99 463.424 101.59 462.932 102.146 462.805 C 171.382 446.935 236.667 392.667 298 300 C 291.555 306 282.555 309 271 309 C 192.333 316.473 109.716 295.389 23.147 245.75 L 23.147 245.75 M 124.765 484.823 C 167.316 516.347 219.977 535 277 535 C 301.514 535 325.22 531.548 347.667 525.115 C 367.27 475.798 357.983 402.344 319.808 304.755 C 315.279 293.176 310.343 281.258 305 269 C 308.333 283 306.667 292.667 300 298 C 284.667 372 226.255 434.274 124.765 484.823 L 124.765 484.823" 48 | } 49 | ] 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /gifs/add_tick_colored.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ragdroid/meaningful-vector-animations/390d88c72cc1d74264b5307c952b6ad1f7fc7dca/gifs/add_tick_colored.gif -------------------------------------------------------------------------------- /gifs/camera_line_to_curve.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ragdroid/meaningful-vector-animations/390d88c72cc1d74264b5307c952b6ad1f7fc7dca/gifs/camera_line_to_curve.gif -------------------------------------------------------------------------------- /gifs/camera_lines.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ragdroid/meaningful-vector-animations/390d88c72cc1d74264b5307c952b6ad1f7fc7dca/gifs/camera_lines.gif -------------------------------------------------------------------------------- /gifs/expand_collapse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ragdroid/meaningful-vector-animations/390d88c72cc1d74264b5307c952b6ad1f7fc7dca/gifs/expand_collapse.gif -------------------------------------------------------------------------------- /gifs/tick_to_add_colored.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ragdroid/meaningful-vector-animations/390d88c72cc1d74264b5307c952b6ad1f7fc7dca/gifs/tick_to_add_colored.gif --------------------------------------------------------------------------------