Tween.js学習(2)

by SnakeFox

HTML

<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
<div id="container">
    <form id="form">
        <label>Twitter ID : </label>
        <input type="text" id="twitterID" name="twitterID" placeholder="TwitterIDを入力してください" />
        <input type="submit" id="submitBtn" name="submitBtn" value="送信" />
    </form>
    <div id="textContainer"></div>
</div>

CSS

#container {
    font-size: 14px;
    color: #ff0000;
    background: #fff100;
    height: 500px;
    margin:0 auto;
    text-align: center;
    vertical-align: baseline;
    overflow: hidden;
}

#form {
    padding: 10px;
}

#twitterID {
    font-size: 14px;
    padding: 10px 5px;
    border: 0;
    width: 14em;
    color: #ff0000;  
}

#submitBtn {
    font-size: 14px;
    background: #ff0000;
    padding: 10px;
    color: #ffffff;
    border: 0;
    cursor: pointer;
}

#textContainer {
    color: #ff0000;
    font-size: 100px;
    width: 90%;
    height: 400px;
    margin: 30px auto;
    position: relative;
}

JavaScript

(function($) {
    var data, dataLen, textContainer, dataIndex, currentTarget;
        
    $(document).ready( function() {
        textContainer = $( "#textContainer" );
        $("#submitBtn").click( function() {
            var twitterID = $("#twitterID").val();
            if( twitterID !== "" ) {
                $.ajax( {
                    type: "GET",
                    url: "http://api.twitter.com/1/statuses/user_timeline.json?id=" + twitterID,
                    dataType : "jsonp",
                    success: function( json ) {
                        data = json;
                        dataLen = data.length;
                        
                        if( typeof currentTarget !== "undefined" ) {
                            Tween.removeTweens( currentTarget );
                        }
                        
                        addText( 0 );
                    }
                } );
            }
            return false;
        } );
        
    } );
    
    function addText( n ) {
        dataIndex = n >= dataLen ? 0 : n;
        
        var elm, tween, t,
            i = 0,
            str = data[ dataIndex ].text,
            len = str.length,
            fontSize = 80;
        
        if( len > 100 ) {
            fontSize = 50;
        } else if( len > 70 ) {
            fontSize = 60;
        } else if( len > 40 ) {
            fontSize = 70;
        }
        
        textContainer.children().remove();
        
        for( ; i < len; i++ ) {
            t = str.substr( i, 1 );
            textContainer.append( "<span>" + t + "</span>" );
            elm = $("span", textContainer)[i];
            elm.style.position = "relative";
            elm.style.top = "-1000px";
            elm.style.left = "0px";
            elm.style.float = "left";
            elm.style.fontSize = fontSize + "px";
            tween = Tween.get( elm.style , { loop : false, css : true } )
                            .wait( 100 * i)
                     ...