81 lines
2.2 KiB
XML
81 lines
2.2 KiB
XML
/**
|
||
* 气泡动画 WXS 模块
|
||
* 在视图层独立线程中执行，不占用 JS 主线程
|
||
*/
|
||
|
||
/**
|
||
* 生成随机的左边距位置（百分比）
|
||
* @param {number} textLength - 文本长度
|
||
* @param {number} viewportWidth - 视口宽度
|
||
* @returns {number} 左边距百分比
|
||
*/
|
||
function generateLeftPosition(textLength, viewportWidth) {
|
||
// 预估气泡宽度
|
||
var estimatedBubbleWidth = textLength * 12 + 48
|
||
var bubbleWidthPercent = (estimatedBubbleWidth / viewportWidth) * 100
|
||
|
||
// 确保气泡完全在可视区域内
|
||
var minLeft = 5
|
||
var maxLeft = 95 - bubbleWidthPercent
|
||
if (maxLeft < minLeft) {
|
||
maxLeft = minLeft
|
||
}
|
||
|
||
var range = maxLeft - minLeft
|
||
var random = Math.random()
|
||
return random * range + minLeft
|
||
}
|
||
|
||
/**
|
||
* 生成随机的动画时长（秒）
|
||
* @returns {number} 动画时长
|
||
*/
|
||
function generateAnimationDuration() {
|
||
var random = Math.random()
|
||
return random * 2 + 4 // 4-6秒
|
||
}
|
||
|
||
/**
|
||
* 获取气泡样式
|
||
* @param {string} text - 气泡文本
|
||
* @param {number} viewportWidth - 视口宽度
|
||
* @returns {string} 样式字符串
|
||
*/
|
||
function getBubbleStyle(text, viewportWidth) {
|
||
var textLength = text.length
|
||
var leftPosition = generateLeftPosition(textLength, viewportWidth)
|
||
var duration = generateAnimationDuration()
|
||
|
||
return 'left: ' + leftPosition + '%; animation-duration: ' + duration + 's;'
|
||
}
|
||
|
||
/**
|
||
* 计算气泡的 transform 值（用于优化动画性能）
|
||
* @param {number} progress - 动画进度 0-1
|
||
* @returns {string} transform 样式
|
||
*/
|
||
function calculateTransform(progress) {
|
||
// 垂直移动距离
|
||
var translateY = -100 - (progress * 200) // 从 -100rpx 到 -300rpx
|
||
|
||
// 水平偏移
|
||
var translateX = progress * 20 // 0 到 20rpx
|
||
|
||
// 透明度变化
|
||
var opacity = 1
|
||
if (progress < 0.1) {
|
||
opacity = progress * 10 // 0-0.1: 淡入
|
||
} else if (progress > 0.9) {
|
||
opacity = (1 - progress) * 10 // 0.9-1: 淡出
|
||
}
|
||
|
||
return 'transform: translate(' + translateX + 'rpx, ' + translateY + 'rpx); opacity: ' + opacity + ';'
|
||
}
|
||
|
||
module.exports = {
|
||
generateLeftPosition: generateLeftPosition,
|
||
generateAnimationDuration: generateAnimationDuration,
|
||
getBubbleStyle: getBubbleStyle,
|
||
calculateTransform: calculateTransform
|
||
}
|