javascript - Konva vue js 文本滑入舞台然后停止
问题描述
嗨,我正在将 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>
有什么想法可以让文本从舞台外部出现然后停在画布内的某个点?
解决方案
您可以使用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;
}
})
}
推荐阅读
- excel - UserForm01.Show 代码中的错误 91“对象变量或未设置块变量”
- sql - 我无法使用外键关系来整理我的数据。截断子数据后被截断
- java - 如何在两个表 ReactJS 中发布
- amazon-web-services - 将域 A 记录指向 EC2 并使用 HTTPS 服务
- java - 将两个不同的数组与不同的数据结合起来
- c++ - 为什么 std::span 缺少比较运算符?
- javascript - ThreeJS切割ExtrudeGeometry形状深度的角落
- c++ - target_include_directories() does not find header files
- swift - 使用 JSONDecoder 时出现 EXC_BAD_INSTRUCTION 错误
- java - Elasticsearch - 从 2.x 升级到 7.x - 使用 TransportClient 和 Jest 进行双重写入