Konva vue js 文本滑入舞台然后停止答案

【问题标题】：Konva vue js text slide into stage and then stopKonva vue js 文本滑入舞台然后停止
【发布时间】：2019-09-26 11:10:37
【问题描述】：

您好，我正在将 konva js (https://konvajs.org) 与 vue 一起使用，我正在尝试为文本设置动画，以便它从舞台外滑到屏幕中的某个位置，但我不是 100% 确定这应该如何工作，我已经能够在这里进行演示；

https://codesandbox.io/s/vue-konva-template-i2em3

Vue;

  <v-stage ref="stage" :config="stageSize">
    <v-layer ref="layer">
      <v-text
        ref="text1"
        :config="{
            text: 'Draggable Text',
            x: 50,
            y: 50,
            draggable: true,
            fill: 'black'
          }"
      />
    </v-layer>
  </v-stage>
</template>


<script>
const width = window.innerWidth;
const height = window.innerHeight;

export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      }
    };
  },
  methods: {
    changeSize(e) {
      // to() is a method of `Konva.Node` instances
      e.target.to({
        scaleX: Math.random() + 0.8,
        scaleY: Math.random() + 0.8,
        duration: 0.2
      });
    }
  },
  mounted() {
    const vm = this;
    const amplitude = 100;
    const period = 5000;
    // in ms
    const centerX = vm.$refs.stage.getStage().getWidth() / 2;

    const text = this.$refs.text1.getStage();

    // example of Konva.Animation
    const anim = new Konva.Animation(function(frame) {
      text.setX(
        amplitude * Math.sin((frame.time * 2 * Math.PI) / period) + centerX
      );
    }, text.getLayer());

    anim.start();
  }
};
</script>

有什么想法可以让文本从舞台外出现然后停在画布内的某个点？

【问题讨论】：

标签： javascript vue.js canvas konvajs

【解决方案1】：

您可以使用node.to() 方法对任何Konva.Node 进行动画处理：

mounted() {
    const textNode = this.$refs.text1.getNode();
    const endX = width / 2 - textNode.width() / 2;
    // run the animation
    textNode.to({
      x: endX,
      onFinish: () => {
        // update the state at the end
        this.textPos.x = endX;
      }
    })
  }

演示：https://codesandbox.io/s/vue-konva-animation-demo-lr4qw

【讨论】：