恒生——寻常问道实习记录（二）

最新推荐文章于 2024-08-31 13:30:09 发布

纸歌丶

最新推荐文章于 2024-08-31 13:30:09 发布

阅读量86

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/versterben/article/details/125602010

版权

学习内容：

用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