利用TweenMax針對HTML頁面製作動畫 – jQuery Mobile篇

在Dreamweaver5.5之後多了一個jQuery Mobile面板,主要是利用jQuery來製作一些行動裝置的元素,接下來這篇文章就利用Dreamweaver提供的幾項元素加上TweenMax來製作手機動畫頁面。

因為這篇文章應用到的動畫功能,依舊和前兩篇差不多,所以就直接看範例吧!首先,第一個範例是利用「jQuery 翻轉切換開關」來控制動畫的播放,除了可以從前面的連結看到這個範例之外,也因為這是特別針對行動裝置所設計的案例,大家也可以在手機輸入「goo.gl/LofiK」網址來觀賞,下面是本範例整個網頁的程式碼:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalabke=no, width=device-width" />
    <title>貓咪欣賞</title>
    <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">
    <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    <script src="src/minified/TweenMax.min.js"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #photo {
            text-align: center;
        }

        #selector {
            text-align: center;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <script language="javascript">
        var playNo = 1; /* 定義目前播放張數變數 */
        function photoPlay() {
            var controler = document.getElementById("flipswitch");
            if (controler.options[controler.selectedIndex].value == "on") {
                clock = setInterval(timer, 5000);
            } else {
                clearInterval(clock);
            } /* 設定每五秒執行timer函數 */
            function timer() {
                var pic = document.getElementById("photo"); /* 利用pic紀錄畫面中ID為photo的元素 */
                playNo++; /* 增加張數 */
                if (playNo > 19) {
                    playNo = 1;
                } /* 設定超過圖片張數後從頭播放 */
                TweenMax.to(pic, 1, {
                    css: {
                        alpha: 0
                    },
                    ease: Expo.easeIn,
                    onComplete: function () {
                        pic.innerHTML = "<img src=photo/photo" + playNo + ".jpg width=300 height=200>";
                        TweenMax.to(pic, 1, {
                            css: {
                                alpha: 1
                            },
                            ease: Expo.easeOut
                        });
                    }
                });
            }
        }
    </script>
</head>
<body onLoad="photoPlay()">
    <div data-role="page" id="page">
        <div data-role="header">
            <h1>貓咪欣賞</h1>
        </div>
        <div data-role="content">
            <div id="photo"><img src="photo/photo1.jpg"></div>
            <div data-role="fieldcontain" id="selector"> <select name="flipswitch" id="flipswitch"
                    onChange="photoPlay()" data-role="slider">
                    <option value="off">關閉</option>
                    <option value="on" selected>開啟</option>
                </select> </div>
        </div>
        <div data-role="footer">
            <h4>©2012 Copyright Stanley Ma Cloud Research.</h4>
        </div>
    </div>
</body>
</html>

接下來的第二個範例在程式上面會比較複雜,因為想要加強上一個範例的互動性,所以在同樣的範例上面增加「上一張」、「下一張」與「播放控制」的功能,可在手機輸入「goo.gl/GyAVt」網址觀賞,如果你仔細看的話,會發現這個範例中呼叫網頁元素的語法有改變,其實既然是利用jQuery來製作,本來就可以利用jQuery所提供呼叫網頁元素的指令來製作會比較方便,總之是因為有了下面這行語法,才可以利用這種方式來呼叫的喔!

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>

下面是本範例整個網頁的程式碼:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalabke=no, width=device-width" />
    <title>貓咪欣賞</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #photo {
            text-align: center;
        }

        #selector {
            text-align: center;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        #count {
            text-align: center;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
            font-size: 12px;
        }
    </style>
    <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">
    <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        var playing = 1; /* 偵測目前是否為播放中的變數(1為播放0為暫停) */
        var playNo = 1; /* 定義目前播放張數變數 */ /* 執行計時器 */
        function photoPlay() {
            clock = setInterval(timer, 5000);
        } /* 計時執行函數 */
        function timer() {
            playNo++; /* 增加張數 */
            checkPlayNo() /* 呼叫檢查張數是否有誤的函數 */ photoSlide(); /* 呼叫動畫切換照片的函數 */
        } /* 動畫切換照片的函數 */
        function photoSlide() {
            var pic = $("#photo"); /* 利用pic紀錄畫面中ID為photo的元素 */
            TweenMax.to(pic, 0.5, {
                css: {
                    alpha: 0
                },
                ease: Expo.easeIn,
                onComplete: function () {
                    pic.html("<img src=photo/photo" + playNo + ".jpg width=300 height=200>");
                    TweenMax.to(pic, 1, {
                        css: {
                            alpha: 1
                        },
                        ease: Expo.easeOut
                    });
                }
            });
            $("#count").html(playNo + " / 19"); /* 更換顯示張數的文字 */
        } /* 檢查張數是否有誤的函數 */
        function checkPlayNo() {
            if (playNo > 19) {
                playNo = 1;
            } else if (playNo < 1) {
                playNo = 19;
            }
        } /* 前往上一張的函數 */
        function prevFn() {
            clearInterval(clock);
            playNo--;
            checkPlayNo() photoSlide();
            photoPlay();
        } /* 前往下一張的函數 */
        function nextFn() {
            clearInterval(clock);
            playNo++;
            checkPlayNo() photoSlide();
            photoPlay();
        } /* 播放控制函數 */
        function controlFn() {
            if (playing == 1) {
                playing = 0;
                $("#controlBtn").html("播放") clearInterval(clock);
            } else if (playing == 0) {
                playing = 1;
                $("#controlBtn").html("暫停") clock = setInterval(timer, 5000);
            }
        }
    </script>
</head>
<body onLoad="photoPlay()">
    <div data-role="page" id="page">
        <div data-role="header">
            <h1>貓咪欣賞</h1>
        </div>
        <div data-role="content">
            <div id="photo"><img src="photo/photo1.jpg"></div>
            <div data-role="controlgroup" data-type="horizontal" id="selector"><a href="#" data-role="button"
                    id="prevBtn" onClick="prevFn()">上一張</a><a href="#" data-role="button" onClick="controlFn()"><label
                        id="controlBtn">暫停</label></a><a href="#" data-role="button" onClick="nextFn()">下一張</a></div>
            <div id="count">1 / 19</div>
        </div>
        <div data-role="footer">
            <h4>©2012 Copyright Stanley Ma Cloud Research.</h4>
        </div>
    </div>
</body>
</html>

希望大家看過這幾篇「利用TweenMax針對HTML頁面製作動畫」的範例之後,可以更順利的創作出自己的網頁。

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。