lottie 无法启动

[vickyleu]

let animation: LottieViewType | null = null
    useReady(() => {
        // miniprogram needs to init after page onReady event
        if(animation){
            animation.init().then(r => {
                console.log(`animation启动${r?"成功":"失败"}.`)
            }).catch((e)=>{  console.log(`animation启动失败.错误原因:${e}`)});
        }else{
            console.log(`animation启动失败.`)
        }
    })

小程序执行错误:

animation启动失败.错误原因:TypeError: Cannot read property 'node' of null

显示的view部分:

<View className={`right-image ${isDisabled ? 'disabled' : ''}`}
                      onTouchStart={handleClick} onTouchEnd={handleReleaseClick}
                      onClick={() => {
                          }}
                    >
                        <LottieView
                          ref={(anim) => animation = anim}
                          style={{width: 100, height: 100}}
                          autoPlay
                          loop
                          source={require('assets/react.json')}
                        />
                    </View>

而且还有一些其他报错信息

发现 Lottie 动态创建 canvas 组件，但小程序不支持动态创建组件，接下来可能会出现异常

VM394:22 WXMLRT_$gwx:./base.wxml:template:231:20: Template `tmpl_0_15` not found.

[WXML Runtime warning] ./base.wxml
 Template `tmpl_0_15` not found.
  229 |   <view hover-class="{{xs.b(i.p1,'none')}}" hover-stop-propagation="{{xs.b(i.p4,!1)}}" hover-start-time="{{xs.b(i.p2,50)}}" hover-stay-time="{{xs.b(i.p3,400)}}" bindtouchstart="eh" bindtouchmove="eh" bindtouchend="eh" bindtouchcancel="eh" bindlongpress="eh" animation="{{i.p0}}" bindanimationstart="eh" bindanimationiteration="eh" bindanimationend="eh" bindtransitionend="eh" style="{{i.st}}" class="{{i.cl}}" bindtap="eh"  id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
  230 |     <block wx:for="{{i.cn}}" wx:key="sid">
> 231 |       <template is="{{xs.a(c, item.nn, l)}}" data="{{i:item,c:c+1,l:xs.f(l,item.nn)}}" />
      |                    ^
  232 |     </block>
  233 |   </view>
  234 | </template>

[vickyleu]

import lottie from "lottie-miniprogram";

改成用这个就正常了

useReady(() => {
        Taro.createSelectorQuery().select('#canvas').node((ref) => {
            if(ref){
                const canvas =  ((ref as unknown as unknown[]).length > 0)?  ref[0].node: ref.node;
                if(canvas){
                    const context = canvas.getContext('2d');
                    lottie.setup(canvas)
                    lottie.loadAnimation({
                        animationData: require("assets/react.json"),
                        loop: true,
                        autoplay: true,
                        rendererSettings: {context},
                    });
                }
            }
        }).exec();
    })

    <View className='right-content'>
                    {/* 右边的内容 */}
                    <Canvas id='canvas' className={`right-image ${isDisabled ? 'disabled' : ''}`}
                            type='2d' onTouchStart={handleClick} onTouchEnd={handleReleaseClick} onClick={() => {
                    }}
                    />
                </View>