05 | SVGの点击显示样式

135编辑器新春祝福点击出现样式 ID:91908

01不可以恢复样式

点击后不可复原

这个样式读者点击查看后就失去效果，不能复原。

所以，每个读者只能点击一次。

而且，如果在编辑过程中不小心点击了，那么这个过程不可逆。只能删除，重新添加样式，非常不方便。

 <animatetransform attributename="transform" type="translate" begin="click" dur="0.5s" values="0;500" fill="freeze" additive="sum"></animatetransform>
                     

触发方式：click（点击）
动画耗时：0.5秒
位移：从0->500px，
动画结束后保持状态

所以，当点击后，文字会向右移动500px，就会看到下层文字，依次点击显示，最后会一直小时底层文字。

02 自动恢复样式

如果读者完整点击后，动画能复原，这样就可以多次点击，多次互动。

所以，在fill='freeze'的状态下，values属性最后一组值和起始值一致，即都为0。

共点击5次，读者的速度按5s计算，等待时间设置为5s（时间自己定）。也就是读者开始点击第一下，10s后动画复原。

dur="10s"

values属性设置10个值"0;500;500;500;500;500;500;500;500;0'，在10s内动画过程中按顺序应用这些值。
（如果值的数量越多，在时间固定的情况下，那么值的切换速度越快。)

修改后代码

  <animatetransform attributename="transform" type="translate" begin="click" dur="10s" values="0;500;500;500;500;500;500;500;500;500;0" fill="freeze" additive="sum"></animatetransform>

10s后自动复原