学习内容:
用JS封装了两个文字动效
1.文字进行一次放大缩小动画,达到显眼的效果(缩放动效)
2.文字进行两次显示消失闪烁动画,达到显眼的效果(闪烁动效)
代码实现:
1.缩放动效
- 代码:
sizeJitter: function (rowRef, speed) { //rowRef文字行数,speed当前进度
let len = rowRef.length;
let pct = 1 / len;
//把每一行文字作为一个缩放的整体
for (let i = 0; i < len; i++) {
let last = i * pct; //缩放整体的开头
let next = last + pct; //缩放整体的结尾
let size;
//进度小于等于开始部分时,字体大小为原来的大小
if(speed <= last){
size = 1;
}else{
//进度大于等于结束部分时,字体大小为原来的大小
if(speed>=next){
size = 1;
}else{
if(speed <= (last + pct / 2)){
size = 1 + (0.8 / pct ) * (speed - last); //文字变大部分
}else{
size = 1.8 - (0.8 / pct ) * (speed - last); //文字缩小部分
}
}
}
rowRef[i].style.transform = "scale(" + size + ")";
}
},
2.闪烁动效
- 代码:
textFlashing: function(rowRef, speed, style) { //rowRef文字行数,speed当前进度
let len = rowRef.length;
let pct = 1 / len;
//把每一行文字作为一个闪烁的整体
for(let i = 0; i < len; i++){
let last = i * pct; //闪烁整体的开头
let next = last + pct; //闪烁整体的结尾
if(speed<=last){
rowRef[i].style.opacity=1; //进度小于等于开始部分时,文字不透明
}else{
if(speed>=next){
rowRef[i].style.opacity=1; //进度大于等于结束部分时,文字不透明
}else{
//文字先逐渐透明再逐渐恢复实体,再逐渐透明,再恢复实体的过程
if(speed <= (last + pct / 4)){
rowRef[i].style.opacity = (1-speed * 4) * style.opacity;
}else if(speed>(last + pct / 4) && speed<=(last + pct / 2)){
rowRef[i].style.opacity = (speed - 0.25) * 4 * style.opacity;
}else if(speed>(last + pct / 2) && speed<=(last + 3 * (pct / 4))){
rowRef[i].style.opacity = (1- (speed - 0.5) * 4) * style.opacity;
}else{
rowRef[i].style.opacity = (speed - 0.75) * 4 * style.opacity;
}
}
}
}
},
实习感悟:
实习第三周开始,第二周没有具体的任务,主要在熟悉公司做过的项目的代码为主,七月有新的任务要做,不过要求还未给,就先根据给的视频演示,把一些常用的文字动效(之前未封装过的)封装起来,在后续做项目时能直接使用节约时间。一开始敲代码还是很不熟练,需要多敲多练。接下来要封装一个下划线组件(在一段文字下方,有一段下划线会移动过去,并且在移动过程中,线的长度会改变,来达到显眼的效果)。
2022.7.4