Forked from:: clockmaker's Compare BetweenAS3 and Tweener Easing

[BetweenAS3] Custom Easing Maker

forked:1
favorite:29
lines:171
license : MIT License
modified : 2009-11-10 01:19:27

Embed: Tweet

<?xml version="1.0" encoding="utf-8"?>
<!-- =======================================================
Custom Easing Maker
カスタムイージングのシミュレーション。

トゥイーンを作るときに、Sineな始まりで
終わりをExpoぐらいにしたいことってありませんか？

BetweenAS3を使うとそれっぽいことができます。
一応、汎用メソッドにしてみました。
======================================================= -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="465" height="465" frameRate="60"
    applicationComplete="init()">
    <mx:Script>
        <![CDATA[
/**
 * making custom easing method.
 * カスタムイージングを作るメソッドです。
 * @param    obj                動かしたい対象
 * @param    to                 開始点
 * @param    from               終了点
 * @param    time               トゥイーンの時間(秒)
 * @param    startEasing        開始時のイージング
 * @param    endEasing          終了時のイージング
 * @param    middlePercent      イージング切り替えの中間点をどこに指定するかの割合(0～1を指定)。ディフォルトは0.5。
 * @return   ITween             合成されたトゥイーンインスタンス
 */
public function customEase(obj:Object, to:Object, from:Object, time:Number, startEasing:IEasing, endEasing:IEasing, middlePercent:Number = 0.5): ITween {
    var middlePoint:Object = { };
    for (var param:String in to) {
        middlePoint[param] = to[param] * middlePercent + from[param] * (1 - middlePercent);
    }
    
    var tw1:ITween = BetweenAS3.tween(obj, middlePoint, from, time, startEasing);
    var tw2:ITween = BetweenAS3.tween(obj, to, middlePoint, time, endEasing);
    
    var tw3:ITween = BetweenAS3.serial(tw1, tw2);
    var tw4:ITween = BetweenAS3.scale(tw3, time / tw3.duration);
    
    return tw4;
}

import flash.display.Sprite;
import flash.utils.getTimer;
import flash.utils.getDefinitionByName;
import flash.system.System;
import org.libspark.betweenas3.tweens.ITween;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import org.libspark.betweenas3.easing.*;
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.core.easing.IEasing;

static private const TWEENS:Array = [
    "Back", 
    "Bounce", 
    "Circ",
    "Circular",
    "Cubic", 
    "Custom", 
    "Elastic", 
    "Expo", 
    "Exponential", 
    "Linear", 
    "Physical", 
    "Quad", 
    "Quadratic", 
    "Quart", 
    "Quartic", 
    "Quint", 
    "Quintic", 
    "Sine"
]
static private const EASES:Array = [
    "easeInOut",
    "easeIn",
    "easeOut",
    "easeOutIn",
]

private var betweenBall:Sprite = new Sprite()
private var betweenLine:Sprite = new Sprite()
private var betweenGraff:Sprite = new Sprite();
private var middleLine:Sprite = new Sprite();
private var tw:ITween;
private function init():void{
    Back
    Bounce
    Circ
    Circular
    Cubic 
    Custom 
    Elastic 
    Expo
    Exponential 
    Linear 
    Physical
    Quad
    Quadratic
    Quart 
    Quartic 
    Quint 
    Quintic 
    Sine
    
    var base:Sprite = new Sprite();
    base.graphics.beginFill(0xFFFFFF)
    base.graphics.drawRect(0, 0, 350, 350);
    base.graphics.endFill()
    
    for(var i:int = 0; i<21; i++){
        base.graphics.lineStyle(1, 0xDDDDDD,1)
        base.graphics.moveTo(0, i/20 * 350)
        base.graphics.lineTo(350, i/20 * 350)
    }
    
    for(i=0; i<21; i++){
        base.graphics.lineStyle(1, 0xDDDDDD,1)
        base.graphics.moveTo(i/20 * 350, 0)
        base.graphics.lineTo(i/20 * 350, 350)
    }
    graff.addChild(base)
    
    betweenBall.graphics.beginFill(0xFF0000);
    betweenBall.graphics.drawRect(-4,-4,8,8);
    betweenLine.addChild(new Bitmap(new BitmapData(350,1,false,0xFFFF0000)));
    graff.addChild(betweenBall);
    graff.addChild(betweenGraff);
    graff.addChild(betweenLine);
    graff.addChild(middleLine);
    
    tweenComboStart.dataProvider = new ArrayCollection(TWEENS);
    tweenComboEnd.dataProvider = new ArrayCollection(TWEENS);
    easeComboStart.dataProvider = new ArrayCollection(EASES);
    easeComboEnd.dataProvider = new ArrayCollection(EASES);
    
    tweenComboStart.selectedIndex = 18;
    tweenComboEnd.selectedIndex = 7;
    easeComboStart.selectedIndex = 1;
    easeComboEnd.selectedIndex = 2;
}

private function changeHandler(e:Event = null):void{
    
    var oldTime:Number = getTimer()
    betweenGraff.graphics.clear();
    var cls1:Class = getDefinitionByName("org.libspark.betweenas3.easing." + tweenComboStart.selectedItem as String) as Class;
    var cls2:Class = getDefinitionByName("org.libspark.betweenas3.easing." + tweenComboEnd.selectedItem as String) as Class;
    if(tw) if(tw.isPlaying) tw.stop();
    tw = customEase(
        betweenBall,
        {x:350, y:0 },
        {x:0, y:350 },
        5,
        cls1[easeComboStart.selectedItem],
        cls2[easeComboEnd.selectedItem],
        percentSlider.value
        );
    betweenGraff.graphics.lineStyle(1, 0xFF0000,1)
    betweenGraff.graphics.moveTo(0, 350)
    
    tw.onUpdate = function():void{
        var time:Number = (getTimer() - oldTime)/1000 / 5 * 350
        var value:Number = betweenBall.y;
        betweenGraff.graphics.lineTo(time, value);
        betweenLine.y = value;
    }
    tw.play();
    
    middleLine.graphics.clear();
    middleLine.graphics.lineStyle(1, 0x0000FF, 1);
    middleLine.graphics.moveTo(0, -percentSlider.value * 350 + 350);
    middleLine.graphics.lineTo(350, -percentSlider.value * 350 + 350);
    
    copySrc = "import jp.clockmaker.utils.*;\n"
        + "import org.libspark.betweenas3.easing.*;\n"
        + "BetweenUtil.customEase(obj, {x:300}, {x:0}, 5, "
        + tweenComboStart.selectedItem + "." + easeComboStart.selectedItem + ", "
        + tweenComboEnd.selectedItem + "." + easeComboEnd.selectedItem + ", "
        + Math.round(percentSlider.value * 100) / 100 + ").play();"
    
}

private function copy():void{
    System.setClipboard(copySrc);
    Alert.show("Copied Custom Easing Script")
}
private var copySrc:String = "";
        ]]>
            
    </mx:Script>
    <mx:Label text="Start" x="5" y="35" />
    <mx:Label text="End" x="5" y="60" />
    <mx:Label text="{'Middle Percent : ' + Math.round(percentSlider.value * 100) + '%' }" x="300" y="35" />
    <mx:ComboBox id="tweenComboStart" change="changeHandler()" x="45" y="35" rowCount="{TWEENS.length}" />
    <mx:ComboBox id="tweenComboEnd" change="changeHandler()" x="45" y="60" rowCount="{TWEENS.length}" />
    <mx:ComboBox id="easeComboStart" change="changeHandler()" x="160" y="35" />
    <mx:ComboBox id="easeComboEnd" change="changeHandler()" x="160" y="60" />
    <mx:HSlider id="percentSlider" change="changeHandler()" x="300" y="60" minimum="0.1" maximum="0.9" value="0.8" toolTip="イージング切り替えの中間点をどこに指定するかの割合" />
    <mx:UIComponent id="graff" width="350" height="350" x="5" y="90" />
    <mx:Label x="6" y="9" text="Custom Easing with BetweenAS3" fontSize="12" fontWeight="bold"/>
    <mx:Button x="370" y="90" label="Play" click="changeHandler()"/>
    <mx:Button x="370" y="120" label="Copy Script" click="copy()"/>
</mx:Application>

Code Fullscreen

Preview Fullscreen