微信/支付宝小程序实现弹窗动画缩放到某个位置的示例代码
作者：鹤鸣的日常
本文详细介绍了如何使用HTML、CSS和JavaScript实现动画函数,包括参数设置和动画过程中的状态管理,文章还涉及了如何获取DOM元素、设置动画开始和结束的回调函数,感兴趣的朋友跟随小编一起看看吧
HTML
<view wx:if="{{advertiseFlag}}" class="advertise-wrapper" style="background-color:{{transitionData.statusBtn == 'playing'?'rgba(255,255,255,0)':''}}" bindtap="jumpFn">
<view class="advertise-box" style="width:{{transitionData.width}};height:{{transitionData.height}};left:{{transitionData.left}};top:{{transitionData.top}};opacity:{{transitionData.opacity}};animation:{{transitionData.animation}}">
<image data-status="{{transitionData.statusBtn}}" catchtap="handleJumpValue" src="{{ advertiseMsg.url || 'https://yizhen-mamapai-dev.oss-cn-zhangjiakou.aliyuncs.com/certification/2024-06-13/b1791b525e974c0aae8a0c82a8410a9b.png'}}">
</image>
<view class="jump-box" catchtap="jumpFn" data-status="{{transitionData.statusBtn}}">
跳过{{defaultTime?defaultTime:''}}
</view>
</view>
</view>CSS
.advertise-wrapper {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.75);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.advertise-box {
width: 580rpx;
height: 980rpx;
position: absolute;
transition: all 1s linear;
}
@keyframes shrinkAndMoveToPosition {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0.5);
opacity: 0;
}
}
.advertise-box image {
width: 100%;
height: 100%;
}
.jump-box {
background: rgba(0, 0, 0, 0.8);
border-radius: 10px;
padding: 4rpx 16rpx;
position: absolute;
top: 20rpx;
right: 20rpx;
color: #fff;
font-size: 12px;
}JS
动画函数
options的参数
from : 起始值 比如：0
to : 结束值 比如：100
totalMS ：变化总时间 比如： 1000
duration : 每多少秒变化的次数 比如： 1
onmove ：开始移动的回调函数
onend ：移动结束的回调函数
let timer;
function createAnimation(option) {
// 起始值、结束值、变化总时间
var {
from,
to,
totalMS,
duration,
onmove,
onend
} = option;
totalMS = totalMS || 1000;
duration = duration || 10; // 每多少时间变化一次
var times = Math.floor(totalMS / duration); // 变化的次数
var dis = (to - from) / times; // 每次变化的量
var curTimes = 0;
// 每次变化的函数
var timer = setInterval(() => {
from += dis;
curTimes++;
// 变化完成，这里保证onmove 在 onend以前执行
if (curTimes >= times) {
from = to;
onmove && onmove(from);
onend && onend();
clearInterval(timer);
return;
}
onmove && onmove(from);
}, duration);
}获取dom
我们点击跳转的时候,首先需要获取到当前点击 dom 的 status，如果当前的状态为 playing 直接 return,否则开始获取当前的 dom 信息，找到当前点击的 dom 和所要跳转到的 dom 所在位置，然后找到所要跳转的位置后，把当前点击的dom和所要去的dom传给开始的动画函数
handleGetDom(type) {
if (!type || type <= 0) return
let _this = this
wx.createSelectorQuery().select('.advertise-box').boundingClientRect()
.selectAll('.grid-container .item').boundingClientRect().exec((ret) => {
const [popRect, endDoms] = ret;
const targetIndex = endDoms.findIndex((item) => item.id == type);
if (targetIndex === -1) return;
const endDom = endDoms[targetIndex];
_this.startTransition(popRect, endDom);
})
},开始动画过渡
根据获取 dom 和所要去的 dom 的位置,在拿到要结束 dom 之前先把 status 状态设置为 playing ，这样后我们就可以设置动画效果然后把对应的参数传给动画函数 createAnimation 。
// 开始动画过渡
startTransition(popRect, endDom) {
const _this = this;
// 设置点击状态为playing
_this.setData({
transitionData: {
..._this.data.transitionData,
statusBtn: 'playing'
}
});
const centerX = endDom.left
const centerY = endDom.top
_this.setData({
transitionData: {
..._this.data.transitionData,
animation: "shrinkAndMoveToPosition 2s forwards"
}
});
createAnimation({
from: popRect.left,
to: centerX,
totalMS: 1000,
onmove: (n) => {
_this.updateTransitionData(endDom, centerX, centerY);
},
onend: () => {
_this.endTransition(endDom);
}
});
},动画的更新函数
这个地方需要注意的是在支付宝中 left、top 不用需要加 px,width和height自行决定用不用除以2
// 更新动画过程中的数据
updateTransitionData(endDom, centerX, centerY) {
this.setData({
transitionData: {
...this.data.transitionData,
width: `${endDom.width / 2}px`,
height: `${endDom.height / 2}px`,
left: `${centerX}px`,
top: `${centerY}px`
}
});
},动画的结束函数
在动画结束的时候我们需要把 status 更改为 end , opacity 设置为 0，清除定时器就可以了
// 结束动画并处理跳转
endTransition(endDom) {
const _this = this;
wx.showTabBar();
_this.setData({
transitionData: {
..._this.data.transitionData,
statusBtn: 'end',
opacity: 0
},
advertiseFlag: false
});
clearInterval(timer);
const currItem = {
...endDom.dataset.item,
richTextType: 2,
appletAdvertisementId: endDom.dataset.item.type
}
_this.handleJumpTypePage(currItem);
},动画所有相关的事件函数
// 跳转类型
handleJumpValue(e) {
let {
relationHomeSwitch,
relationHomeType,
id
} = this.data.advertisingPopup
this.handleClickDataSave(id)
if (relationHomeType && relationHomeSwitch == 1) {
let status = e.currentTarget.dataset.status
// 判断是否有点击过 statusBtn
if (status == 'playing') return;
this.handleGetDom(relationHomeType)
} else if (relationHomeSwitch == 2) {
let data = {
...this.data.advertisingPopup,
richTextType: 3,
}
this.handleJumpTypePage(data)
} else {
wx.showTabBar();
this.setData({
advertiseFlag: false
});
clearInterval(timer);
}
},
// 获取dom
handleGetDom(type) {
if (!type || type <= 0) return
let _this = this
wx.createSelectorQuery().select('.advertise-box').boundingClientRect()
.selectAll('.grid-container .item').boundingClientRect().exec((ret) => {
const [popRect, endDoms] = ret;
const targetIndex = endDoms.findIndex((item) => item.id == type);
if (targetIndex === -1) return;
const endDom = endDoms[targetIndex];
_this.startTransition(popRect, endDom);
})
},
// 开始动画过渡
startTransition(popRect, endDom) {
const _this = this;
// 设置点击状态为playing
_this.setData({
transitionData: {
..._this.data.transitionData,
statusBtn: 'playing'
}
});
const centerX = endDom.left
const centerY = endDom.top
_this.setData({
transitionData: {
..._this.data.transitionData,
animation: "shrinkAndMoveToPosition 2s forwards"
}
});
createAnimation({
from: popRect.left,
to: centerX,
totalMS: 1000,
onmove: (n) => {
_this.updateTransitionData(endDom, centerX, centerY);
},
onend: () => {
_this.endTransition(endDom);
}
});
},
// 更新动画过程中的数据
updateTransitionData(endDom, centerX, centerY) {
this.setData({
transitionData: {
...this.data.transitionData,
width: `${endDom.width / 2}px`,
height: `${endDom.height / 2}px`,
left: `${centerX}px`,
top: `${centerY}px`
}
});
},
// 结束动画并处理跳转
endTransition(endDom) {
const _this = this;
wx.showTabBar();
_this.setData({
transitionData: {
..._this.data.transitionData,
statusBtn: 'end',
opacity: 0
},
advertiseFlag: false
});
clearInterval(timer);
const currItem = {
...endDom.dataset.item,
richTextType: 2,
appletAdvertisementId: endDom.dataset.item.type
}
_this.handleJumpTypePage(currItem);
},
// 点击
handleHomeConfigClick(id) {
let params = {
id: id
}
api.post('/main-service/home-config/click', params).then((res) => {
if (res.code == 1) {
console.log(res, 'res');
}
}).catch((err) => {
console.log(err, 'err');
})
},
jumpFn() {
wx.showTabBar();
this.setData({
advertiseFlag: false
});
clearInterval(timer);
},
// 动画end完整实现代码
// pages/prize/prize.js
const api = require('../../common/api')
const App = getApp()
const getAuthCode = require('../../common/authen.js').getAuthCode
let timer;
let count = 0;
function createAnimation(option) {
// 起始值、结束值、变化总时间
var {
from,
to,
totalMS,
duration,
onmove,
onend
} = option;
totalMS = totalMS || 1000;
duration = duration || 10; // 没多少时间变化一次
var times = Math.floor(totalMS / duration); // 变化的次数
var dis = (to - from) / times; // 每次变化的量
var curTimes = 0;
// 每次变化的函数
var timer = setInterval(() => {
from += dis;
curTimes++;
// 变化完成，这里保证onmove 在 onend以前执行
if (curTimes >= times) {
from = to;
onmove && onmove(from);
onend && onend();
clearInterval(timer);
return;
}
onmove && onmove(from);
}, duration);
}
Page({
data: {
transitionData: {
statusBtn: '', // 是否已经点击过
left: '',
top: '',
width: '580rpx',
height: '980rpx',
opacity: 1
},
marketingId: "", // 营销id
styleConfigData: {},
imgSrc: [],
paramStr: '',
indicatorDots: false,
autoplay: true,
vertical: false,
interval: 2000,
circular: true,
duration: 1500,
defaultTime: 4, //默认时间
advertiseFlag: false,
advertiseMsg: {},
activityData: {
sourceType: ''
},
styleHomeImage: {},
activeIndex: "", // 切换下标
interval: 3000,
advertisingRotation: [], // 广告位轮播
newHomepage: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.getImage()
// this.getStyleConfig()
this.getAuth()
this.getHomeConfigPage()
this.handleGetAxiosData()
this.getAdvertisement()
},
onShow() {
let token = wx.getStorageSync('token')
if (App.globalData.activityData.sourceType == 'activity' && App.globalData.inviteCustomerNum < 2 && token) {
this.handleActivity()
}
},
handleActivity() {
const params = App.globalData.activityData
api.post('/main-service/customer-invite-record', params).then((res) => {
if (res.code === 1) {
console.log('邀请处理成功')
App.globalData.inviteCustomerNum = 2
}
if (res.code == 1010002) {
console.log('邀请处理失败')
App.globalData.inviteCustomerNum = 1
}
})
},
// 获取首页头部配置
getHomeConfigPage() {
api.get("/main-service/home-config/list").then((res) => {
if (res.code == 1) {
let originalHomepage = res.data && res.data.sort((a, b) => {
return a.type - b.type
}) || []
// 处理数据，添加额外属性用于渲染
const processedHomepage = originalHomepage.map(item => {
return {
...item,
shouldDisplay: this.shouldDisplayItem(item),
className: this.getClassByType(item.type),
imageMode: this.getImageMode(item.type),
showMenu: item.type >= 5,
defaultImage: this.getDefaultImage(item.type)
};
});
this.setData({
newHomepage: processedHomepage
})
}
}).catch((err) => {
console.log(err, 'err');
})
},
// 获取页面样式配置
getStyleConfig() {
api.get('/main-service/activity_style_config').then((res) => {
if (res.code === 1) {
const {
data
} = res
this.setData({
styleConfigData: {
...data,
topImg: res.data.imgUrl.split(",")[0],
bottomImg: res.data.imgUrl.split(",")[1],
}
})
}
})
},
//数据
handleGetAxiosData() {
let params = {
type: 39
}
api.get(`/main-service/sys/info`, params).then((res) => {
console.log(res, 'res')
if (res.code == 1) {
this.setData({
styleHomeImage: res.data.remark ? JSON.parse(res.data.remark) : {},
})
}
})
},
getImage() {
api.get('/main-service/home-page/advertising').then(res => {
this.setData({
imgSrc: res.data.weChatBackgroundUrl
})
})
},
// 获取 广告位轮播图
getAdvertisement() {
const params = {
position: 1
}
api.get('/main-service/advertisement', params).then((res) => {
if (res.code == 1) {
this.setData({
advertisingRotation: res.data
})
}
})
},
// 改变图片
changeImg(e) {
this.activeIndex = e.detail.current
this.setData({
activeIndex: e.detail.current
})
},
getAuth() {
getAuthCode().then(res => {
let authCode = res.authCode;
let params = {
code: authCode
};
this.getAdvertiseMsg(params);
});
},
//获取弹窗广告信息
getAdvertiseMsg(params) {
api.get("/main-service/applet-advertisement/v2", params).then(res => {
if (res.code == 1) {
this.setData({
advertiseFlag: res.data.status == 1 ? true : false,
advertiseMsg: res.data,
advertisingPopup: {
...res.data
}
});
if (res.data.id) {
wx.hideTabBar();
}
if (res.data.status == 1) {
timer = setInterval(() => {
if (this.data.defaultTime > 0) {
let time = (this.data.defaultTime -= 1);
this.setData({
defaultTime: time
});
return;
}
if (!this.data.defaultTime) {
clearInterval(timer);
this.isLike();
}
}, 1000);
}
}
});
},
//是否感兴趣
isLike() {
let id = this.data.advertiseMsg.id;
if (id) {
api.get(`/main-service/applet-advertisement/${id}`).then(res => {
if (res.code == 1) {
console.log("感兴趣");
}
});
}
},
// 跳转详情
handleJumpDetails(item) {
let {
id,
jumpType
} = item.currentTarget.dataset.value
if (jumpType == 13) {
wx.navigateTo({
url: `/addressManagement/pages/richText/richText?jumpId=${id}`
});
}
},
// 页面跳转
handleJumpToPage(e) {
let {
item
} = e.currentTarget.dataset
this.handleHomeConfigClick(item.id)
wx.hideLoading()
let data = {
...item,
richTextType: 2,
appletAdvertisementId: item.type
}
wx.hideLoading()
this.handleJumpTypePage(data)
},
// 根据跳转类型处理页面跳转
handleJumpTypePage(item) {
const jumpType = Number(item.jumpType);
this.jumpFn()
const routes = {
1: () => this.handlePageTo(),
2: () => wx.navigateTo({
url: "/addressManagement/pages/invitingWithCourtesy/invitingWithCourtesy"
}),
3: () => wx.navigateTo({
url: `/addressManagement/pages/invitationGiftDetail/invitationGiftDetail?id=${item.jumpValue}`
}),
4: () => wx.switchTab({
url: '/pages/activity/activity'
}),
5: () => wx.navigateTo({
url: `/pages/activityDetail/activityDetail?activityId=${item.jumpValue}`
}),
6: () => wx.navigateTo({
url: `/addressManagement/pages/richText/richText?jumpId=${item.appletAdvertisementId}&type=${item.richTextType}`
}),
// 7: () => wx.navigateTo({ url: `/pages/content-detail/content-detail?id=${item.jumpValue}&type=1` }),
// 8: () => wx.navigateTo({ url: `/pages/content-detail/content-detail?id=${item.jumpValue}&type=3` }),
9: () => wx.navigateTo({
url: `/addressManagement/pages/richText/richText?jumpId=${item.appletAdvertisementId}&status=btn&type=${item.richTextType}`
}),
10: () => wx.navigateTo({
url: `/addressManagement/pages/marketing/marketing?id=${item.type}&type=home`
}),
};
if (routes[jumpType]) {
routes[jumpType]();
}
},
// 点击数据
handleClickDataSave(id) {
let params = {
appletAdvertisementCustomerRecordId: id
}
api.get('/main-service/applet-advertisement/save-click-data', params).then((res) => {
if (res.code == 1) {
console.log(res, 'res');
}
}).catch((err) => {
console.log(err, 'err');
})
},
// 跳转类型
handleJumpValue(e) {
let {
relationHomeSwitch,
relationHomeType,
id
} = this.data.advertisingPopup
this.handleClickDataSave(id)
if (relationHomeType && relationHomeSwitch == 1) {
let status = e.currentTarget.dataset.status
// 判断是否有点击过 statusBtn
if (status == 'playing') return;
this.handleGetDom(relationHomeType)
} else if (relationHomeSwitch == 2) {
let data = {
...this.data.advertisingPopup,
richTextType: 3,
}
this.handleJumpTypePage(data)
} else {
wx.showTabBar();
this.setData({
advertiseFlag: false
});
clearInterval(timer);
}
},
// 获取dom
handleGetDom(type) {
if (!type || type <= 0) return
let _this = this
wx.createSelectorQuery().select('.advertise-box').boundingClientRect()
.selectAll('.grid-container .item').boundingClientRect().exec((ret) => {
const [popRect, endDoms] = ret;
const targetIndex = endDoms.findIndex((item) => item.id == type);
if (targetIndex === -1) return;
const endDom = endDoms[targetIndex];
_this.startTransition(popRect, endDom);
})
},
// 开始动画过渡
startTransition(popRect, endDom) {
const _this = this;
// 设置点击状态为playing
_this.setData({
transitionData: {
..._this.data.transitionData,
statusBtn: 'playing'
}
});
const centerX = endDom.left
const centerY = endDom.top
_this.setData({
transitionData: {
..._this.data.transitionData,
animation: "shrinkAndMoveToPosition 2s forwards"
}
});
createAnimation({
from: popRect.left,
to: centerX,
totalMS: 1000,
onmove: (n) => {
_this.updateTransitionData(endDom, centerX, centerY);
},
onend: () => {
_this.endTransition(endDom);
}
});
},
// 更新动画过程中的数据
updateTransitionData(endDom, centerX, centerY) {
this.setData({
transitionData: {
...this.data.transitionData,
width: `${endDom.width / 2}px`,
height: `${endDom.height / 2}px`,
left: `${centerX}px`,
top: `${centerY}px`
}
});
},
// 结束动画并处理跳转
endTransition(endDom) {
const _this = this;
wx.showTabBar();
_this.setData({
transitionData: {
..._this.data.transitionData,
statusBtn: 'end',
opacity: 0
},
advertiseFlag: false
});
clearInterval(timer);
const currItem = {
...endDom.dataset.item,
richTextType: 2,
appletAdvertisementId: endDom.dataset.item.type
}
_this.handleJumpTypePage(currItem);
},
// 点击
handleHomeConfigClick(id) {
let params = {
id: id
}
api.post('/main-service/home-config/click', params).then((res) => {
if (res.code == 1) {
console.log(res, 'res');
}
}).catch((err) => {
console.log(err, 'err');
})
},
jumpFn() {
wx.showTabBar();
this.setData({
advertiseFlag: false
});
clearInterval(timer);
},
// 动画end
handlePageTo: function () {
let that = this
wx.showLoading({
title: '加载中',
mask: true
})
this.checkAttestation()
// that.getUserInfo()
},
// getUserInfo() {
// let that = this
// getAuthCode().then((res) => {
// const {
// authCode
// } = res
// let params = {
// loginType: 7,
// isRelatedPhoneNumber: 0,
// grantCode: authCode
// }
// api.post('/main-service/customer/login', params).then(({
// data
// }) => {
// const {
// isRelatedPhoneNumber,
// phoneNumber,
// token
// } = data
// if (isRelatedPhoneNumber == 0) {
// wx.hideLoading()
// wx.reLaunch({
// url: '/pages/login/login?sourceType=prize'
// });
// return
// }
// if (isRelatedPhoneNumber == 1) {
// wx.hideLoading()
// wx.setStorageSync('token', token)
// that.checkAttestation()
// return
// }
// })
// })
// },
checkAttestation() {
api.get('/main-service/pregnant-certification/status').then(({
data
}) => {
wx.hideLoading()
const {
isWhite,
isSellOut,
status,
identityType,
isSyncTaoBao
} = data
if (isWhite == 0) {
if (status == 0) {
// 跳转认证页面
wx.navigateTo({
url: '/pages/authentication/authentication'
})
}
if (status == 1) {
// 跳转认证中
wx.navigateTo({
url: '/pages/AddCustomer/AddCustomer'
})
}
if (status == 2) {
// 打开领取链接
if (isSellOut) {
// 礼品售罄
// "identityType": 1:孕妈 2:宝妈
if (!isSyncTaoBao) {
wx.navigateTo({
url: '/pages/sellOut/sellOut'
})
// if (identityType == 1) {
// wx.navigateTo({
// url: '/pages/sellOut/sellOut'
// })
// }
// if (identityType == 2) {
// wx.navigateTo({
// url: `/pages/certificationPassed/certificationPassed`
// })
// }
} else {
// 修改之后的逻辑
wx.navigateTo({
url: `/pages/giftGuide/giftGuide?status=${status}`
})
}
} else {
wx.navigateTo({
url: `/pages/giftGuide/giftGuide?status=${status}`
})
// if (identityType == 1) {
// wx.navigateTo({
// url: `/pages/giftGuide/giftGuide?status=${status}`
// })
// }
// if (identityType == 2) {
// wx.navigateTo({
// url: `/pages/certificationPassed/certificationPassed`
// })
// }
}
}
if (status == 3) {
// 跳转拒绝页面
wx.navigateTo({
url: '/pages/certificationReject/certificationReject'
})
}
if (status == 4) {
// 跳转退回页面重新编辑
wx.navigateTo({
url: `/pages/authentication/authentication?status=${status}`
})
}
}
if (isWhite == 1) {
if (isSellOut) {
wx.navigateTo({
url: '/pages/sellOut/sellOut'
})
} else {
wx.navigateTo({
url: `/pages/giftGuide/giftGuide?status=${status}`
})
}
}
})
},
handleClickBanner() {
wx.navigateTo({
url: '/addressManagement/pages/bannerDetail/bannerDetail',
})
},
// 跳转会场
handleToShare() {
wx.navigateTo({
url: `/addressManagement/pages/taobaoVenue/taobaoVenue?type=home`,
});
},
// 开启分享
onShareAppMessage() {},
// 判断是否展示该 item
shouldDisplayItem(item) {
if (item.type >= 5 && item.showSwitch !== 1) return false;
return !!item.url || item.type <= 4; // 当 type 小于等于 4 时总是展示
},
// 根据 type 返回对应的类名
getClassByType(type) {
switch (type) {
case 1:
return 'new-mom-gift';
case 2:
return 'xhs-volunteer';
case 3:
return 'douyin-volunteer';
case 4:
return 'invitation-gift';
case 5:
return 'advertising-space-one';
case 6:
return 'advertising-space-two';
case 7:
return 'advertising-space-three';
default:
return '';
}
},
// 根据 type 返回图片的 mode
getImageMode(type) {
return type >= 5 ? 'widthFix' : 'scaleToFill';
},
// 获取默认图片 URL
getDefaultImage(type) {
return 'https://yizhen-mamapai-dev.oss-cn-zhangjiakou.aliyuncs.com/certification/2024-06-13/3cb773c6e3614c389619a24d55f868d4.png';
},
onPullDownRefresh() {
Promise.all([this.getHomeConfigPage()]).then(res => {
this.stopPullDownRefresh();
});
},
onUnload() {
this.jumpFn()
},
})到此这篇关于微信/支付宝小程序实现弹窗动画缩放到某个位置的文章就介绍到这了,更多相关弹窗动画缩放到某个位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！