从数组中创建文本动画

Question

我有这段代码，它应该接受一个包含一些单词的数组，并将补间逐个应用于它们，并指定超时。我想我必须把它们做成一个空的电影剪辑，然后用一个带有超时的foreach循环来动画它们，但我迷失在如何准确地做到这一点上。

这就是我的观点：

var array:Array = new Array("word", "is", "here");

var bounce:Function = function(mc:MovieClip):void {
mc.bounce1 = new Tween(mc, "_y", Bounce.easeOut, 35, 75, 1, true);
mc.bounce2 = new Tween(mc, "_xscale", Bounce.easeOut, 0, 400, 4, true);
mc.bounce3 = new Tween(mc, "_yscale", Bounce.easeOut, 0, 400, 4, true);
mc.bounce4 = new Tween(mc, "_alpha", Regular.easeInOut, 100, 0, 2, true);
};
array.forEach(bounce, me);

可能真的需要一些帮助。

Answer 1

我没有CS3，但我使用一个名为Tweener的免费补间库快速创建了一个示例。你可以在here上找到它。

import flash.events.Event;
import flash.display.MovieClip;
import flash.text.TextField;    
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
/* this is a free Tweening library. I don't have flash CS3 but this is analogous to fl.transitions.Tween */

import caurina.transitions.Tweener; 

public class Main extends MovieClip 
{
    public function Main():void 
    {
        if (stage) init();
        else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void 
    {
        removeEventListener(Event.ADDED_TO_STAGE, init);

        /* your array of words */
        var array: Array = new Array("word", "is", "here")

        /*we'll use this to control the position of each word*/
        var x : int = 0

        var delay : Number = 0.0

        for each(var s : String in array)
        {
            var word: TextField = new TextField()
            word.autoSize = TextFieldAutoSize.LEFT

            /* here we can adjust text format */
            word.defaultTextFormat = new TextFormat(null, 75, 0xff0000)

            word.text = s
            word.x = x
            word.y = 75

            /* put the new word into our MovieClip */
            addChild(word)

            /* apply some tweens */
            bounceText(word, delay)

            /* adjust our animation and position variables */
            delay += 1.3
            x += word.width
        }
    }

    private function bounceText(a_textField : TextField, a_delay : Number) : void
    {
        /* duration of each tween */
        var t:Number = 0.75

        /* this is the "up" part of the tween, from y=75 to y=35 */
        Tweener.addTween(a_textField, { y:35, delay:a_delay, time:t, transition:"easeOutQuad" } );

        /* this is the "down" part of the tween. note the "delay" parameter is offset by the time of the first tween.
         * the "onComplete" function calls BounceText again when the second Tween is complete. If you are using fl.transitions.Tween,
         * you can add an event listener for a TweenEvent.MOTION_FINISH event, or set the "looping" property of the Tween to true.
         * */
        Tweener.addTween(a_textField, { y:75, delay:a_delay + t, time:t, transition:"easeInQuad", onComplete:bounceText, onCompleteParams:[a_textField, 0.25] } );
    }
}

Answer 2

根据你的补间引擎，你也许能够链接补间。不确定你的Tween引擎到底是什么，这里有一个更经典的方法。animateNext()函数在开始时只调用一次，此后应该只由最后一个Tweens处理程序(或onComplete方法)调用：

var wordList:Array = new Array('one','two','three');

// Keeps track of the current showing word
var currentIndex:int = -1;

// Starts the animation
animateNext();

function animateNext():void
{
   // increments the word counter
   currentIndex ++;

   // resets the word count if all the words are done
   if(currentIndex >= wordList.length)
      currentIndex = 0;

   // Apply the right word here
   var word:String = wordList[currentIndex];
   trace(word);

   // animation tweens here :
   ...

   // place callback function onComplete to animateNext()

}