动态图片

12.3 动态图片

#midea-apng-view 动态图片

基于apng，实现的动效图组件

APP内置组件，可直接在template中使用，不需要import导入和注册 。

#使用方法

#实例 :

#基础用法

<template>
  <div class="wrapper">
    <dof-minibar
      title="动态图片"
      @dofMinibarLeftButtonClicked="back"
    ></dof-minibar>
    <div title="美居动态图片组件"></div>
    <div>
      <midea-apng-view v-if="isShow && apngSrc" ref="apngView" :src="apngSrc" :loop="isLoop" :auto="isAuto" class="apng-block"></midea-apng-view>
      <div class="icon-group">
          <textarea class="display-text" v-model="apngSrc" rows="2"></textarea>
          <image class="icon-scan" src="../../assets/img/service_ic_scan@3x.png"></image>
      </div>
      <div class="icon-group">
          <textarea class="display-text" v-model="messageParam" rows="3"></textarea>
          <image class="icon-scan" src="../../assets/img/service_ic_scan@3x.png"></image>
      </div>
    </div>

    <scroller>
      <div>参数</div>
      <div class="botton-group">
          <dof-cell2 label="是否远程资源（否则本地源）" :hasMargin="true" :hasArrow="false" :hasTopBorder="false" :hasBottomBorder="false" :hasSubBottomBorder="false">
              <dof-switch class="value" slot="value" @change="changeSrc"> </dof-switch>
          </dof-cell2>
          <dof-cell2 label="是否自动执行" :hasMargin="true" :hasArrow="false" :hasTopBorder="false" :hasBottomBorder="false" :hasSubBottomBorder="false">
              <dof-switch ref="switchAuto" class="value" slot="value" @change="changeAuto"> </dof-switch>
          </dof-cell2>
          <dof-cell2 label="是否循环执行" :hasMargin="true" :hasArrow="false" :hasTopBorder="false" :hasBottomBorder="false" :hasSubBottomBorder="false">
              <dof-switch ref="switchLoop" class="value" slot="value" @change="changeLoop"> </dof-switch>
          </dof-cell2>
          <dof-cell2 label="是否显示（可用来刷新）" :hasMargin="true" :hasArrow="false" :hasTopBorder="false" :hasBottomBorder="false" :hasSubBottomBorder="false">
              <dof-switch ref="switchShow" class="value" slot="value" @change="changeShow"> </dof-switch>
          </dof-cell2>
      </div>
         <div>方法</div>
        <div class="botton-group">
            <dof-cell2 title="启动play" :hasMargin="true" :hasArrow="true" :clickActivied="true" :hasTopBorder="false" :hasBottomBorder="true" :hasSubBottomBorder="false" @dofcellClick="setParam('play')">
            </dof-cell2>
            <dof-cell2 title="停止stop" :hasMargin="true" :hasArrow="true" :clickActivied="true" :hasTopBorder="false" :hasBottomBorder="true" :hasSubBottomBorder="false" @dofCellClick="setParam('stop')">
            </dof-cell2>
            <dof-cell2 title="暂停pause" :hasMargin="true" :hasArrow="true" :clickActivied="true" :hasTopBorder="false" :hasBottomBorder="true" :hasSubBottomBorder="false" @dofCellClick="setParam('pause')">
            </dof-cell2>
            <dof-cell2 title="恢复resume" :hasMargin="true" :hasArrow="true" :clickActivied="true" :hasTopBorder="false" :hasBottomBorder="true" :hasSubBottomBorder="false" @dofCellClick="setParam('resume')">
            </dof-cell2>
            <dof-cell2 title="goTo去到帧" :hasMargin="true" :hasArrow="true" :clickActivied="true" :hasTopBorder="false" :hasBottomBorder="true" :hasSubBottomBorder="false" @dofCellClick="setParam('goTo')">
            </dof-cell2>
            <dof-cell2 title="run运行帧" :hasMargin="true" :hasArrow="true" :clickActivied="true" :hasTopBorder="false" :hasBottomBorder="true" :hasSubBottomBorder="false" @dofCellClick="setParam('run')">
            </dof-cell2>
        </div>
    </scroller>
    <dof-button text="执行" @dofButtonClicked="execute()"></dof-button>
  </div>
