如何优雅的用Animate CC制作SVG交互动画

最近Lottie又借助阿里的犸良火了一把,其实可交互的svg方案有很多,lottie作为一个跨平台的解决方案确实是个不错的选择,但是如果只是做个简单的小动画,其实Flash(Animate CC)完全可以胜任,而且做起来还很简单。

插件

要在Animate CC里输出svg,可以安装Flash2SVGSVGA等插件,若还想在软件里边做动画边调试代码,那就应该选择SnapSVGAnimator了,不用在意那句“no longer actively supported”,由于插件已经完成了将内容转换为svg且导入snap.svg进行控制这个操作,所以更新也只是修复bug而已,一般不作死的话不会有什么大bug。

安装插件

自从步入Creative Cloud时代,Adobe的插件管理就显得极度混乱,经常出现无法安装的情况,以至于官方也懒得维护了,直接推荐第三方的插件管理工具,而这些工具也是时灵时不灵,能不能装上完全听天由命,以下是可选工具:

个人推荐第一个,点击Install然后选择zxp安装包即可,哪怕软件没出现在列表里好像也能安装成功,而第二个是Adobe官方推荐的,成功率在我这里只有20%……命令行工具只能算是最后的抢救了。

案例

正好要做一只猫趴在登录窗口里,用户输入账户名时,小猫的眼睛会盯着光标移动,用户输入密码时,小猫会用手捂住眼睛,而小猫的尾巴则会一直甩一直甩~

小趴猫

小猫盯着

小猫捂脸

只需要把关键动作的动画做在元件内(影片剪辑/MovieClip),然后用代码控制帧的跳转即可,动画制作过程就不说了,懂的自然懂,不懂的可以搜索Flash动画基础教程,由于An只是Flash换了个名字的马甲,所以并没有什么Animate动画基础教程,都是炒Flash的冷饭!

代码

为小猫的眼睛添加实例名:eye1eye2
为小猫的小手添加实例名:hand1hand2
控制代码如下:

var root = this;
var eye1 = root.eye1;
var eye2 = root.eye2;
var hand1 = root.hand1;
var hand2 = root.hand2;

root.stop();
window.cat = {
	lookat: function (step) {
		if (step > 0 && step < 100) {
			eye1.gotoAndStop(step);
			eye2.gotoAndStop(step);
		}
	},
	watching: function (flag) {
		if (flag) {
			hand1.gotoAndPlay(16);
			hand2.gotoAndPlay(16);
		} else {
			hand1.gotoAndPlay(2);
			hand2.gotoAndPlay(2);
		}
	}
};

这里把小猫cat挂载到全局变量window上,前端小伙伴只需要调用cat.lookat(N);就能控制小猫看哪里,而调用cat.watching(false);小猫就会捂眼,简单粗暴省时省力。