ionic如何使用json动画和svga动画

json动画

npm install --save ng-lottie

app.module.ts和你需要写入动画的文件module.ts引入
import { Component, NgModule } from '@angular/core';
import { LottieAnimationViewModule } from 'ng-lottie';

@NgModule({
  imports: [
    LottieAnimationViewModule.forRoot()
  ]
})
export class MyModule {}

<!--html-->
<div class="animation">
  <lottie-animation-view      
    [options]="interactiveAnimationOption">
  </lottie-animation-view>
</div>

//ts
interactiveAnimationOption = {   
    loop: true,
    prerender: false,
    autoplay: true,
    autoloadSegments: true,
    path: 'assets/gif/income.json'    //引入json文件
  }

svga动画

npm install svgaplayerweb --save

<!--html-->
<div id="demoCanvas"></div>

//ts
import SVGA from 'svgaplayerweb';
如果报错就这么引用
import * as SVGA from 'svgaplayerweb';

animation() {
    const svgUrl = '/assets/svga/play.svga';
    const player = new SVGA.Player('#demoCanvas');
    const parser = new SVGA.Parser(); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。

    parser.load(svgUrl, function(videoItem) {
      player.loops = 1;  //设置循环播放次数是 1 
      player.setVideoItem(videoItem);
      player.startAnimation();
      
      player.clearsAfterStop = false;
      player.fillMode = 'Forward';  
      //clearsAfterStop为false时,Forward表示停留在最后一帧
    });
  }