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的學習，發現如今的這一類工具都是有一點多餘，除了開發的時間和效率相對能夠快一些，可是在維護和後期的成本都會變得比較高。因此有代碼基礎的同窗仍是直接擼代碼吧，這些東西如今想一想也就是隻能用在一些不維護的項目中去快速的添加特效而已