演示文件：http://blog.258754.cn/2016/svg/test_svg2.html

注意看运动轨迹与“老鹰”的交汇处的表现。

---

 演示文件2：http://blog.258754.cn/2016/svg/test_svg3.html

主要看形变动画。

---

我的目标就是用Svg来替代以前的FLASH，那么遮罩、矢量路径动画、形变动画这几大要素，是不可缺的。在这个演示中，可以看到前两者的解决方法。

1、遮罩就用SVG自带的clipPath标签解决。（半透明遮罩没找到办法）

2、矢量路径动画相当于FLASH的引导线动画，我用了GSAP的pathDataToBezier插件将线条变为路径 ，然后用tweenMax来实现bezier路径运动。

3、至于形变动画，用了GSAP的morphSVG，见演示2的那个音乐线条的变化 。

 

至此，几个FLASH的重点功能，都已经由SVG完美实现。

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: