uniapp动态气泡上升效果

1、效果图：

2、创建子组件canvas_love.vue

<template>
	<view class="action">
		<view class="icon_img">
			<view class="icon_smallimg"></view>
			<view class="texttag">限时5折起</view>
			<canvas canvas-id="mycanvas" class="canvas" />
		</view>
	</view>
</template>

<script>
	var lastFrameTime = 0;
	var count = 0;
	var ctx = null;
	var factor = {
		speed: 0.004, // 运动速度，值越小越慢
		t: 0 //  贝塞尔函数系数
	};
	var that;
	var timer = null; // 循环定时器
	export default {
		name: 'canvas_love',
		data() {
			return {
				style_img: '',
				img_path: [
					[{
						x: 30,
						y: 50
					}, {
						x: 40,
						y: 30
					}, {
						x: 60,
						y: 25
					}, {
						x: 40,
						y: 0
					}],
					[{
						x: 30,
						y: 50
					}, {
						x: 70,
						y: 20
					}, {
						x: 80,
						y: 10
					}, {
						x: 30,
						y: 0
					}],
					[{
						x: 30,
						y: 50
					}, {
						x: 60,
						y: 10
					}, {
						x: 70,
						y: 0
					}, {
						x: 20,
						y: 0
					}]
				]
			}
		},
		created() {
			that = t