設計師也能上手的 JavaScript 動畫設計

摘要

  • 看看 javascript 的動畫
  • javascript Q & A
  • 從 jQuery 開始做動畫
  • Velocity.js  10 秒讓 jQuery 的動畫效率提升 20 倍！
  • 連 google 都說厲害的 GSAP
  • 開始用 GSAP 做動畫
  • JS 動畫應用實例分享
  • 延申學習

看看 javascript 的動畫

摘要

  • 看看 javascript 的動畫
  • javascript Q & A
  • 從 jQuery 開始做動畫
  • Velocity.js  10 秒讓 jQuery 的動畫效率提升 20 倍！
  • 連 google 都說厲害的 GSAP
  • 開始用 GSAP 做動畫
  • JS 動畫應用實例分享
  • 延申學習

javascript Q & A

Q: javascript 是什麼？

A: 他是流覽器專用的 腳本(script)語言。

因為當時 java 很紅，所以趕流行叫 javascript

Q: javascript 能做什麼？

A: 他可以偵測網頁上發生的事。

他可以控制網頁上的所有元件。

 

所以我們可以利用它，製作動畫和互動。

Q: js 和 jQuery的關係是？

A: jQuery 是 js 的函式庫

讓設計師也可以輕鬆的使用 js。

Q: js 動畫和 css 動畫差在哪？

效能：
CSS 動畫的效能比 jQuery 1 和 2 好 ( 3 不確定)

Velocity 和 GSAP​ 這兩套 js 涵式庫，效能比 CSS 動畫更優秀。

 

用途：

css 適合處理簡單的動畫效果，js 可以再做更進一步的處理。兩者可以互相搭配。

 

關於效能的參考文章

Q: 沒程式基礎怎麼學 js？

A: 網頁設計師熟悉 html tag，熟 css，這些都是基礎。甚至比一般不熟css的工程師更有優勢。

摘要

  • 看看 javascript 的動畫
  • javascript Q & A
  • 從 jQuery 開始做動畫
  • Velocity.js  10 秒讓 jQuery 的動畫效率提升 20 倍！
  • 連 google 都說厲害的 GSAP
  • 開始用 GSAP 做動畫
  • JS 動畫應用實例分享
  • 延申學習

從 jQuery 開始做動畫

範例檔在資料夾「jQuery sample」
  • Step1. 建立執行程式的環境
    • 3個步驟就可以開始寫程式
  • Step2. 讓東西消失吧~
    • 選取元件就像css一樣簡單！
    • 一個指令就可以完成動畫
  • step3. 使用 animate 做動畫
    • 使用 css 的屬性來做動畫~
  • Step4. 了解事件處理器，你就知道怎麼實際應用
    • 先從理解變數開始
    • 一張圖看懂事件處理器
    • 7 種事件處理的應用，簡單學會 jQuery

先從理解變數開始

我希望拿其中一個盒子來放蘋果。

但我要在盒子上寫個名子，以後我才找得到。

宣告變數的寫法

var appleBox = $(".apple");

弱型別的 js ，會依照內容改變變數屬性

Object

Object

var boxHeight = 100;

boxHeight = "100px";

給他數字的時候，變數型態就是數字

給他字串，變數型態就變成字串

（字串就是，任何用引號包起來的文字或數字）

（數字沒有單位也沒有引號，能做計算）

 延伸閱讀：w3c school 關於變數的介紹

一張圖看懂事件處理器

使用者正在做什麼事

流覽器無時無刻偷聽

我們寫好 js 讓流覽器知道，當發生什麼事件時，要做什麼事。

jQuery 事件處理器的寫法

 延伸閱讀：w3c school 的 jQuery 事件列表

效果列表

        $('.btn').click(function () {
            //do something;
        });

        物件.事件(function () {
            //do something;
        });

  $('.btn').click( );

function () {
        //do something;
}

分解

