代码改变世界

AS3常用动画效果公式集合

2015-10-26 11:40  妙笔生花  阅读(628)  评论(0编辑  收藏  举报

AS3缓动公式:
sprite.x += (targetX – sprite.x) * easing;//easing为缓动系数变量
sprite.y += (targetY – sprite.y) * easing;

AG:

<!-- 示例一:AS3缓动公式 从(0,0)移到(x,y) -->
<div id="box" style="width: 100px; height: 100px; background: #f85455;position: absolute;"></div>
<script>
    var  CS3HD = {
        easeOut: function(target,sprite){
            //target目标坐标点l;
            sprite.x += (target.x - sprite.x) * 0.1;//easing为缓动系数变量
            sprite.y += (target.y - sprite.y) * 0.1;
            return sprite;
        }
    }
    var box = document.getElementById('box');
    var target = {x: 300,y: 400} , oldSprite = {x: 0,y: 0};
    var timer = null;
    function run(){
        oldSprite = CS3HD.easeOut(target,oldSprite);
        box.style.left = Math.ceil(oldSprite.x) + 'px';
        box.style.top =  Math.ceil(oldSprite.y) + 'px';
        timer = setTimeout(run,1000/60);
        if(oldSprite.x > target.x){
            clearTimeout(timer);
        }
    }
    run();
</script>

 

<!-- 示例二:AS3缓动公式 从(y,y)移到(0,0)-->
<div id="box2" style="width: 100px; height: 100px; background: #f85455;position: absolute;top:300px;left:300px;"></div>
<script>
    var  CS3HD = {
        easeIn: function(target,sprite){
            //target目标坐标点l;
            sprite.x -= (sprite.x - target.x) * 0.1;//easing为缓动系数变量
            sprite.y -= (sprite.y - target.y) * 0.1;
            return sprite;
        },
        easeOut: function(target,sprite){
            //target目标坐标点l;
            sprite.x += (target.x - sprite.x) * 0.1;//easing为缓动系数变量
            sprite.y += (target.y - sprite.y) * 0.1;
            return sprite;
        }
    }
    var box = document.getElementById('box2');
    var target = {x: 0,y: 0} , oldSprite = {x: 300,y: 300};
    var timer = null;
    function run(){
        oldSprite = CS3HD.easeIn(target,oldSprite);
        box.style.left = Math.floor(oldSprite.x) + 'px';
        box.style.top =  Math.floor(oldSprite.y) + 'px';
        timer = setTimeout(run,1000/60);
        if(oldSprite.x <= target.x){
            clearTimeout(timer);
        }
    }
    run();
</script>

 

AS3弹性公式:
vx += (targetX – sprite.x) * spring;//spring为弹性系数
vy += (targetY – sprite.y) * spring;
sprite.x += (vx *= friction);//friction为摩擦力
sprite.y += (vy *= friction);

AS3偏移弹性公式:
var dx:Number = sprite.x – fixedX;
var dy:Number = sprite.y – fixedY;
var angle:Number = Math.atan2(dy, dx);
var targetX:Number = fixedX + Math.cos(angle) * springLength;
var targetY:Number = fixedX + Math.sin(angle) * springLength;

AS3向鼠标旋转(或向某点旋转)
dx = mouseX – sprite.x;
dy = mouseY – sprite.y;
sprite.rotation = Math.atan2(dy, dx) * 180 / Math.PI;

AS3波形运动:
public function onEnterFrame1(event:Event):void {
ball.y=centerScale+Math.sin(angle)*range;
angle+=speed;
}

心跳:
public function onEnterFrame1(event:Event):void {
ball.scaleX=centerScale+Math.sin(angle)*range;
ball.scaleY=centerScale+Math.sin(angle)*range;
angle+=speed;
}

AS3圆心旋转:
public function onEnterFrame(event:Event):void {
ball.x=centerX+Math.cos(angle)*radius;
ball.y=centerY+Math.sin(angle)*radius;
angle+=speed;
}

椭圆旋转:
public function onEnterFrame(event:Event):void {
ball.x=centerX+Math.cos(angle)*radiusX;
ball.y=centerY+Math.sin(angle)*radiusY;
angle+=speed;
}
AS3颜色运算得到透明值:
var t:uint=0x77ff8877
var s:uint=0xff000000
var h:uint=t&s
var m:uint=h>>>24
trace(m)
AS3转换为十进制:
trace(hexValue);
AS3十进制转换为十六进制:
decimalValue.toString(16)
AS3颜色提取:
red = color24 >> 16;
green = color24 >> 8 & 0xFF;
blue = color24 & 0xFF;
alpha = color32 >> 24;
red = color32 >> 16 & 0xFF;
green = color32 >> 8 & 0xFF;
blue = color232 & 0xFF;
AS3按位计算得到颜色值:
color24 = red << 16 | green << 8 | blue;
color32 = alpha << 24 | red << 16 | green << 8 | blue;
AS3过控制点的曲线:
// xt, yt is the point you want to draw through
// x0, y0 and x2, y2 are the end points of the curve
x1 = xt * 2 – (x0 + x2) / 2;
y1 = yt * 2 – (y0 + y2) / 2;
moveTo(x0, y0);
curveTo(x1, y1, x2, y2);