From 7469afab31ebfdd2d447c351d615b7c1d8e42c2e Mon Sep 17 00:00:00 2001 From: lonkaars Date: Mon, 24 May 2021 15:23:04 +0200 Subject: tool selection and play/skip animation --- components/play-skip.shapeshifter | 83 +++++++++++++ components/play-skip.tsx | 253 ++++++++++++++++++++++++++++++++++++++ components/play-skip_60fps.css | 30 +++++ 3 files changed, 366 insertions(+) create mode 100644 components/play-skip.shapeshifter create mode 100644 components/play-skip.tsx create mode 100644 components/play-skip_60fps.css (limited to 'components') diff --git a/components/play-skip.shapeshifter b/components/play-skip.shapeshifter new file mode 100644 index 0000000..2bd84a1 --- /dev/null +++ b/components/play-skip.shapeshifter @@ -0,0 +1,83 @@ +{ + "version": 1, + "layers": { + "vectorLayer": { + "id": "76", + "name": "vector", + "type": "vector", + "width": 24, + "height": 24, + "children": [ + { + "id": "24", + "name": "bottom", + "type": "path", + "pathData": "M 16.8 11.4 C 17.131 11.842 17.042 12.469 16.6 12.8 L 12.6 15.8 C 12.158 16.131 11.531 16.042 11.2 15.6 C 10.869 15.158 10.958 14.531 11.4 14.2 L 15.4 11.2 C 15.842 10.869 16.469 10.958 16.8 11.4 Z", + "fillColor": "#ffffff", + "strokeWidth": 1, + "fillType": "evenOdd" + }, + { + "id": "46", + "name": "top", + "type": "path", + "pathData": "M 11.2 8.4 C 11.531 7.958 12.158 7.869 12.6 8.2 L 16.6 11.2 C 17.042 11.531 17.131 12.158 16.8 12.6 C 16.469 13.042 15.842 13.131 15.4 12.8 L 11.4 9.8 C 10.958 9.469 10.869 8.842 11.2 8.4 Z", + "fillColor": "#ffffff", + "strokeWidth": 1, + "fillType": "evenOdd" + }, + { + "id": "74", + "name": "triangle", + "type": "path", + "pathData": "M 9.187 17.886 L 17.573 12.761 C 17.838 12.599 18 12.311 18 12 C 18 11.689 17.838 11.401 17.573 11.239 L 9.187 6.114 C 9.065 6.04 8.924 6 8.78 6 C 8.349 6 8 6.349 8 6.78 L 8 17.22 C 8 17.651 8.349 18 8.78 18 C 8.924 18 9.065 17.96 9.187 17.886 Z", + "fillColor": "#ffffff", + "strokeWidth": 1 + } + ] + }, + "hiddenLayerIds": [] + }, + "timeline": { + "animation": { + "id": "2", + "name": "anim", + "duration": 300, + "blocks": [ + { + "id": "164", + "layerId": "24", + "propertyName": "pathData", + "startTime": 0, + "endTime": 300, + "interpolator": "FAST_OUT_SLOW_IN", + "type": "path", + "fromValue": "M 16.8 11.4 C 17.131 11.842 17.042 12.469 16.6 12.8 L 12.6 15.8 C 12.158 16.131 11.531 16.042 11.2 15.6 C 10.869 15.158 10.958 14.531 11.4 14.2 L 15.4 11.2 C 15.842 10.869 16.469 10.958 16.8 11.4 Z", + "toValue": "M 17 11 C 17.552 11 18 11.448 18 12 L 18 17 C 18 17.552 17.552 18 17 18 C 16.448 18 16 17.552 16 17 L 16 12 C 16 11.448 16.448 11 17 11 Z" + }, + { + "id": "3557", + "layerId": "46", + "propertyName": "pathData", + "startTime": 0, + "endTime": 300, + "interpolator": "FAST_OUT_SLOW_IN", + "type": "path", + "fromValue": "M 11.2 8.4 C 11.531 7.958 12.158 7.869 12.6 8.2 L 16.6 11.2 C 17.042 11.531 17.131 12.158 16.8 12.6 C 16.469 13.042 15.842 13.131 15.4 12.8 L 11.4 9.8 C 10.958 9.469 10.869 8.842 11.2 8.4 Z", + "toValue": "M 17 6 C 17.552 6 18 6.448 18 7 L 18 12 C 18 12.552 17.552 13 17 13 C 16.448 13 16 12.552 16 12 L 16 7 C 16 6.448 16.448 6 17 6 Z" + }, + { + "id": "6889", + "layerId": "74", + "propertyName": "pathData", + "startTime": 0, + "endTime": 300, + "interpolator": "FAST_OUT_SLOW_IN", + "type": "path", + "fromValue": "M 9.187 17.886 L 17.573 12.761 C 17.838 12.599 18 12.311 18 12 C 18 11.689 17.838 11.401 17.573 11.239 L 9.187 6.114 C 9.065 6.04 8.924 6 8.78 6 C 8.349 6 8 6.349 8 6.78 L 8 17.22 C 8 17.651 8.349 18 8.78 18 C 8.924 18 9.065 17.96 9.187 17.886 Z", + "toValue": "M 7.191 16.877 L 13.579 12.77 C 13.841 12.602 14 12.312 14 12 C 14 11.688 13.841 11.398 13.579 11.23 L 7.191 7.123 C 7.066 7.043 6.921 7 6.773 7 C 6.346 7 6 7.346 6 7.773 L 6 16.227 C 6 16.654 6.346 17 6.773 17 C 6.921 17 7.066 16.957 7.191 16.877 Z" + } + ] + } + } +} \ No newline at end of file diff --git a/components/play-skip.tsx b/components/play-skip.tsx new file mode 100644 index 0000000..8493710 --- /dev/null +++ b/components/play-skip.tsx @@ -0,0 +1,253 @@ +export default function PlaySkipIconAni() { + return
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
; +} diff --git a/components/play-skip_60fps.css b/components/play-skip_60fps.css new file mode 100644 index 0000000..aae3a65 --- /dev/null +++ b/components/play-skip_60fps.css @@ -0,0 +1,30 @@ +@keyframes skip { + 0% { left: 0px; } + 100% { left: -432px; } +} + +@keyframes play { + 0% { left: -432px; } + 100% { left: 0px; } +} + +.shapeshifter { + width: 24px; + height: 24px; + overflow: hidden; + position: relative; + line-height: 0; +} + +.shapeshifter svg { + position: absolute; + fill: currentColor; + left: 0; + + animation-name: var(--ani-state); + animation-fill-mode: both; + animation-duration: 200ms; + animation-timing-function: steps(18); + animation-play-state: running; +} + -- cgit v1.2.3