前端动画实现思路-css3、定时器以及requestAnimtionFrame

站长

2022年12月09日 01:32 · 阅读数 71

1.`css3`中的变形属性`transfrom`:

对于动画的学习就先从基础的css3的transform变形开始，transform改变css中样式，最主要的是开启了硬件加速功能，比传统的样式改变，性能流畅一些。

🚀常用的改变属性如下：

scale(n):缩放,n为缩放的倍数
translate(x,y):位移
- translate3d(x,y,z):3d位移。或者tanslateX、tanslateY、tanslateZ
rotate(ndeg):旋转n度
- rotateX：沿着x轴旋转
- rotateY:沿着y轴旋转
skew(ndeg):倾斜n度
matrix:矩阵变形

通过transform变形后的元素相当于脱离的文档流，对其他元素的位置不会产生影响

2.`css3`中的过渡动画`transition`:

transition的作用是当元素的样式在某种情况下改变了，不是立即改变，而是按照指定的效果，慢慢的去改变，从而实现动画效果。

设置过渡效果的4个维度:

transition-property:设置过渡的样式属性(就是哪些样式改变会执行过渡效果)，不设置默认是all
transition-duration:动画运行的时间,设置秒或者毫秒均可，例如：1s或者1000ms
transiton-timing-function:运动的方式
- liner:匀速运动
- ease:非匀速
- ease-in:加速
- ease-out:减速
- ease-in-out:先加速后减速
- cubic-bezier:贝塞尔曲线
tranisiton-delay：延迟时间，不设置默认是0s

🚀示例代码:

<!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>css3动画</title>
  <link crossorigin="anonymous" integrity="sha512-ooAid9o81ZQzXU7r3sCPErZ4L51zuVGywgQ/HhDnUtpAQCqF2Yyko81zESqIZPgokPCVnitddsfyE6ZtQbVSvg==" href="https://lib.baomitu.com/reseter.css/1.2.0/reseter.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/css3.css">
</head>
<body>
  <img src="./images/dog.png" class="dog"/>
  <div class="box"></div>
</body>
</html>

/* css3.css文件 */
.dog{
  display: block;
  width: 103px;
  height: 92px;
  /* transform: scale(0.6) rotate(180deg) skew(45deg); */
  /* 偏移 */
  /* transform: translate(200px,200px); */
  margin: 40px atuo;
  /* 所有变化都设置过渡 */
  /* transition: all 1s linear 0s; */
  /* transition: filter 1s linear 0s; */
}
.dog:hover{
  transform: scale(1.2);
  /* 设置灰度 */
  -webkit-filter: grayscale(1);
}
.box{
  width: 400px;
  height: 300px;
  background: lightblue;
  margin: 10px;
}

3.`css3`中的帧动画`animation`

animation步骤:

制作运动的轨迹(每一帧元素的样式)@keyframes

@keyframes 动画名字{
	0%或者form(第一帧的样式)
  ...
  50% (中间某帧的样式)
  ...
  100%或者to(最后一帧的样式)
}

播放▶️动画(按照轨迹运动)animation
- animation-name：动画名
- animation-durtion：播放时间
- animaiton-timing-funciton:运动方式,默认是ease非匀速
- animation-delay:延迟时间
- animation-iteration-count：运动播放的次数，不设置默认是1次，infinite为无限次，也就是循环播放
- animation-fill-mode：控制运动状态
  - forwards:animation动画，元素运动完，默认返回第一帧所在的位置，如果设置了这个属性，元素运动完，会停在最后一帧的位置上
  - backwards:在元素设置了延迟时间的情况下，我们让元素在第一帧位置等待运行
  - both：同时具备以上两种特点

🚀代码示例:

.dog{
  display: block;
  width: 103px;
  height: 92px;
  margin: 0px atuo;
  animation: go 2s ease-in 1s both;
}
@keyframes go {
  0%{
    transform: translate(0px,0);
  }
  25%{
    transform: translate(400px,0);
  }
  50%{
    transform: translate(400px,200px);
  }
  75%{
    transform: translate(0px,200px);
  }
  100%{
    transform: translate(0px,0);
  }
}

4.JS定时器动画的实现方式：

