Javascript 动画的时间间隔
我正在制作一个动画,用动画来显示这种效果,我已经能够在1000毫秒后显示推送文本,并将操作性更改为0.5。但是它不像gif中的那样同步。我可以做些什么来增加延迟和持续时间的效果 我的html代码包含了所有的文本,这是基于循环显示的Javascript 动画的时间间隔,javascript,html,css,animation,Javascript,Html,Css,Animation,我正在制作一个动画,用动画来显示这种效果,我已经能够在1000毫秒后显示推送文本,并将操作性更改为0.5。但是它不像gif中的那样同步。我可以做些什么来增加延迟和持续时间的效果 我的html代码包含了所有的文本,这是基于循环显示的 <div class="onboarding-content"> <div [class]="bottomStyle"> <div class="onboardtxt one"> <p [
<div class="onboarding-content">
<div [class]="bottomStyle">
<div class="onboardtxt one">
<p [class]="firstAnimation">Hello, Meet Mat</p>
</div>
<div class="onboardtxt two">
<p [class]="secondAnimation">Some text</p>
</div>
<div class="onboardtxt three">
<p [class]="thirdAnimation">Some text two </p>
</div>
<div class="onboardtxt four">
<p [class]="forthAnimation">Some text three</p>
</div>
</div>
</div>
你好,认识Mat
一些文本
一些文本二
一些文本三
我的js文件
// Animation
count: number;
display: string = "display";
firstAnimation: string = "first";
secondAnimation: string = "second";
thirdAnimation: string = "third";
forthAnimation: string = "forth"
truthy: any;
bottomStyle: string = "bottom"
constructor(public navCtrl: NavController) {
var messages = ['1','2','3','4','5']
var count = 0;
var that = this
var timer = function () {
if (count === 1) {
that.firstAnimation = "first-para-animation";
} else if (count === 2) {
that.firstAnimation = "first-second-fire-animation";
that.secondAnimation = "second-para-animation";
} else if (count === 3) {
that.secondAnimation = "second-second-fire-animation";
that.thirdAnimation = "third-para-animation";
} else if (count === 4) {
that.thirdAnimation = "third-second-fire-animation";
that.forthAnimation = "forth-para-animation";
} else if (count === 5) {
that.truthy = true;
// that.bottomStyle = "no-margin"
}
// check the length of count before pushing
if (count < messages.length) {
count += 1
} else {
clearInterval(interval)
}
}
// // setting the interval after how long it should call the timer function
var interval = setInterval(timer, 1000)
}
ionViewDidLoad() {
console.log('ionViewDidLoad home page');
anime.timeline({ loop: false })
.add({
targets: 'div.bottomStyle',
translateY: [
{ value: 10, delay: 0 },
// { value: 0, duration: 400 },
],
easing: "easeOutQuart",
duration: 0,
// delay: function (el, i, l) {
// return 1000 * i;
// },
// delay: function(el, i) {
// return 800 * i;
// },
color: '#fff'
})
anime.timeline({ loop: false })
.add({
targets: ['.onboardtxt.one',],
duration:100,
// delay:1200,
opacity: 0.5
})
anime.timeline({ loop: false })
.add({
targets: ['.onboardtxt.two',],
// delay:1300,
delay:4400,
opacity: 0.5,
// opacity: 0.5,
})
anime.timeline({ loop: false })
.add({
targets: ['.onboardtxt.three',],
delay:5500,
opacity: 0.5,
// delay:500
});
}
//动画
计数:数字;
显示:string=“display”;
firstAnimation:string=“first”;
secondAnimation:string=“second”;
第三信息:string=“第三”;
forthAnimation:string=“forth”
真理:任何;
bottomStyle:string=“bottom”
构造函数(公共navCtrl:NavController){
变量消息=['1'、'2'、'3'、'4'、'5']
var计数=0;
var=this
变量计时器=函数(){
如果(计数==1){
that.firstAnimation=“第一段动画”;
}否则如果(计数==2){
that.firstAnimation=“first second fire animation”;
that.secondAnimation=“第二段动画”;
}否则如果(计数==3){
that.secondAnimation=“second second fire animation”;
thirdAnimation=“第三段动画”;
}否则如果(计数===4){
thirdAnimation=“第三秒火焰动画”;
that.forthAnimation=“第四段动画”;
}否则如果(计数==5){
那是真的;
//that.bottomStyle=“无保证金”
}
//推前检查计数长度
如果(计数<消息长度){
计数+=1
}否则{
清除间隔(间隔)
}
}
////设置调用计时器函数的时间间隔
var间隔=设置间隔(计时器,1000)
}
ionViewDidLoad(){
log('ionViewDidLoad主页');
动画时间线({loop:false})
.添加({
目标:“div.bottomStyle”,
translateY:[
{值:10,延迟:0},
//{值:0,持续时间:400},
],
放松:“放松夸脱”,
持续时间:0,
//延迟:功能(el、i、l){
//返回1000*i;
// },
//延迟:功能(el,i){
//返回800*i;
// },
颜色:'#fff'
})
动画时间线({loop:false})
.添加({
目标:['.onboardtxt.one',],
持续时间:100,
//延误:1200,
不透明度:0.5
})
动画时间线({loop:false})
.添加({
目标:['.onboardtxt.two',],
//延误:1300,
延误:4400,
不透明度:0.5,
//不透明度:0.5,
})
动画时间线({loop:false})
.添加({
目标:['.onboardtxt.three',],
延误:5500,
不透明度:0.5,
//延误:500
});
}
从那时起,您看过文档了吗?非常好:
根据您的代码,您只需要添加到一个时间轴,以便同步它们(推送的文本按顺序发生)
源自“时间线基础”的示例:
// Create a timeline with default parameters
var tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
// Add children
tl
.add({
targets: '.onboardtxt.one',
translateX: 250,
})
.add({
targets: '.onboardtxt.two',
translateX: 250,
})
.add({
targets: '.onboardtxt.three',
translateX: 250,
});