• h5引用svga实现动态效果


    SVGA 是一种跨平台的开源动画格式,同时兼容 iOS / Android / Web。SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率。在web中引用会将动画转为Canvas

    1,安装插件      npm install svgaplayerweb —save

    2,在组件中引用     import SVGA from "svgaplayerweb"

    3,使用

    <template>
      <div id="demoCanvas" ref="demoCanvas"></div>
    </template>

    <script>
    import SVGA from "svgaplayerweb";
    export default {
      data(){
        return{
          bgImg:'https://file.nidong.com/upload/gift/20200520/upload_l3xlns9v1in4heomhwgbndzxt8quc9yb.svga'
        }
      },
      mounted() {                 // SVGA只能在页面渲染好后执行因为需要获取页面中id为‘demoCanvas’的标签
        this.setFill();
        this.SVGA();
      },
      methods: {
        SVGA() {
          let player = new SVGA.Player("#demoCanvas");
          let parser = new SVGA.Parser("#demoCanvas");
          parser.load(this.bgImg,function(videoItem) {                          //this.bgImg,图片路径需要线上地址,本地引用会报错
              player.setVideoItem(videoItem);
              player.startAnimation();
            }
          );
        },
        setFill() {               //适配不同屏
          var $_canvas = document.getElementById("demoCanvas"),
            w = window.innerWidth,
            h = window.innerHeight,
            screen_proportion = h / w,
            svga_proportion = 16 / 9;
          if (screen_proportion > svga_proportion) {
            //长屏幕
            $_canvas.style.width = h / svga_proportion + "px";
            $_canvas.style.left = (w - h / svga_proportion) / 2 + "px";
          } else {
            $_canvas.style.height = w * svga_proportion + "px";
            $_canvas.style.top = (h - w * svga_proportion) / 2 + "px";
          }
        }
      }
    };
    </script>

    <style lang="scss" scoped>
    #demoCanvas {     //因需求背景为动态图
      position:fixed;
       100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    </style>
     
  • 相关阅读:
    走向变态的人生
    HDWIKI 4.0.2绿色版(含运行环境)(V1)
    centos7 安装python3.7.1
    一种高并发流控程序的简单轻量实现
    编写JDBC框架优化CRUD操作
    一段阻塞队列代码的纠错与优化
    一次请求在同一个事务实现
    创建Java内部类的编译错误处理
    C++模板简单分析与举例
    java.lang.OutOfMemoryError处理错误
  • 原文地址:https://www.cnblogs.com/wxx-17-5-13/p/12936107.html
Copyright © 2020-2023  润新知