練習作業

  • 自己重寫一次 step1~step4 的範例( js的部份 )
  • step4 的第二個按鈕，不斷互動的話動畫會亂掉。
    請試著解決這個問題。
  • 到這裡練習，把資料顯示在網頁中。

摘要

  • 看看 javascript 的動畫
  • javascript Q & A
  • 從 jQuery 開始做動畫
  • Velocity.js  10 秒讓 jQuery 的動畫效率提升 20 倍！
  • 連 google 都說厲害的 GSAP
  • 開始用 GSAP 做動畫
  • JS 動畫應用實例分享
  • 延申學習

Velocity.js

10 秒讓 jQuery 的動畫效率提升 20 倍！

官網連結

velocity.js 是什麼

  • 他和 jQuery 一樣，是 js 的涵式庫
  • 他是一個輕便強大的動畫引擎
  • 他可以獨立存在，也可以輔助 jQuery
  • 他讓 jQuery 的速度變更快 (jQuery3 不確定)
  • 他支援一些 jQuery 不支援的動畫呈現
  • 他可以輕易的套用在 jQuery 中
範例檔在「jQuery sample/velocity.html」

練習作業

  • 請把 velocity.html 的範例重做一次。
  • 第二個按鈕，不斷互動的話動畫會亂掉。
    請試著解決這個問題。

摘要

  • 看看 javascript 的動畫
  • javascript Q & A
  • 從 jQuery 開始做動畫
  • Velocity.js  10 秒讓 jQuery 的動畫效率提升 20 倍！
  • 連 google 都說厲害的 GSAP
  • 開始用 GSAP 做動畫
  • JS 動畫應用實例分享
  • 延申學習

連 google 都說厲害的

GSAP

(GreenSock Animation Platform)

GSAP 是什麼?

為什麼推薦 GSAP

  • 他可以快速做出複雜的動畫效果。
  • 他向下相容。
  • 他有時間軸概念。
  • 他的線上教學和文件都很完整。

摘要

  • 看看 javascript 的動畫
  • javascript Q & A
  • 從 jQuery 開始做動畫
  • Velocity.js  10 秒讓 jQuery 的動畫效率提升 20 倍！
  • 連 google 都說厲害的 GSAP
  • 開始用 GSAP 做動畫
  • JS 動畫應用實例分享
  • 延申學習

開始用 GSAP 做動畫

摘要

  • GSAP 4大成員 
  • 教學總覽
  • 實際應用需注意的地方
  • 其它官方資源

GSAP 4大成員

教學總覽

實際應用需注意的地方

  • 基本 sample
    • GSAP_Jump_Start_Demos/01_basic_tween_tide.html
  • 實用的 staggerFrom
    • GSAP_Jump_Start_Demos/13_stagger_tide.html
  • timelinelite 的深入研究

(網頁的最下方有一個練習)

其它官方資源

摘要

  • 看看 javascript 的動畫
  • javascript Q & A
  • 從 jQuery 開始做動畫
  • Velocity.js  10 秒讓 jQuery 的動畫效率提升 20 倍！
  • 連 google 都說厲害的 GSAP
  • 開始用 GSAP 做動畫
  • JS 動畫應用實例分享
  • 延申學習

JS 動畫應用實例分享

Velocity

  • 王牌特攻角色的模糊動畫
  • 槍戰北區選拔賽開場

GSAP

  • 突破防線的整體動畫流程
  • 超時空引爆的開場動畫
  • 致命盃的主視覺及選單動畫

摘要

  • 看看 javascript 的動畫
  • javascript Q & A
  • 從 jQuery 開始做動畫
  • Velocity.js  10 秒讓 jQuery 的動畫效率提升 20 倍！
  • 連 google 都說厲害的 GSAP
  • 開始用 GSAP 做動畫
  • JS 動畫應用實例分享
  • 延申學習

延申學習

GSAP

js & jQuery

Made with Slides.com