透過前面三課的學習，我們已經掌握了製作動畫的方法，儘管做出來的動畫還十分簡陋。還記得學習基礎部分的時候，曾經在很長一段時間內接觸的都是單一的色塊嗎？那並未影響大家現在的水平發揮。同樣的，很快我們就要開始製作較為精細的動畫了。但在這一切到來之前，大家還必須學習一些必備的設計思考。所謂設計思維就是指在製作動畫前的規劃考慮，這規劃包含很多面向。
首先講一下圖層的組織，最終的成品動畫是不包含圖層資訊的。這裡所說的圖層僅指製作中。對於利用圖層位置變化來製作的動畫而言，有一個顯而易見的問題就是必須合理安排圖層，因為移動的最小單位是圖層，因此如果需要製作多個運動軌跡各異的物體時，它們就必須分佈在不同的圖層中。也需要事先考慮好移動的距離，影像的尺寸以及擺放的位置需要為移動留下足夠的空間，這是其一。
其二就是考慮好是否會與其他圖層相交，以及相交時候的處理，誰遮蓋誰，也就是圖層的層次安排，如下圖中就列出了3種相交的方式，最左邊的是兩個圖層均為100%時候，綠色覆蓋紅色。另外兩個則顯示了在50%的不透明度下，不同層次造成的不同覆蓋效果。如綠色遮蓋紅色，那麼相交部位就偏綠，反而反之。這都是在正常混合模式下，如果選擇了其他的混合模式如疊加等，就要更加註意層次。
以上說的都是技術問題，現在來說一下劇情方面的問題。一般來說，如果一個物體始終都在影像中移動，則無需對其進行交代。但如果物體原本不在畫面中，是後來進入畫面的，或原本在畫面中後來移出了畫面，則需要對物體的出現和消失做一個交代，這個交代就是過渡，讓觀看者有一個比較自然的心理轉變。常見的手法就是讓物體逐漸顯現(也稱淡入)或逐漸消失(也稱淡出)。如下圖所示，示範了在同樣的一個文字移動中，是否採取淡入和淡出處理的效果對比。
可將滑鼠移入到播放區觀看實際的動畫效果，移出播放區將停止播放。透過比較，相信大家都會覺得添加了淡入淡出處理的效果更好。
除此之外，循環設定也是屬於情節方面的問題，這個我們其實在之前有提到過，就是有些場合下可以使用無限循環的動畫，而有些場合則不適合。例如一個欄目標題文字淡入的動畫，如果不斷地重複，就會使得網頁整體看起來顯得很亂，會讓觀看者感到不舒服。此時最適合的做法就是播放一次，這樣既可以展現效果，又不會影響網頁整體。設定為2到3次的循環一般也可接受，再多就不好了。
不過只播放一次的動畫最好是放在網頁的上部，這樣一進入網頁就可以看到。如果放在網頁底部，可能觀看者閱讀到該處時動畫已經播放完了。那樣的話就製作動畫就沒有意義了，不如就用靜態的圖片代替。
要注意的是，GIF動畫圖片每調用一次就會重新播放。如果有些人已經具備了網頁製作的知識，可以利用這個性質在網頁製作軟體中設定對應的動作。例如大家在這裡移動滑鼠觀看範例的動畫就是如此。每次移入後動畫總是從頭開始播放。這樣即便是只播放一次的動畫，也可以令它在網頁中多次播放。沒有網頁製作知識也不用擔心，這並不影響我們後面的動畫學習。 。
對於看起來很不錯的淡入淡出效果而言，有一個重要的問題需要考慮，那就是瀏覽器可以被設定為禁止播放動畫。此時動畫只會顯示其第1格時候的畫面。那麼類似上面的「悄然來去」的動畫在網頁中將是一片空白，因為其第1格本來就是空白的。這就容易引起觀看者的誤會。
也許大家會覺得沒有人會刻意關閉動畫顯示，但既然不能排除這個因素，我們就需要從最廣泛的層面去考慮訪客的情況。在網頁的整體版面中，應避免在重要的文字或指示部位使用淡入淡出動畫。將動畫放入網頁後，最好先自己手動關閉動畫播放檢查是否有問題。除了關閉動畫播放以外，在頁面顯示時如果訪客按下ESC鍵也會中斷動畫播放，畫面將停留在中斷的那一刻。
如要同時照顧到禁止和允許播放動畫的訪問者，在兩者之間取得平衡點，那麼在動畫的製作上就應該遵循一個原則，那就是主體部分不動，修飾部分作動畫。如下圖所示，文字本身不做動畫，只是在文字的邊緣製作了動畫效果。這樣即使靜止動畫播放或播放時中斷，也不會影響觀看者對內容的理解。
不過，只要保證能在任何時候準確地反映內容，避免文字的消失或過於劇烈的變形，主體文字也是可以動的。
本課所講述的內容和製作動畫的技術並不相關，不過在大家要將動畫應用於網頁中的時候，就要從大方面來考慮動畫的製作及表現方法。單純學習這些內容有些枯燥，大家留下印象就好，在以後的製作中會有應用到的時候。
這次的作業是將「悄悄來去」那個動畫製作出來。另外將下面兩個派生的動畫也製作出來。
下一節我們介紹動畫中淡入淡出的表現方式。