小程序canvas动画解决方案，绘制一个帧动画

目前还有个问题：android上面无卡顿，但是ios直接把微信卡掉！
wxml

<canvas style='width:{
  {windowWidth}}px;height:{
  {height}}px;  position: fixed;' canvas-id="secondCanvas0">
</canvas>
<canvas style='width:{
  {windowWidth}}px;height:{
  {height}}px;  position: fixed;' canvas-id="secondCanvas1"></canvas>
<view class='receivenow_view'>
  <view class="receivenow_button_view" bindtap='{
  {!start_state?"shuffle_func":"card_selection_func"}}' style='margin-top:{
  {height+10}}px' animation="{
  {animation3}}">
    <text>{
  {!start_state?"开始洗牌":"开始选牌"}}</text>
  </view>
</view>

wxss

.receivenow_view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 80rpx;
}

.receivenow_button_view {
  font-size: 30rpx;
  color: #fff;
  padding: 35rpx 190rpx;
  border-radius: 60rpx;
  background: linear-gradient(to right, #ff5846, #ff067a);
  line-height: normal;
}

js

const animationFrame = require('../../utils/requestAnimationFrame.js')
const ctx0 = wx.createCanvasContext('secondCanvas0')
const ctx = wx.createCanvasContext('secondCanvas1')

Page({

  /**
   * 
   */
  data: {
    //默认canvas高度
    height: 375,