javascript - 如何修复 setInterval 缓慢:twinmax 和 jquery
问题描述
我想使用 TweenMax 和 J-Query 更改图片。但它比 setInterval 集要慢。
我没有任何其他设置,我只是用它们来改变图片。而在 twinmax 中,没有 setinterval 设置。
从左侧的 scale x : 0 开始并在我向右传递时缩小,以便我身后的背景图像在指定时间发生变化。
换图片的时间越来越慢。我无法上传图片,因为我不知道如何上传。
我想同时转换,有没有更好的方法?我可以只用css和关键帧来做吗?
$(function() {
var roll = 1;
setInterval(function() {
roll++;
if (roll > 2) {
roll = 1;
}
$("#box1").attr("src", "assets/images/top/pc/main_" + roll + "_b.png");
}, 4000);
})
$(function() {
var roll = 1;
setInterval(function() {
roll++;
if (roll > 2) {
roll = 1;
}
$("#box2").attr("src", "assets/images/top/pc/main_" + roll + "_b.png");
}, 5000);
})
var tl = new TimelineMax({
repeat: -1,
repeatDelay: 3
});
tl.from(".layer1", 0.8, {
scaleX: 0,
transformOrigin: "left",
ease: 'expo.inOut'
});
tl.to(".layer1", 0.8, {
scaleX: 0,
transformOrigin: "right",
ease: 'expo.out'
});
var ta = new TimelineMax({
repeat: -1,
repeatDelay: 4
});
ta.from(".layer2", 0.8, {
scaleX: 0,
transformOrigin: "left",
ease: 'expo.inOut'
});
ta.to(".layer2", 0.8, {
scaleX: 0,
transformOrigin: "right",
ease: 'expo.out'
});
,
main {
position: relative;
width: 100%;
}
.box1 {
width: 40.4%;
position: absolute;
top: 3.7%;
left: 15%;
}
.box1 img {
width: 100%;
}
.box2 {
width: 19.9%;
position: absolute;
top: 3.7%;
left: 56.8%;
}
.box2 img {
width: 100%;
}
.layer1 {
background-color: #f85983;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
.layer2 {
background-color: #f85983;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
</head>
<body>
<div class="main">
<div class="box1">
<div class="layer1" id="layer1"></div>
<img id="box1" src="https://imgur.com/98BK2vZ" alt="">
</div>
<div class="box2">
<div class="layer2" id="layer2"></div>
<img id="box2" src="assets/images/top/pc/main_1_b.png" alt="">
</div>
</div>
</body>
</html>
当粉红色层穿过标题部分时,我想表达背面图像的变化。
我想在 5 个图像框中表达相同的内容。
本站仅供参考。我期待着您的友好合作。
https://a3-liber.com/index.html
这是示例视频!
解决方案
我已经设法参数化和计算正确的动画和幻灯片间隔。
var rollImg = ["https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=",
"https://cdn.leroymerlin.com.br/products/letra_b_11cm_acrilico_preto_kami_acrilicos_89622526_0001_600x600.jpg"];
var layer1Interval = 4000;
var layer2Interval = 5000;
var animationInterval = 1000;
$(function() {
var roll = 1;
function rollFnc () {
setTimeout(function() {
roll++;
if (roll > 2) {
roll = 1;
}
$("#box1").attr("src", rollImg[roll - 1]);
setTimeout(rollFnc, layer1Interval + animationInterval * 1.5);
}, animationInterval / 2);
}
rollFnc();
})
var tl = new TimelineMax({
repeat: -1,
repeatDelay: (layer1Interval / 1000)
});
tl.from(".layer1", animationInterval / 1000, {
scaleX: 0,
transformOrigin: "left",
ease: 'expo.inOut'
});
tl.to(".layer1", animationInterval / 1000, {
scaleX: 0,
transformOrigin: "right",
ease: 'expo.out'
});
,
main {
position: relative;
width: 100%;
}
.box1 {
width: 40.4%;
position: absolute;
top: 3.7%;
left: 15%;
}
.box1 img {
width: 100%;
}
.box2 {
width: 19.9%;
position: absolute;
top: 3.7%;
left: 56.8%;
}
.box2 img {
width: 100%;
}
.layer1 {
background-color: #f85983;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
.layer2 {
background-color: #f85983;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
</head>
<body>
<div class="main">
<div class="box1">
<div class="layer1" id="layer1"></div>
<img id="box1" src="https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=" alt="">
</div>
</div>
</body>
</html>
推荐阅读
- authentication - asp.net core with Azure authentification and azure load balancer
- wolfram-mathematica - 如何将输出转换为应力强度单位(MPa sqrt[米])
- bash - pv command for progress bar not working correctly in a script
- ios - 在苹果开发者帐户(企业帐户)中创建应用标识符时出错
- angularjs - 各日期当月注册用户总数
- php - 如何计算调查问题中“优秀”结果的数量并将其作为整数存储在 mysql 表中?
- android - Firebase 分析事件参数未注册
- c# - 通用类来启动我的一些审计属性
- php - Laravel + Lighthouse (GraphQL) 自定义变异验证
- json - Flutter Dart 将具有动态键但结构化值的 json 反序列化为 Map