微信小程序实现一个复杂的路径动画

前言

微信小程序不支持svg动画,如今css3发展的越来越快,虽然没有svg的接口那么丰富,但使用起来比较容易上手,下面借助两个工具实现一个复杂的路径动画,在浏览器端当然也可以运行.

效果预览

模仿过山车的动画,复杂路径和小车速度的调整代码都是用的在线工具生成,完全不需要自己写哦.

页面代码

wxml文件

<view class="container">
    <image src="../../static/che.png" class='circle circle-1'></image>
</view>

wxss文件

.container {
  display: flex;
  height: 100vh;
}

.circle {
  offset-path: path("m27.5,239.78125c1,-2 30,-178 29.5,-178.78125c0.5,0.78125 18.5,-43.21875 36.5,-36.21875c18,7 36,163 44,196c8,33 43,47 72,42c29,-5 63,-10 71,-14c8,-4 48,-58 42,-93c-6,-35 -5,-64 -20,-88c-15,-24 -62,-14 -73,-12c-11,2 -203,186 -202,184z");
  /* 此项配置可以使元素的方向一直保持不变 */
  /* offset-rotate: 0deg; */
  position: absolute;
  /* transform: scale(1.5); */
}

.circle-1 {
  width: 30px;
  height: 30px;
  /* 动画名 持续时间 快慢速度 延迟执行 次数  */
  animation: load 4s cubic-bezier(0.54,0.11,0.33,0.99) 0.1s infinite;
  /* 动画结束后元素显示的样式,forwards表示保持最终的样式,none表示重新回到初始样式 */
  /* animation-fill-mode: forwards; */
  z-index: 99;
}

@keyframes load {
  from {
    offset-distance: 0;
  }

  to {
    offset-distance: 100%;
  }
}

offset-path复杂路径生成工具:svg生成工具
设置右边的宽为350
使用左边的钢笔工具画出路径
点击视图=>源代码

找到如下图绘制的路径数据,复制到offset-path的代码中即可.

动画速度调节工具:速度调节

横轴理解为时间,斜率理解为速度,调节贝塞尔曲线,图中所示的意思就是:慢=>快=>慢
调节好后,将括号内的数值复制到.circle-1中的animation属性中,预览效果做细微调整.

结论

如果想让速度有更多的变化那么只能把路径和速度都分段来实现.