caurina缓动类

一、简单的缓动

一个实例名为box的正方体,开始alpha为0.5,在两秒内移动到x:300 y:100的位置,alpha变为1。
import caurina.transitions.Tweener;
Tweener.addTween(box,{x:300, y:100, alpha:1, time:2, transition:"linear"});
使用该类库,使用顺序缓动也很容易,你不需要使用事件同步你的缓动效果

下面代码实现的是在2秒内将一个物体从一个地方改变为x:300 y:100 alpha=1,并在2.5秒后1秒内旋转50°

import caurina.transitions.Tweener;
Tweener.addTween(box,{x:300, y:100, alpha:1, time:2, transition:"linear"});
Tweener.addTween(box,{rotation:50, time:1, transition:"linear",delay:2.5});

例3:下面代码实现的功能为延迟2.5秒后在一秒内旋转50°并在结束时调用函数doThis()

Tweener.addTween(box,{rotation:50, time:1, transition:"linear",delay:2.5, onComplete:doThis});
function doThis()
{
trace("here");
}

例4:下面代码实现的功能为延迟2.5秒后在一秒内旋转50°并在结束时调用函数doThis(s)

Tweener.addTween(box,{rotation:50, time:1, transition:"linear",delay:2.5, onComplete:doThis, onCompleteParams:["hello world"]});
function doThis(s:String)
{
trace(s);
}

例5:下面代码实现的功能为延迟2.5秒后在一秒内旋转50°并在结束时调用函数doThis(n1,n2,n3)

var nr1:Number=1;
var nr2:Number=2;
var nr3:Number=3;
Tweener.addTween(box,{rotation:50, time:1, transition:"linear",delay:2.5, onComplete:doThis, onCompleteParams:[nr1,nr2,nr3]});
function doThis(n1:Number, n2:Number, n3:Number)
{
trace(n1+n2+n3);
}

例六:下面实例实现五个按钮,依次从大到小显示。

import caurina.transitions.*;
for(var i:uint=0;i<5;i++){
  this["mc"+i]=new mc();
  this["mc"+i].x=i*60+100;
  this["mc"+i].y=180;
  this["mc"+i].width=200;
  this["mc"+i].height=200
  addChild(this["mc"+i])
  this["mc"+i].alpha=0;
  Tweener.addTween(this["mc"+i], { width:50,height:50,alpha: 1,y:200, time: 0.2, transition: "easeOutExpo",delay:i*0.2});
}

二、多重缓动

var my_array:Array=new Array();
var timer:Timer;
for(var i:int=0;i<10;i++)
{var clip:MovieClip=new MovieClip();
clip.graphics.beginFill(0x33FFFF,1);
clip.graphics.drawRect(0,0,35,35);
clip.graphics.endFill();
addChild(clip);
my_array.push(clip);
clip.x=35+clip.width*i+10*i;
clip.y=10;
}
timer=new Timer(300,my_array.length);
timer.addEventListener(TimerEvent.TIMER,cambiaColore);
timer.start();
function cambiaColore(evt:TimerEvent):void
{
Tweener.addTween(my_array[evt.target.currentCount-1],{_color:0x333333,time:1,transition:"easeInBounce"});
Tweener.addTween(my_array[evt.target.currentCount-1],{y:100,time:1,transition:"easeInBounce"});
}

例二:
package
{
import flash.display.*;
import flash.events.*;
import flash.utils.getDefinitionByName;
import caurina.transitions.Tweener; 
public class Main extends MovieClip
{
private var items_array:Array;
private var background_colors:Array; 
private var container_mc:MovieClip;
private var underline_mc:MovieClip; 
private const ROWS:int=10; 
public function Main()
{
addEventListener(Event.ADDED_TO_STAGE,init);
}

private function init(evt:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE,init); 
stage.frameRate=31; 
items_array=new Array(menu_mc.item_0_mc,menu_mc.item_1_mc,menu_mc.item_2_mc,menu_mc.item_3_mc,menu_mc.item_4_mc);
background_colors=new Array(0x006699,0xCC0066,0xFF3300,0x009900,0x333333); 
changeItemColor(0);
displayContent("Square"); 
addMenuListeners();

private function addMenuListeners():void
{
for(var i:int=0;i < items_array.length;i++)
{
items_array[i].id=i;
items_array[i].mouseChildren=false;
items_array[i].buttonMode=true;
items_array[i].addEventListener(MouseEvent.MOUSE_OVER,setOver);
items_array[i].addEventListener(MouseEvent.MOUSE_OUT,setOut);
items_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
}
}

private function setOver(evt:MouseEvent):void
{
underline_mc=new MovieClip();
underline_mc.graphics.beginFill(0xFFFFFF,1);
underline_mc.graphics.drawRect(0,0,1,1);
underline_mc.x=evt.target.x;
underline_mc.y=evt.target.y+evt.target.height+5;
menu_mc.addChild(underline_mc); 
Tweener.addTween(underline_mc,{width:evt.target.width+5,time:0.3,transition:"easeOutQuad"});
}

private function setOut(evt:MouseEvent):void
{
if(underline_mc!=null)
{
menu_mc.removeChild(underline_mc);
underline_mc=null;
}
}

private function setDown(evt:MouseEvent):void
{
Tweener.addTween(bg_mc,{_color:background_colors[evt.target.id],time:1.2,transition:"easeOutQuad"});

menu_mc.removeChild(underline_mc);
underline_mc=null;
changeItemColor(evt.target.id); 
switch(evt.target.id)
{
case 0:
displayContent("Square");
break;

case 1:
displayContent("Circle");
break;

case 2:
displayContent("Star");
break;

case 3:
displayContent("Oval");
break;

case 4:
displayContent("Line");
break;
}
}

private function changeItemColor(n:int):void
{
for(var i:int=0;i < items_array.length;i++)
{
if(i==n)
{
items_array[i].mouseEnabled=false;
Tweener.addTween(items_array[i],{_color:0x000000,time:1.5,transition:"easeOutQuad"});
}
else
{
items_array[i].mouseEnabled=true;
Tweener.addTween(items_array[i],{_color:0xFFFFFF,time:1.5,transition:"easeOutQuad"});
}
}
}

private function displayContent(s:String):void
{
var className:Class=getDefinitionByName(s)as Class; 
if(container_mc!=null)
{
removeChild(container_mc);
container_mc=null;
}
container_mc=new MovieClip();
for(var i:int=0;i < 50;i++)
{
var clip:MovieClip=new className();
clip.scaleX=clip.scaleY=0;
clip.x=66+((i%ROWS)*30);
clip.y=66+(Math.floor(i/ROWS)*30);
Tweener.addTween(clip,{scaleX:2,scaleY:2,delay:0.05*i,time:0.2,transition:"easeOutQuad"});
container_mc.addChild(clip);
}
container_mc.x=(stage.stageWidth-container_mc.width)/2;
container_mc.y=(stage.stageHeight-container_mc.height)/2;
addChild(container_mc);
}
}
}

原文地址:https://www.cnblogs.com/fengziwu/p/11979943.html

时间: 2024-10-11 08:53:02

caurina缓动类的相关文章

JS-特效 ~ 05. 缓动框架兼容封装/回掉函数/兼容透明度/层级、旋转轮播图、正则表达式、验证表单注册账号、

缓动函数中opcity  写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for-in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/兼容透明度/层级 function animate(ele,json,fn){ //先清定时器 clearInterval(ele.timer); ele.timer = setInterval(function () { //开闭原则 var bool = true; //遍历属性和值,分别单独处

Silverlight动画学习笔记(三):缓动函数

(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果,但可能需要执行大量的工作,并且与使用算术公式相比动画的精确性将降低. (三)实例讲解: 1 <UserControl x:Class="AnimationStudy.EasingFunctionAnimation" 2 xmlns="http://schemas.mic

利用tween.js算法生成缓动效果

在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等.无论运用在哪里,它们的原理都是一样的.同样,在用js实现运动效果时,我们也可以利用贝塞尔曲线来实现不同的特效,而tween.js就是一个封装好的计算辅助算法.你可以通过连续输入多个值,然后利用贝塞尔曲线公式输出不同的值,最终形成了一条光滑的曲线.因为一条曲线上的值的不一样的,所以我们可以利用曲线的

c# Winform 缓动动画

一.定义缓动动画类 public class AnimationHelper { Timer animationTimer = new Timer(); double velocity = 0.0; Point location = Point.Empty; double force = 0.01; //0.69; double drag = 0.8; private Control control; //private AxShockwaveFlash control; private int

tween 缓动动画

在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等.无论运用在哪里,它们的原理都是一样的.同样,在用js实现运动效果时,我们也可以利用贝塞尔曲线来实现不同的特效,而tween.js就是一个封装好的计算辅助算法.你可以通过连续输入多个值,然后利用贝塞尔曲线公式输出不同的值,最终形成了一条光滑的曲线.因为一条曲线上的值的不一样的,所以我们可以利用曲线的

【WPF学习】第五十一章 动画缓动

线性动画的一个缺点是,它通常让人觉得很机械且不能够自然.相比而言,高级的用户界面具有模拟真实世界系统的动画效果.例如,可能使用具有触觉的下压按钮,当单击时按钮快速弹回,但是当没有进行操作时它们会慢慢地停下来,创建真正移动的错觉.或者,可能使用类似Windows操作系统的最大化和最小化效果,当窗口解决最终尺寸时窗口扩展或收缩的速度会加速.这些细节十分细微,当它们的实现比较完美时可能不会注意到它们.然而,几乎总会注意到,粗糙的缺少这些更细微特征的动画会给人留下笨拙的印象. 改进动画并创建更趋自然的动

缓动函数与关键帧动画

缓动函数与关键帧动画 缓动函数指定动画效果在执行时的速度,使其看起来更加真实. 现实物体照着一定节奏移动,并不是一开始就移动很快的.当我们打开抽屉时,首先会让它加速,然后慢下来.当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板. http://easings.net/zh-cn 缓动函数能让动画效果看起来更加真实:). iOS开发中,能用到缓动函数的地方就属于关键帧动画了,以下是我用关键帧动画做出来的模拟真实时钟效果的动画,效果相当逼真哦,只是这个gif图片的效果不好而已.

div盒子的缓动函数封装

1.2.  缓动动画 1.2.1.       原理公式 动画公式 leader = leader + step 匀速动画公式 step = 定值 leader = leader + step 缓动动画公式 step = ( target - leader ) / 10 leader = leader + step 缓动动画的好处 他的移动是有尽头的.不像基础匀速运动那样无限移动. 有非常逼真的缓动效果,实现的动画效果更细腻. 如果不清除定时器,物体永远跟着目标leader在移动. @体验缓动动

缓动的原理与实现

动画就是以一定的频率去改变元素的属性,使之运动起来,最普通的动画就是匀速的动画,每次增加固定的值.缓动就是用来修改每次增加的值,让其按照不规律的方式增加,实现动画的变化. 程序实现缓动 没有加速度的线性运动 数学公式为:f(x)=x, 代码如下: AnimationTimer.makeLinear = function () { return function (percentComplete) { return percentComplete; }; }; 逐渐加速的缓入运动 数学公式为:f(