前端常用动画直接可以用的代码加具体流程和案例能应付90%的开辟场景 - ToB企服应用市场:ToB评测及商务社交产业平台

const toggleAnimation = (ind) => {
const staticstate = document.querySelector(`.staticstate${ind}`);
const spinner = document.querySelector(`.spinner${ind}`);
gsap.to(staticstate, {
opacity: 0,
duration: 0,
onComplete: () => {
staticstate.style.display = 'none';
spinner.style.display = 'block';
}
});
}
const toggleAnimation2 = (ind) => {
const spinner = document.querySelector(`.spinner${ind}`);
const checkmark = document.querySelector(`.checkmark${ind}`);
gsap.to(spinner, {
opacity: 0,
duration: 0,
onComplete: () => {
gsap.to(checkmark, {
opacity: 1,// 透明度
scale: 1, // 放大效果
duration: 1, // 动画持续时间
ease: 'power1.inOut', // 动画缓动函数
});
}
});
}

复制代码

const toggleAnimation = (ind,reversal) => {
const prize = document.querySelector(`.prize-prize${ind}`);
gsap.to(prize, {
opacity: 1,// 透明度
scale: reversal?1.05:0.9, // 放大缩小效果
duration: 1.5, // 动画持续时间
ease: 'power1.inOut', // 动画缓动函数
onComplete: () => {
gsap.to(prize, {
opacity: 1,// 透明度
scale: reversal?0.9:1.05, // 放大缩小效果
duration: 1, // 动画持续时间
ease: 'power1.inOut', // 动画缓动函数
});
}
});
}

复制代码

-------------------------html
<van-overlay style="z-index: 2;" :show="frameAnimation" :lock-scroll="false">
<div id="frameAnimationDom" class="title-bg"></div>
</van-overlay>
---------------------------JS
let timer4;//动画计时器
function preLoad() {// 预加载帧动画图片
const frameCount = 58; // 帧数
for (let i = 0; i <= frameCount; i++) {
const img = new Image();
img.src = new URL(`../assets/images/blind/frame/${i}.png`,import.meta.url).href;
images.value.push(img);
}
frameAnimation.value = true;
// 方案一帧动画
setTimeout(()=>{//确认支付后再播放动画开奖
const frameCount = 58; // 帧数
const frameElement = document.getElementById('frameAnimationDom');
let currentFrameIndex = 0;
let lastTime = 0;
function animate() {
if (new Date().getTime() - lastTime >= 40) { // 40毫秒一帧一秒25帧
frameElement.style.backgroundImage = `url(${images.value[currentFrameIndex].src})`;
currentFrameIndex = (currentFrameIndex + 1) % frameCount;
lastTime = new Date().getTime();
}
timer4 = requestAnimationFrame(animate);
}
// 开始动画
animate();
},200)
// 方案2 雪碧图
// animate();
// const frameCount = 51; // 总帧数
// const frameWidth = 780; // 每帧宽度
// let currentFrame = 0;
// let lastTime = 0;
// function animate() {
// if (new Date().getTime() - lastTime >= 75) { // 75毫秒一帧一秒13帧？
// const frameElement = document.getElementById('frameAnimationDom');
// const offset = currentFrame*(100/50);
// frameElement.style.backgroundPosition = `${offset}% 0%`;
// currentFrame = (currentFrame + 1) % frameCount;
// lastTime = new Date().getTime();
// }
// timer4 = requestAnimationFrame(animate);
// }
setTimeout(()=>{
cancelAnimationFrame(timer4)// 清除动画循环
timer4 = null; // 重置 ID
frameAnimation.value = false;
},2650)
-------------------------css
// 方案1 帧动画
.title-bg{
width: 375px;
height: 812px;
background-size: 100% 100%;
margin: 0 auto 0 auto;
}
// 方案2 雪碧图
// .title-bg{
// width: 375px;
// height: 812px;
// background-image: url(../assets/images/blind/sprites.png);//动态高度做展开后由于图片过多改为滚动展示
// background-size: auto 100%; /* 确保背景图像的高度与容器高度一致 */
// margin: 0 auto 0 auto;
// }

复制代码