edge animate从入门到放弃

1、什么是edge animate

 edge animate这是一款方便网页设计师和前端工程师实现动画交互的一款工具，虽然是adobe出品的，可是属于Flash和H5时代的过渡产物，这一款产品在2015年的时候就被adobe公司弃用，同时也宣布了这一款产品的失败。可是虽然是失败产品，可是咱们仍是要去学习一下这一款产品，由于有一些矢量动画仍是能够帮助咱们完成的，这也就是我目前认为的这一款产品存在的一个意义。

 

2、edge animate的优点和劣势

 劣势：

一、生产出来的代码很差维护：

因为里面的代码是经过edge animate自动生成的代码，若是你是熟悉代码的（程序员）那么你会发现就是要修改里面的代码会很难，因此要就致使了不少的bug很差修改

二、兼容性差：

在经过edge animate生成的代码中，默认是没有办法兼容手机的，可是若是你想要兼容手机的话，你一方面要在publish（发布后的文件夹）中添加meta头部代码，另一方面你还要添加相应的CSS代码（至少你每次都要在publish中的html文件添加overflow:hidden,默认的edge animate生成的代码是overflow:scroll，这样在手机中会出现横向滚动条，不适合手机的屏幕适应）。可是除了添加CSS麻烦，后期你可能会致使一个问题就是每次你修改一下代码，而后发布新的版本，你都要从新再新的版本中加上CSS和meta代码

三、软件自己不稳定

软件在使用的过程当中偶尔会出现奔溃的问题

优点：

一、矢量动画：

edge animate可以生成矢量动画（也就是路径动画，指的是物体的不规则运动的动画），这一种是代码所不可以实现的

二、方便快捷的实现动画

因为这块动画的方便快捷性，因此在一些不须要维护的项目中（一次性项目）咱们能够采用这款软件来快速的制做简单的页面动画

 

3、edge animate与animate cc的区别

这两款软件的区别以下：

一、动画的类型不一样

edge animate生成的是DOM节点动画，也就是至关于你在外部使用animate.css生成的动画类型类似。而animate cc生成的是canvas动画，除此以外，animate cc还能够生成webgl动画

二、目前的生态不一样

edge animate因为目前做为你一款adobe的废弃产品，生态圈固然不可以与animate cc同日而语

 

4、一个简单的手机显示的动画交互案例

PS:因为录制软件的缘由致使了左划的感应不是很灵敏

这里面的演员文字就充分的体现了这种工具实现矢量动画的优点，这一种运动的方式是能够自定义的，也就是说是直接使用类库，框架等方法没法达到的一种运动效果。

代码就不提供了，里面的操做工具非常容易，学习完了本文，你就能够明白大概要怎样作了，而后本身找一下PSD图琢磨一下就能够实现了

 

5、edge animate开篇

 首先介绍一下edge animate的界面

其中如下几个面板咱们重点说一下：

一、属性面板：咱们能够理解该面板为为指定的元素添加CSS修饰

二、资源面板：主要是显示一些视频，图片，音频等资源文件，里面的文件除了能够在软件中添加进去，还能够本身手动在当前的文件夹中建立一个对应的文件夹名称来实现，添加资源。例如：咱们能够在这个文件夹中建立一个images文件夹用来存放图片，那么在资源面板中的图像中咱们就能够看到图片已经自动添加上去了

三、时间轴：时间轴的用法和flash中的用法是一致的，主要是就是经过连续的播放每一帧的图像从而来生成动画，具体的用法详见flash

 如今基础的介绍已经说完了，接下来咱们就来经过简单的实际案例来学习一下怎样制做基础的动画

案例一：制做匀速直线运动的小球

 首先咱们选择工具箱中的椭圆工具而且按住shift，而后在这个位置点击一下

 打上一个关键帧，接着记得把时间轴上面的以下位置给打上

 接着直接拖动时间轴上面的指针到指定的时间位置上面去，从新设置一个属性面板上面的X轴坐标，就能够看到效果了，由于开启这两个按钮的意思就是使用补间动画的方式来渲染中间的帧。因此你没必要关心其中的运动状态是怎样的。

 

案例二：小球的匀加速直线运动

 相比于第一个案例，第二个案例只须要调整一下运动的效果既能够了，选择

 

这样效果就实现了，匀减速和匀加速的操做方式是同样的就不重复了。

 

案例三：矢量动画的绘制（自定义运动路径）

这个咱们只须要把属性面板上面的X,Y运动修改为为运动路径就能够了。例子：

案例四：添加画面上物体的相应事件

添加脚本事件和挺简单的，咱们只须要右击选择相应的动做便可，也就是右键列表的最下一个按钮，添加完成以后的效果以下：

PS:事件要在浏览器中运行edge animate是不支持脚本的运行效果查看的。

 

上面的效果就是分别在两个按钮上面添加一个click事件。来触发总体的中止与开始的。

案例五：添加画面脚本

添加画面的脚本只须要在时间轴的以下位置点击插入触发器

那么当画面走到指定的位置的时候就会触发相应的触发器上面的动做

例如指定走到3s的时候动画就中止了，能够这样作

 

 

除此以外咱们还能够搭配上标签来进行进行脚本控制

这个咱们只须要在以下的位置中点击一下就能够添加一个新的标签了，而后把一些开始和中止的脚本指向到这里就能够了

案例就不写了。

 

6、总结

 通过了两个星期的对edge animate和animate cc的学习，发现如今的这一类工具都是有一点多余，除了开发的时间和效率相对能够快一些，可是在维护和后期的成本都会变得比较高。因此有代码基础的同窗仍是直接撸代码吧，这些东西如今想一想也就是只能用在一些不维护的项目中去快速的添加特效而已