css金币动画_【续篇】2分钟做出金币飞舞到钱袋的效果

大家都知道，之前大部分的路径类动画都是采用 SVG 的方式来实现

那第一个问题来了：

复杂一些的线条动画如何生成呢？比如一些公司常用自己的吉祥物来作为 loading 背景图。

有经验的同学应该会知道，可以通过工具(PS 或者 AI)导出 SVG 路径。

codePen 上有很多复杂的 path 动画，感兴趣可以搜索一下

今天我们其实要解决的是很多养成类应用中特别核心的一个动画交互：

金币飞舞到宝箱(钱袋)里面。

如何实现这一个功能呢？

第一：需要金币，而且是多个

这个相对简单，要么循环生成，要么固定个数，但是为了金币飞舞的饱满度，建议金币数量在 8 个以上。

第二：需要飞行轨迹的起点和终点，进行途中飞行轨迹点坐标的设计

一般终点的坐标都是固定的，起点会不太一样，比如农场类应用，大部分以当前收获土地的坐标为起始点。

那如何高效地绘制出途中点？

这个问题其实是比较有思考意义的，前面我们为了铺垫，也提到了才有 SVG 来绘制复制 path，也提到了可以通过工具导出 path，到了这里如何处理呢？

先介绍几个工具：

1、http://jeremyckahn.github.io/stylie/

这个比较有名，而且操作比较简单，只是不能直接画出一个曲线，然后去选择点，只能去一个一个地选点，然后连接起来

右侧会出现对应的坐标(其实这个是可以拖拽的，可以随意摆放到你喜欢的位置)：

2、https://coderjunb.github.io/CSS-Path/

确实易用性更好一些，可以画出曲线，并调节角度，最终也是直接拿导出的帧动画代码即可

如下代码：

前面整理了一下，大体结构大家应该很容易看懂，没有难度，关键是帧动画对应的这种饱和度是手写无法达到的。

1、动画名：coordpath-86fe955f73d09d94be41542a76acb705

2、从 0.0000% 到 100.0000%

.coordpath-86fe955f73d09d94be41542a76acb705{
      left:187px;  top:552px;  -webkit-animation:coordpath-86fe955f73d09d94be41542a76acb705 2000ms steps(1) 0ms infinite normal;}@-webkit-keyframes coordpath-86fe955f73d09d94be41542a76acb705{
    0.0000%{
      -webkit-transform:translate(0px,0px)   translate(-50%,-50%)}0.7143%{
      -webkit-transform:translate(-0.004303935860065167px,-0.03950072886300404px) translate(-50%,-50%)}1.4286%{
      -webkit-transform:translate(-0.016676384839598768px,-0.15743440233222827px) translate(-50%,-50%)}2.1429%{
      -webkit-transform:translate(-0.036308309037934805px,-0.35294825072890035px) translate(-50%,-50%)}2.8571%{
    -webkit-transform:translate(-0.062390670553980954px,-0.6251895043732247px) translate(-50%,-50%)}3.5714%{
    -webkit-transform:translate(-0.09411443148684384px,-0.9733053935859743px) translate(-50%,-50%)}4.2857%{
    -webkit-transform:translate(-0.13067055393582905px,-1.3964431486880358px) translate(-50%,-50%)}5.0000%{
    -webkit-transform:translate(-0.17125000000001478px,-1.8937500000000682px) translate(-50%,-50%)}5.7143%{
    -webkit-transform:translate(-0.2150437317784224px,-2.4643731778426172px) translate(-50%,-50%)}6.4286%{
    -webkit-transform:translate(-0.2612427113702722px,-3.1074599125365694px) translate(-50%,-50%)}7.1429%{
    -webkit-transform:translate(-0.3090379008745856px,-3.822157434402243px) translate(-50%,-50%)}7.8571%{
    -webkit-transform:translate(-0.3576202623906113px,-4.607612973760979px) translate(-50%,-50%)}8.5714%{
    -webkit-transform:translate(-0.4061807580174843px,-5.462973760933096px)