Notebook Page Margin

    svg-player

    2.0.2 • Public • Published

    svg播放器


    svg播放器

    何时使用

    • 播放svg动画的时候

    浏览器支持

    支持svg动画的浏览器

    安装

    npm install svg-player --save

    运行

    # 默认开启服务器,地址为 :http://localhost:8000/ 
     
    # 能在ie9+下浏览本站,修改代码后自动重新构建,且能在ie10+运行热更新,页面会自动刷新 
    npm run start
     
    # 构建生产环境静态文件,用于发布文档 
    npm run site

    代码演示

    基本

    基本用法。

    import "svg-player/lib/style/"
    import SvgPlayer from 'svg-player'
     
    class App extends React.Component {
      componentDidMount () {
        new SvgPlayer(
          '#container-1', 
          'http://cs.101.com/v0.1/static/fish/image/svg.svg',
          { 
            style: {
              width: '400px',
            },
            scalable: true,
            draggable: true,
            ratio: 1.5
          })
      }
      render() {
        return (
          <div id="container-1"></div>
        );
      }
    }
     
    ReactDOM.render(<App />, mountNode);

    控制svg的暂停播放

    控制svg动画两秒后暂停播放

    import "svg-player/lib/style/"
    import SvgPlayer from 'svg-player'
     
    class App extends React.Component {
      componentDidMount () {
        new SvgPlayer(
          '#container-2',
          'http://cs.101.com/v0.1/static/fish/image/svg.svg',
          {},
          (svgPlayer) => {
            setTimeout(() => {
              svgPlayer.pause()
            }, 2000)
        })
      }
      render() {
        return (
          <div id="container-2"></div>
        );
      }
    }
     
    ReactDOM.render(<App />, mountNode);

    配置是否显示按钮

    不显示播放/暂停按钮和重新开始按钮

    import "svg-player/lib/style/"
    import SvgPlayer from 'svg-player'
     
    class App extends React.Component {
      componentDidMount () {
        new SvgPlayer(
          '#container-3',
          'http://cs.101.com/v0.1/static/fish/image/svg.svg',
          { 
            showPlayButton: false,
            showReloadButton: false
          }
        )
      }
      render() {
        return (
          <div id="container-3"></div>
        );
      }
    }
     
    ReactDOM.render(<App />, mountNode);

    配置是否拖拽和缩放

    可配置是否可以通过滚轮缩放以及鼠标拖拽

    .custom-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%-50%);
      color: red;
    }
     
    import "svg-player/lib/style/"
    import SvgPlayer from 'svg-player'
     
    class App extends React.Component {
      addEvent (svgPlayer) {
        document.getElementById('zoomIn').addEventListener('click', function(){
          svgPlayer.handleZoom(false)
        })
        document.getElementById('zoomOut').addEventListener('click', function(){
          svgPlayer.handleZoom(true)
        })
        document.getElementById('reset').addEventListener('click', function(){
          svgPlayer.zoomInOut(1)
        })
      }
      componentDidMount () {
        new SvgPlayer(
          '#container-6',
          'http://cs.101.com/v0.1/static/fish/image/svg.svg',
          {
            draggable: true,
            scalable: true,
            showZoomButton: true,
            ratio: 2,
            maxZoomSize: 2.5,
            minZoomSize: 0.5,
            zoomStep: 0.3,
            // 自定义loading
            renderLoading: () => {
              const loading = document.createElement('span')
              loading.setAttribute('class', `custom-loading`)
              loading.innerHTML = '加载中...'
              return loading
            }
          },
          (svgPlayer) => {
            this.addEvent(svgPlayer)
          })
      }
      render() {
        return (
          <div>
          <div id="container-6"></div>
          <button id='zoomIn'>放大</button>
          <button id='zoomOut'>缩小</button>
          <br />
          <br />
          <button id='reset'>缩放回原来大小</button>
          </div>
        );
      }
    }
     
    ReactDOM.render(<App />, mountNode);

    API

    new SvgPlayer(selector, url, options, readyCallback)
    

    注意: 当svg文件跨域时需要设置CORS才能操作svg对象。

    参数 说明 类型 默认值
    url svg的url地址(必须同源) string
    selector 放入svg的dom选择器(内部使用document.querySelector) string
    options 配置参数 SvgPlayer.options { prefix: 'svg-play', showPlayButton: true, showReloadButton: true }
    readyCallback 文件加载后的回调;参数为实例化的SvgPlayer function

    options

    配置参数如下

    参数 说明 类型 默认值
    prefix 类前缀,可通过修改类前缀自定义类 string
    showPlayButton 是否显示默认播放暂停按钮 boolean
    showReloadButton 是否显示重新开始按钮 boolean true
    showZoomButton 是否显示重新开始按钮 boolean false
    renderLoading 自定义loading function
    draggable 是否可拖拽 boolean false
    scalable 是否可缩放 boolean false
    ratio 初始缩放比例 number 1
    attr 给播放器容器传入属性和值 object
    style 给播放器容器传入style属性值 object
    maxZoomSize 最大可缩放比例 number 4
    minZoomSize 最小可缩放比例 number 0.2
    zoomStep 每次调用缩放时的缩放比例 number 0.2

    SvgPlayer

    使用方式如下

    const svgPlayer = new SvgPlayer(selector, url, options, () => {
      svgPlayer.pause()
    })
    
    参数 说明 类型 默认值
    play 播放svg动画 function
    pause 暂停svg动画 function
    svgDocument svg的document对象 object
    svgEl svg对象 object
    svgPlayerEl 外层容器对象 object
    playButtonEL 播放暂停按钮对象 object
    reloadButton 回到开始按钮对象 object
    handleZoom 每次调用此函数,使元素缩放一定比例, 参数out为true表示缩小,为false表示放大 function(out: boolean)
    zoomInOut 可以调用此函数直接缩放到设置的比例, 参数ratio表示缩放比例 function(ratio: number)

    Keywords

    none

    Install

    npm i svg-player

    DownloadsWeekly Downloads

    1

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    27.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • mraiguo