edge animate從入門到放棄


一、什么是edge animate

 edge animate這是一款方便網頁設計師和前端工程師實現動畫交互的一款工具,雖然是adobe出品的,但是屬於Flash和H5時代的過渡產物,這一款產品在2015年的時候就被adobe公司棄用,同時也宣布了這一款產品的失敗。但是雖然是失敗產品,但是我們還是要去學習一下這一款產品,因為有一些矢量動畫還是可以幫助我們完成的,這也就是我目前認為的這一款產品存在的一個意義。

 

二、edge animate的優勢和劣勢

 劣勢:

1、生產出來的代碼不好維護:

由於里面的代碼是通過edge animate自動生成的代碼,如果你是熟悉代碼的(程序員)那么你會發現就是要修改里面的代碼會很難,所以要就導致了很多的bug不好修改

2、兼容性差:

在通過edge animate生成的代碼中,默認是沒有辦法兼容手機的,但是如果你想要兼容手機的話,你一方面要在publish(發布后的文件夾)中添加meta頭部代碼,另外一方面你還要添加相應的CSS代碼(至少你每次都要在publish中的html文件添加overflow:hidden,默認的edge animate生成的代碼是overflow:scroll,這樣在手機中會出現橫向滾動條,不適合手機的屏幕適應)。但是除了添加CSS麻煩,后期你可能會導致一個問題就是每次你修改一下代碼,然后發布新的版本,你都要重新再新的版本中加上CSS和meta代碼

3、軟件本身不穩定

軟件在使用的過程中偶爾會出現奔潰的問題

優勢:

1、矢量動畫:

edge animate能夠生成矢量動畫(也就是路徑動畫,指的是物體的不規則運動的動畫),這一種是代碼所不能夠實現的

2、方便快捷的實現動畫

由於這塊動畫的方便快捷性,所以在一些不需要維護的項目中(一次性項目)我們可以采用這款軟件來快速的制作簡單的頁面動畫

 

三、edge animate與animate cc的區別

這兩款軟件的區別如下:

1、動畫的類型不同

edge animate生成的是DOM節點動畫,也就是相當於你在外部使用animate.css生成的動畫類型相似。而animate cc生成的是canvas動畫,除此之外,animate cc還可以生成webgl動畫

2、目前的生態不同

edge animate由於目前作為你一款adobe的廢棄產品,生態圈當然不能夠與animate cc同日而語

 

四、一個簡單的手機顯示的動畫交互案例

PS:由於錄制軟件的原因導致了左划的感應不是很靈敏

這里面的演員文字就充分的體現了這種工具實現矢量動畫的優勢,這一種運動的方式是可以自定義的,也就是說是直接使用類庫,框架等方法無法達到的一種運動效果。

代碼就不提供了,里面的操作工具很是容易,學習完了本文,你就可以明白大概要怎樣做了,然后自己找一下PSD圖琢磨一下就可以實現了

 

五、edge animate開篇

 首先介紹一下edge animate的界面

其中以下幾個面板我們重點說一下:

1、屬性面板:我們可以理解該面板為為指定的元素添加CSS修飾

2、資源面板:主要是顯示一些視頻,圖片,音頻等資源文件,里面的文件除了可以在軟件中添加進去,還可以自己手動在當前的文件夾中創建一個對應的文件夾名稱來實現,添加資源。例如:我們可以在這個文件夾中創建一個images文件夾用來存放圖片,那么在資源面板中的圖像中我們就可以看到圖片已經自動添加上去了

3、時間軸:時間軸的用法和flash中的用法是一致的,主要是就是通過連續的播放每一幀的圖像從而來生成動畫,具體的用法詳見flash

 現在基礎的介紹已經說完了,接下來我們就來通過簡單的實際案例來學習一下怎樣制作基礎的動畫

案例一:制作勻速直線運動的小球

 首先我們選擇工具箱中的橢圓工具並且按住shift,然后在這個位置點擊一下

 打上一個關鍵幀,接着記得把時間軸上面的如下位置給打上

 接着直接拖動時間軸上面的指針到指定的時間位置上面去,重新設置一個屬性面板上面的X軸坐標,就可以看到效果了,因為開啟這兩個按鈕的意思就是使用補間動畫的方式來渲染中間的幀。所以你不必關心其中的運動狀態是怎樣的。

 

案例二:小球的勻加速直線運動

 相比於第一個案例,第二個案例只需要調整一下運動的效果既可以了,選擇

 

這樣效果就實現了,勻減速和勻加速的操作方式是一樣的就不重復了。

 

案例三:矢量動畫的繪制(自定義運動路徑)

這個我們只需要把屬性面板上面的X,Y運動修改成為運動路徑就可以了。例子:

案例四:添加畫面上物體的相應事件

添加腳本事件和挺簡單的,我們只需要右擊選擇相應的動作即可,也就是右鍵列表的最下一個按鈕,添加完成之后的效果如下:

PS:事件要在瀏覽器中運行edge animate是不支持腳本的運行效果查看的。

 

上面的效果就是分別在兩個按鈕上面添加一個click事件。來觸發整體的停止與開始的。

案例五:添加畫面腳本

添加畫面的腳本只需要在時間軸的如下位置點擊插入觸發器

那么當畫面走到指定的位置的時候就會觸發相應的觸發器上面的動作

例如指定走到3s的時候動畫就停止了,可以這樣做

 

 

除此之外我們還可以搭配上標簽來進行進行腳本控制

這個我們只需要在如下的位置中點擊一下就可以添加一個新的標簽了,然后把一些開始和停止的腳本指向到這里就可以了

案例就不寫了。

 

六、總結

 經過了兩個星期的對edge animate和animate cc的學習,發現現在的這一類工具都是有一點多余,除了開發的時間和效率相對可以快一些,但是在維護和后期的成本都會變得比較高。所以有代碼基礎的同學還是直接擼代碼吧,這些東西現在想想也就是只能用在一些不維護的項目中去快速的添加特效而已


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM