2022-11-18
技术小刊
00

目录

原创:uniApp捕获dom核心
代码集合
插件js
插件Vue

原创:动态点图片抛物线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>
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:seek

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!