From 276c544d6a83055d54e0568fc4d24d2970f8cb7f Mon Sep 17 00:00:00 2001 From: Sanjay Soundarajan Date: Tue, 23 Aug 2022 11:43:17 -0700 Subject: [PATCH] feat: add updateDocumentData method --- README.md | 7 +- docs/guide.md | 20 + packages/playground/vite-project/src/App.vue | 14 +- packages/vue3-lottie/README.md | 2 + packages/vue3-lottie/package.json | 2 +- packages/vue3-lottie/src/vue3-lottie.vue | 9 + pnpm-lock.yaml | 2339 +++++++++--------- 7 files changed, 1142 insertions(+), 1251 deletions(-) diff --git a/README.md b/README.md index 4ea45a32..6cdbcf9b 100644 --- a/README.md +++ b/README.md @@ -29,10 +29,7 @@

------ - - - +--- `vue3-lottie` was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie animations to my Vue application I found a suprising lack of maintained solutions. `vue3-lottie` is a vue wrapper around the `lottie-web` library with a few additional features. @@ -232,6 +229,8 @@ You can control the animation with the following methods. These methods can be c - You can call this method to play a specific segment of your animation. - setSubFrame(subFrame) - You can call this method to set the subframe value. +- updateDocumentData(documentData, index) + - This method updates text on text layers. Refer to the [official docs](https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData) for how to use this method. # Credits diff --git a/docs/guide.md b/docs/guide.md index b0741abf..63ad537b 100644 --- a/docs/guide.md +++ b/docs/guide.md @@ -428,3 +428,23 @@ You can call this method to set the subframe value. This method takes a single a ```js this.$refs.lottieContainer.setSubFrame(true) ``` + +### updateDocumentData(documentData, index) + +This method updates text on text layers. Refer to the [official docs](https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData) for how to use this method. + +- `documentData`: An object with the document data (see below supported properties and meaning) +- `index`: index of the text keyframe. If the text source is not keyframed, you can skip this argument. If not skipped and the source text is keyframed, it will update the current source. + +All supported properties: + +- `t`: text value +- `s`: font size +- `fc`: fill color - array with RGB values ranging from 0 to 1 +- `lh`: font line height +- `sc`: stroke color - array with RGB values ranging from 0 to 1 +- `j`: justify + +```js +this.$refs.lottieContainer.updateDocumentData({ t: 'new text', s: 20 }, 0) +``` diff --git a/packages/playground/vite-project/src/App.vue b/packages/playground/vite-project/src/App.vue index aa67511c..4a8229e6 100644 --- a/packages/playground/vite-project/src/App.vue +++ b/packages/playground/vite-project/src/App.vue @@ -1,14 +1,9 @@ @@ -19,13 +14,6 @@ import HelloWorld from './components/HelloWorld.vue' // import 'vue3-lottie/dist/style.css' import DogJSON from './assets/dog.json' -import { ref } from 'vue' - -const anim = ref(null) - -const playAnim = () => { - anim.value.play() -}