动效

12.2 动效

#midea-lottie-view 动效

此组件为APP内置组件，不需要前端import导入, 可直接在template里使用。 前端自行定义图标样式：大小和位置

需引入lottieModule模块

const lottieModule = weex.requireModule('lottieModule');

1

#实例 :

#基础用法

<template>
  <div class="wrapper">
    <dof-minibar
      title="lottieView动效视图"
      background-color="#0092d7"
      text-color="#ffffff"
      :isImage="true"
      :left-button="leftButton"
    ></dof-minibar>
    <div class="lotter-range-wrapper">
      <catalog :title="lotterName"></catalog>
    </div>
    <scroller>
      <midea-lottie-view
        v-if="lottieData"
        ref="lottieView"
        class="lottie"
        :data="lottieData"
        :loop="true"
      ></midea-lottie-view>
      <div class="control-panel">
        <div class="list-item">
          <dof-button
            type="primary"
            text="play"
            :btnStyle="{ width: '150px', height: '50px', backgroundColor: '#00909a', borderRadius: '5px' }"
            @dofButtonClicked="lotteryControl('play')"
          ></dof-button>
        </div>
        <div class="list-item">
          <dof-button
            type="primary"
            text="pause"
            :btnStyle="{ width: '150px', height: '50px', backgroundColor: '#00909a', borderRadius: '5px' }"
            @dofButtonClicked="lotteryControl('pause')"
          ></dof-button>
        </div>
        <div class="list-item">
          <dof-button
            type="primary"
            text="resume"
            :btnStyle="{ width: '150px', height: '50px', backgroundColor: '#00909a', borderRadius: '5px' }"
            @dofButtonClicked="lotteryControl('resume')"
          ></dof-button>
        </div>
        <div class="list-item">
          <dof-button
            type="primary"
            text="stop"
            :btnStyle="{ width: '150px', height: '50px', backgroundColor: '#00909a', borderRadius: '5px' }"
            @dofButtonClicked="lotteryControl('stop')"
          ></dof-button>
        </div>
      </div>
      <div class="botton-group demo">
        <dof-grid-select
          :single="true"
          :cols="5"
          :customStyles="customStyles"
          :list="testData3"
          @select="onSelectLottery"
        >
        </dof-grid-select>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  padding-bottom: 50px;
}
.lottery-range-wrapper {
  border-width: 1px;
}
.lottieA {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 750px;
  border-width: 6px;
  border-style: solid;
  border-color: #bbbbbb;
}
.lottie {
  width: 750px;
  height: 750px;
}
.control-panel {
  flex-direction: row;
  justify-content: space-around;
}

.demo {
  padding-top: 24px;
  padding-right: 24px;
  padding-left: 24px;
}
.list-item {
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: center;
  align-items: center;
}
</style>
<script>
import base from 'src/mixins/base'
import { DofMinibar, DofGridSelect, DofButton } from 'dolphin-weex-ui'
import Catalog from 'src/_mods/catalog.vue'
import nativeService from 'src/service/nativeService'

import demo1 from '../../assets/lottie/play_button.json'
import demo2 from '../../assets/lottie/refresh.json'
import demo3 from '../../assets/lottie/WeAcceptInlineImage.json'
import demo4 from '../../assets/lottie/lottiefiles.com - Nudge.json'
// import demo5 from '../assets/lottie/greyorange.json',
import demo5 from '../../assets/lottie/bianpao_animate.json'
import demo6 from '../../assets/lottie/halo_orange.json'
const lottieModule = weex.requireModule('lottieModule')

export default {
  components: { DofMinibar, DofButton, DofGridSelect, Catalog },
  mixins: [base],
  data() {
    return {
      leftButton: '/assets/image/header/back_white@2x.png',
      lotterName: '动效名称',
      testData3: [
        {
          title: '播放'
        },
        {
          title: '开灯'
        },
        {
          title: '画廊'
        },
        {
          title: '日历'
        },
        {
          title: '过新年',
          checked: true
        },
        {
          title: '橙色波动背景'
        },
        {
          title: 'demo6',
          disabled: true
        },
        {
          title: 'demo7',
          disabled: true
        },
        {
          title: 'demo8',
          disabled: true
        },
        {
          title: 'demo9',
          disabled: true
        },
        {
          title: 'demo10',
          disabled: true
        },
        {
          title: 'demo11',
          disabled: true
        },
        {
          title: 'demo12',
          disabled: true
        },
        {
          title: 'demo13',
          disabled: true
        },
        {
          title: 'demo14',
          disabled: true
        }
      ],
      customStyles: {
        lineSpacing: '14px',
        width: '120px',
        icon: '',
        color: '#333333',
        checkedColor: '#ffffff',
        disabledColor: '#eeeeee',
        borderColor: '#666666',
        checkedBorderColor: '#0092d7',
        backgroundColor: '#ffffff',
        checkedBackgroundColor: '#0092d7'
      },
      lottieDemo: [demo1, demo2, demo3, demo4, demo5, demo6],
      lottieData: ''
    }
  },
  methods: {
    onSelectLottery(param) {
      // this.$alert(param)
      let index = param.selectIndex
      this.lottieData = JSON.stringify(this.lottieDemo[index])
      this.lotterName = param.checkedList[0].title
    },
    lotteryControl(api) {
      let lottieRef = this.$refs.lottieView
      let param = {
        api: api,
        params: {}
      }
      lottieModule.lottieInterface(
        lottieRef,
        param,
        function(success) {
          nativeService.toast('successful')
        },
        function(error) {
          nativeService.toast('error')
        }
      )
      nativeService.hapticFeedback()
    }
  },
  mounted() {
    this.lottieData = JSON.stringify(this.lottieDemo[4])
    this.lotterName = this.testData3[4].title
    testData3
  }
}
</script>

#Attributes

Prop	Type	Required	Default	Description
dataUrl	String	N	-	动效json文件路径，支持本地相对路径和远端http/https路径。若和data同时存在dataUrl优先。
data	JSON字符串	N	-	动效json字符串，若和dataUrl同时存在dataUrl优先。
loop	Boolean	N	true	是否循环播放
autoPlay	Boolean	N	true	是否自动播放
repeatCount	Number	N	-	设置重复播放次数，若和loop同时存在，repeatCount优先
progress	Number	N	-	设置播放初始进度，默认从0 开始，value0 ~ 1,一旦设置了这个属性就默认自动从该进度开始播放

#Methods

方法名称	说明	备注
play	开始/重新开始动画	对应playAnimation
pause	暂停动画	对应pauseAnimation
resume	暂停后继续播放动画	对应resumeAnimation
stop	停止	-