记一次平滑动画测试

如何使动画看起来更加的流畅，平滑？核心概念其实是帧数稳定在60帧左右。这次不讨论通过raf来实现平缓帧动画，讨论不依靠raf把现有的一些动画变得更加流畅，也就是平均帧数接近60帧。

1. 侧滑实验

本次实验最开始是一个左侧导航条飞入切换，使用left和transform来进行对比实验，现在行内普遍认为transform性能优于改变位置，因为可以减少页面重排。

相关属性代码

  1.tansfrom: tanslateX(-100%);
    transition: transform 1s linear;

  and

  2.left: -100px;
    transition: left 1s linear;

由于页面结构不复杂以及动画非常简单，帧数基本都是60左右，但是如果加上will:change属性，或者transform: translateZ(0),也就是GPU引擎加速，可以极小的提升帧率的稳定，但是效果不太明显。所以得出结论：在基础简单的页面中，简单切换动画使用left或者transform改变dom位置对动画的连贯影响不大。

既然在简单页面看不出transform的优越性，那我们需要更复杂的页面和更加复杂的动画来继续测试

2. 复杂动画测试

这回我在平滑实验代码基础上进行了改动，在每个相关的盒子都添加了一些html结构，并且加上了margin,使他们能够增加页面容量，同时也对动画进行了改进，直接吧transition切换改成了animation动画。

css

  animation: test 0.2s linear alternate 10;

  @keyframes test {
    from {
        /* transform: translateX(-100%); */
        left: -600px;
    }
    to {
        /* transform: translateX(100%); */
        left: 600px;
    }
  }

html

  
    
      哈哈哈哈哈哈哈
        
        
      
      
        哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈
        
      
    
     //侧边盒子
      哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈
      哈哈哈哈哈哈哈