</template>

<script>
import { DofMinibar, DofButton, DofCell2, DofSwitch } from 'dolphin-weex-ui'

export default {
    components: { DofMinibar, DofButton, DofCell2, DofSwitch },
    data() {
      return {
        apngRef: null,
        isShow: true,
        isAuto: true,
        isLoop: true,
        apngSrc: "",
        localUrl: "../../assets/image/apng/intro_iSpt.png",
        url: "https://misc.aotu.io/ONE-SUNDAY/apng_spinfox.png",
        messageParam: JSON.stringify({
            api: "play",
            params: {}
        })
      }
    },
    methods: {
      setParam(key) {
            switch (key) {
                case "play":
                    this.messageParam = JSON.stringify({
                        api: "play",
                        params: {}
                    })
                    this.execute()
                    break;
                case "stop":
                    this.messageParam = JSON.stringify({
                        api: "stop",
                        params: {}
                    })
                    this.execute()
                    break;
                case "pause":
                    this.messageParam = JSON.stringify({
                        api: "pause",
                        params: {}
                    })
                    this.execute()
                    break;
                case "resume":
                    this.messageParam = JSON.stringify({
                        api: "resume",
                        params: {}
                    })
                    this.execute()
                    break;
                case "goTo":
                    this.messageParam = JSON.stringify({
                        api: "goTo",
                        params: {
                            frame: 20 //动画的第x帧
                        }
                    })
                    this.execute()
                    break;
                case "run":
                    this.messageParam = JSON.stringify({
                        api: "run",
                        params: {
                            frame: 20 //动画的第x帧
                        }
                    })
                    this.execute()
                    break;
                default:
                    break;
            }
        },
        changeSrc(event) {
            this.$nextTick(() => {
                this.apngSrc = event.value ? this.url : this.localUrl
            })
        },
        changeAuto(event) {
            this.$nextTick(() => {
                this.isAuto = event.value
            })
        },
        changeLoop(event) {
            this.$nextTick(() => {
                this.isLoop = event.value
            })
        },
        changeShow(event) {
            this.$nextTick(() => {
                this.isShow = event.value
            })
        },
        execute() {
            // 根据状态进行相关api操作
            // nativeService.toast("接口：" + JSON.parse(this.messageParam).api + "\n参数:" + JSON.stringify(JSON.parse(this.messageParam).params));
            // this.apngRef[JSON.parse(this.messageParam).api](
            //     JSON.parse(this.messageParam).params,
            //     function (success) {
            //     },
            //     function (error) {
            //         nativeService.toast(JSON.stringify(error));
            //     }
            // )
        },
      back() {}
    },
    created() {
        this.apngSrc = this.localUrl

    },
    mounted() {
        this.apngRef = this.$refs.apngView;
        this.$refs["switchAuto"].switchValue(true)
        this.$refs["switchLoop"].switchValue(true)
        this.$refs["switchShow"].switchValue(true)
    }
    
}
</script>

<style scoped>
.wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}
.apngA {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 750px;
    border-width: 6px;
    border-style: solid;
    border-color: #bbbbbb;
}
.apng-block {
    width: 750px;
    height: 300px;
    border-width: 1px;
    border-style: solid;
    border-color: #bbbbbb;
}
.botton-group {
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    flex-wrap: wrap;
    padding-bottom: 80px;
}
.button-group-sub {
    flex-direction: row;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    flex-wrap: wrap;
}
.botton {
    width: 250px;
    margin-right: 24px;
}
.icon-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
}
.icon-scan {
    height: 44px;
    width: 44px;
}
.display-text {
    width: 640px;
    font-size: 30px;
    margin: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #bbbbbb;
}
</style>
</style>

#Attributes

Prop	Type	Required	Default	Description
src	String	Y	-	动态图片地址
loop	Boolean	N	false	是否自动循环播放动态图片
auto	Boolean	N	true	是否自动播放动态图片