第七章 svg动画
2019-08-13 本文已影响0人
DOGirl
image.png
image.png
image.png
image.png
image.png
image.png
image.png
如果不加viewbox就没有固定的中心点旋转,加上去后就会绕着中心点转 image.png
![image.png](https://img.haomeiwen.com/i16529401/
f8a58e0d91cf23bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
使用脚本动画做的力导向图,突然感觉动画也好难啊
image.png
image.png
image.png
image.png
image.png
水平变化的动画
image.png
image.png
如果不加viewbox就没有固定的中心点旋转,加上去后就会绕着中心点转 image.png
![image.png](https://img.haomeiwen.com/i16529401/
f8a58e0d91cf23bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
svg轨迹动画
image.png
让矩形沿着弧线运动---画出矩形和弧线
image.png
image.png
image.png
image.png
svg力导向图
image.png
突然感觉回到了高中时代
image.png
image.png
使用脚本动画做的力导向图,突然感觉动画也好难啊
image.png
最终实现效果的地址:
https://codepen.io/chengzc8840/pen/XXNQdq