【CSS】motion-path运动路径

这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战

motion-path

这次，我们一起来学习一下CSS中的motion-path属性：运动路径

• motion-path用于定义元素如何运动，利用这个属性，我们可以绘制特定的路径，并让元素按照这个特定的路径进行运动

（1）一般运动

• 通常情况下，元素的运动都比较简单——都是直线运动，借助CSS中的其它属性也是可以完成的

  • 普通的，直接改变元素的margin或者padding就可以直接实现元素的位移，再加上动画属性animation，就可以实现运动
  • 其它的，利用position属性进行定位，然后改变top、right、bottom、left属性，也可以让元素运动

  .box1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: #000;
      animation: position-move 1s ease-in-out infinite alternate;
  }      
  @keyframes position-move {
      to {
          top: 100px;
          left: 100px;
      }
  }
  

  • 利用transform属性的translate也是可以实现的

  .box1 {
      width: 100px;
      height: 100px;
      background-color: #000;
      animation: transform-move 1s ease-in-out infinite alternate;
  }      
  @keyframes transform-move {
      to {
          transform: translate(100px, 100px);
      }
  }
  

  

（2）路径运动

• 对于直线运动来说，我们可以借助其它属性来完成，不过对于曲线运动，可能实现起来就比较复杂了

  • 而借助motion-path属性，我们就可以比较容易的实现这个效果了

• 先来看看我们需要用到的一些属性值：

  • offset-path：该属性可以接收一个SVG路径，用于指定元素的运动路径
  • offset-distance：该属性用于指定元素在运动路径上运动的距离
  • offset-position：该属性用于指定元素的初始位置
  • offset-anchor：该属性用于指定元素的锚点，即元素中的哪一个点在运动路径上
  • offset-rotate：该属性用于指定元素运动时的角度朝向，即相对于运动路径来说元素的角度

• 然后我们来实现一些运动

  • 先使用offset-path绘制一条运动路径
  • 然后使用offset-distance来控制元素的位置
  • 最后使用动画属性来改变offset-distance，从而让元素运动起来

  （其它属性用于辅助）

  • 直线运动

    .box1 {
        width: 100px;
        height: 100px;
        background-color: #000;
        offset-path: path('M 0 0, L 100 100');
        animation: motion-move 1s ease-in-out infinite alternate;
    }
    @keyframes motion-move {
        to {
            offset-distance: 100%;
        }
    }
    

    

    这里我们绘制了一条从(0,0)到(100,100)的直线，而元素会默认以中心作为锚点，以平行于运动路径的角度运动，所以我们看到元素运动时是旋转了45deg的

  • 曲线运动

    /* 主要代码 */
    .box1 {
        offset-path: path('M 100 100,L 200 100,A 100 100 0 1 1 400 100, L 500 100');
        animation: motion-move 3s ease-in-out infinite alternate;
    }
    @keyframes motion-move {
        to {
            offset-distance: 100%;
        }
    }
    

    

  更多的在于路径的绘制了，这里不展开介绍

• 辅助属性

  • offset-position

    • 设置起始位置，属性值同background-position类似

    .box1 {
        offset-positino: 10% 50%;
    }
    

  • offset-anchor

    • 设置锚点，属性值与transform-origin类似，可以是方位名词，也可以是具体的数值

    .box1 {
        offset-anchor: top left;
    }
    

  • offset-rotate

    • 设置角度，默认为auto，即按照路径的切线方向，如果设置为固定的角度值，则元素的运动角度不再变化，
      • 还可以是关键字：reverse表示反向

    .box1 {
        offset-rotate: 45deg;
    }