原创：动态点图片抛物线uniApp版本详解

原创：uniApp捕获dom核心

js

tryTriggerPromptlyInit (domItem, d) {
  let num = d ? d : 0
  // console.log('执行捕获domItem', num)
  if (domItem) {
    // console.log('捕获domItem成功，执行初始化', num)
    domItem.init()
  } else {
    let _this = this
    // console.log('捕获domItem失败，延迟200ms再次执行初始化', num)
    setTimeout(() => {
      num++
      if (num <= 10) {
        _this.tryTriggerPromptlyInit(domItem, num)
      }
    }, 200)
  }
}

代码集合

插件js

js
/*
* @function 动态点图片抛物线uniApp插件
* @author seek
* @version 1.0.0
* */
class ani {
    // 使用说明
    instructions () {
        return [
            '组件依赖全局组件Vuex通道交互数据',
            '1. add-goods-animation.vue文件和ani.js文件单独引入',
            '1.1 add-goods-animation.vue文件 使用于组件入口',
            '1.1.1 定义全局vuex查询mapGetters的GetAGoodsAniConfig方法， 定义全局vuex设置mapGetters的SetAGoodsAniConfig方法',
            // aGoodsAniConfig: []
            // GetAGoodsAniConfig: state => state.aGoodsAniConfig
            // SetAGoodsAniConfig: (state, payload) => {
            //     let aGoodsAniConfig = state.aGoodsAniConfig
            //     // 最大限制10个同时存在
            //     if (aGoodsAniConfig.length > 10) {
            //         aGoodsAniConfig = []
            //     }
            //     aGoodsAniConfig = aGoodsAniConfig.concat(payload)
            //     state.aGoodsAniConfig = aGoodsAniConfig
            // }
            // 组件
            //  <add-goods-animation :aGoodsAniConfig="GetAGoodsAniConfig"></add-goods-animation>
            '1.2 ani.js 使用于包含触发组件动画dom的组件'
            // import Ani from '@/pages/goods/components/add-goods-animation/ani'
            // Ani.goodsAddAniFn(
            //     '图片链接',
            //     '起始位置的dom类名',
            //     动画参数配置,
            //     this, // 组件入参
            //     (e) => {
            //         this.$store.commit('SetAGoodsAniConfig', [e]) //触发回调方法
            //     }
            // )
        ]
    }
    // 组件动画设置转码方法
    static goodsAddAniFn (picture, domName, domSetting, root, callBack) {
        /* 支付宝小程序不支持in(component)，使用无效果 */
        let query = uni.createSelectorQuery().in(root);
        query.selectAll(domName).boundingClientRect(data => {
            let dataK = data[0]
            callBack({
                ...domSetting,
                status: true,
                img: picture,
                width: domSetting.width ? domSetting.width : dataK.width,
                height: domSetting.height ? domSetting.height : dataK.height,
                x: domSetting.xMinus ? (dataK.left - domSetting.xMinus) : dataK.left,
                y: domSetting.yMinus ? (dataK.top - domSetting.yMinus) : dataK.top,
                toX: domSetting.toX ? domSetting.toX : 48,
                toY: domSetting.toY ? domSetting.toY : 68
            })
        }).exec(data => {
            console.log(data, "链式获取node信息");
        });
    }
}
export default ani

插件Vue

html
<template>
  <view v-if="aGoodsAniConfig.length > 0">
    <view v-for="(item, k) in aGoodsAniConfigData" :key="k">
      <image
        :class="item.status ? 'a-goods-ani-dom' : ''"
        :src="item.img" mode="aspectFit"
        :style="item.style"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: "add-goods-animation",
  data () {
    return {
      aGoodsAniConfigData: []
    }
  },
  props: {
    aGoodsAniConfig: Array
  },
  watch: {
    aGoodsAniConfig: function (e) {
      if (e.length > 0) {
        let arr = this.aGoodsAniConfigData
        arr.push(this.getNDataAniFn(e[e.length - 1]))
        this.aGoodsAniConfigData = arr
      }
    }
  },
  methods: {
    transformPx2Rpx (a) {
      const ratio = 750 / uni.getSystemInfoSync().windowWidth;
      return ratio * a;
    },
    getNDataAniFn (nData) {
      let startRight = nData.startRight ? nData.startRight : 48
      let lastRight = nData.lastRight ? nData.lastRight : 480
      let cubicBezier = nData.cubicBezier ? nData.cubicBezier : 'cubic-bezier((.32,.69,.48,1.86))'
      return {
        ...nData,
        style: `--width:${this.transformPx2Rpx(nData.width)}rpx;--height:${this.transformPx2Rpx(nData.height)}rpx;--top:${this.transformPx2Rpx(nData.y)}rpx;--left:${this.transformPx2Rpx(nData.x)}rpx;--toX:${nData.toX}rpx;--toY:${nData.toY}rpx;--cubicBezier:${cubicBezier};--startRight:${startRight}rpx;--lastRight:${lastRight}rpx`
      }
    },
  }
}
</script>

<style scoped>
.a-goods-ani-dom{
  width: var(--width);height: var(--height);visibility: hidden;
  border-radius: 50%;position: fixed;z-index: 999;
  animation-name: aniLast;
  animation-duration: .6s;
  animation-timing-function: var(--cubicBezier);
}
@keyframes aniLast
{
  0% {
    visibility: visible;
    right: var(--startRight);
    top: var(--top);
    transform: scale(.8);
  }
  30% {
    visibility: visible;
    top: calc(var(--top) - 100rpx);
    transform: scale(0.6);
  }
  90% {
    visibility: hidden;
    transform: scale(0.3);
  }
  100% {
    transform: scale(0.3);
    right: var(--lastRight);
    top: calc(100vh - var(--toY) - 100rpx);
  }
}
</style>