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);
}
}
}
caurina缓动类的更多相关文章
- javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
- 利用tween.js算法生成缓动效果
在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...
- Tween + 缓动函数
Unity-Tween http://www.cnblogs.com/MrZivChu/p/UnityTween.html iTween: iTween大解构(一)之抛物线移动 http://blog ...
- [Cocos2d-x For WP8]EaseActions缓动动作
我们用Silverlight框架开发WP8的应用程序的时,编写动画可以使用缓动效果来实现缓动动画对吧,那么在Cocos2d-x框架里面我们一样是可以缓动动作(缓动动画),其实技术的东西都是想通的,如果 ...
- Silverlight动画学习笔记(三):缓动函数
(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...
- Windows Phone开发(42):缓动动画
原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...
- 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画
原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...
- tween 缓动动画
在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...
- GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里来下载 学习之前,先来准备一下: <!DO ...
随机推荐
- 退役II次后做题记录
退役II次后做题记录 感觉没啥好更的,咕. atcoder1219 历史研究 回滚莫队. [六省联考2017]组合数问题 我是傻逼 按照组合意义等价于\(nk\)个物品,选的物品\(\mod k\) ...
- 坑:jmeter部署AWS云服务器时出现连接超时Non HTTP response code: org.apache.http.conn.HttpHostConnectException
背景: jmeter脚本部署到云服务器(AWS EC2)公网上时,启动jmeter脚本运行了5个小时才运行完毕,后面发现脚本报错timeout(如图),找了很久不知道原因,后面进入脚本发现全部在报错. ...
- Java-根据经纬度计算距离(百度地图距离)
最近碰到一个需求,需要根据两个点的经纬度查询两点的距离.感觉以后还会用到,所以小记一波. 第一步:添加Maven依赖. <dependency> <groupId>org.ga ...
- eclipse juno 怎么安装maven
步骤如下: 1.下载maven的bin,在apache官方网站可以下载. 2.下载下来之后,解压,找个路径放进去, 把bin的位置设在环境变量里,新建环境变量MAVEN_HOME. 3.在PATH里加 ...
- LAMP架构介绍
介绍一下LAMP架构 LMAP即Linux+Apache+Mysql/MariaDB+Perl/PHP/Python的首字母缩写.这是一组常用来搭建动态网站或者服务器的开源软件.它们本身都是各自独立的 ...
- 关于Java正则和转义中\\和\\\\的理解
定义 一个转义字符的目的是开始一个字符序列,使得转义字符开头的该字符序列具有不同于该字符序列单独出现时的语义. 转义就是指转换该字符的原本意义,从而变成另外的意义. \作为Java的转义字符 1.在j ...
- 第06组 Beta冲刺(4/4)
队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11990575.html 作业博客 : https://edu.cnblogs.com/campus/ ...
- Unity创作赛车游戏的四款插件
本文,我们将介绍其中4款:Racing Game Starter Kit.GeNa 2 .NWH Vehicle Physics.Curvy Splines. Racing Game Starter ...
- redis中get值显示为16进制字符串的解决方法
Linux系统中,通过xshell登录redis,当根据某个key进行get取值时,取到的值为“\xc2\xed\xc0\xad\xcb\xb9\xbc\xd3”格式的十六进制字符串,原因是值中的中文 ...
- Facets:一款Google开源机器学习数据集可视化工具
Homepage/演示网站:https://pair-code.github.io/facets/ Pypi:https://pypi.org/project/facets-overview/ Git ...