4.1:限定步长的`js`动画:

window.getComputedStyle(元素)来获取元素通过浏览器计算的样式,.style只能获取行内样式
通过parseFloat来讲获取到的带有px单位的字符串转为数字
(curL + step) >= target来进行判断，在运动到边界出不会出现滚动条

<!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>js的animate的动画</title>
  <link crossorigin="anonymous" integrity="sha512-ooAid9o81ZQzXU7r3sCPErZ4L51zuVGywgQ/HhDnUtpAQCqF2Yyko81zESqIZPgokPCVnitddsfyE6ZtQbVSvg==" href="https://lib.baomitu.com/reseter.css/1.2.0/reseter.min.css" rel="stylesheet">
  <!-- <link rel="stylesheet" href="css/css3.css"> -->
  <link rel="stylesheet" href="css/animate.css">
</head>
<body>
  <img src="./images/dog.png" class="dog"/>
  <script>
    // 定时器动画:限定步长
    let dog = document.querySelector('.dog');
    let target = document.documentElement.clientWidth - dog.offsetWidth;
    let step = 10;
    //设置每间隔17毫秒，向右走一步
    let timer = setInterval(()=>{
      // 在现有位置上，加上步长
      //1.获取当前dog的位置,在现有的位置上加上步长
      let curL =parseFloat(window.getComputedStyle(dog).left); //dog这个元素所有经过浏览器计算的样式
      //判断到达屏幕边界
      if((curL + step) >= target){
        dog.style.left = target + 'px';
        clearInterval(timer);
        timer = null;
        return;
      }
      curL += step;
      // 2.重新给元素设置样式
      dog.style.left = curL + 'px';
    },17)
  </script>
</body>
</html>

4.2:限定时间动画:

总体来说，要有

已经运动的时间:time
运动的总时间:duration
运动的总距离:change
计算当前位置的就是用time/duration * change + begin
17毫秒来自原屏幕一般一秒刷新60次,1000/60约等于16.7

<!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>js的animate的动画-限定时间</title>
  <link crossorigin="anonymous" integrity="sha512-ooAid9o81ZQzXU7r3sCPErZ4L51zuVGywgQ/HhDnUtpAQCqF2Yyko81zESqIZPgokPCVnitddsfyE6ZtQbVSvg==" href="https://lib.baomitu.com/reseter.css/1.2.0/reseter.min.css" rel="stylesheet">
  <!-- <link rel="stylesheet" href="css/css3.css"> -->
  <link rel="stylesheet" href="css/animate.css">
</head>
<body>
  <img src="./images/dog.png" class="dog"/>
  <script>
    //限定时间的动画
    let dog = document.querySelector('.dog');
    // 目标位置
    let target = document.documentElement.clientWidth - dog.offsetWidth;
    // 总时间duration
    let duration = 1000;
    //起始值
    let begin =parseFloat(window.getComputedStyle(dog).left);
    //总距离
    let change = target - begin;
    // 已经运动的时间
    let time = 0;
    // 定时器
    let timer = setInterval(()=>{
      time += 17;
      if(time + 17 >= duration){
        dog.style.left = target + 'px';
        clearInterval(timer);
        timer  = null;
        return;
      };
      let curL = time/duration * change + begin;
      dog.style.left = curL + 'px';
    },17);
  </script>
</body>
</html>

5.requestAnimationFrame

requestAnimtionFrame是html5中专门用来请求动画的api，通过定时器来实现动画的最大问题是，某些情况写容易出现丢帧现象,这个和屏幕的刷新频率也有关系，而requestAnimationFrame最大的优势是由系统来决定回调函数的执行机制，跟屏幕的刷新频率保持一致，这样不会丢帧。

requestAnimationFrame相对于定时器除了不丢帧外，还有以下优势：

cpu节能
函数节流

使用:window.requestAnimationFrame(func)

今天莎老板不在身边，跟弟弟去看家具了的，还是感谢我家莎老板，也感谢您的观看。

转载自:https://juejin.cn/post/7155045399470800927

前端动画实现思路-css3、定时器以及requestAnimtionFrame

1.css3中的变形属性transfrom:

2.css3中的过渡动画transition:

3.css3中的帧动画animation