用SVG替代FLASH的三大要素-遮罩、路径动画、形变

 演示文件:http://contactu.cn/2016/svg/test_svg2.html

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


 演示文件2:http://contactu.cn/2016/svg/test_svg3.html

主要看形变动画。


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

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

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

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

 

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



[本日志由 admin 于 2016-06-13 10:09 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 744
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