Animation/Fx - Ext JS

I originally had:

var actor = new Ext.Actor('lgform', null, true);
actor.moveIn('left', null, 1);
actor.play();
How would you go about this now?

Thanks for any help!
Reply With Quote
  #2  
Old 02-19-2007, 10:27 PM
Default

Actually moveIn/moveOut probably should be ported over. I liked those two.

If you haven't used alignTo before, it is a great function. alignTo received major upgrades in the release, thanks to the help of bmoeskau (Brian). Check out the docs for it.

This would probably work for you:

el.alignTo(document, 'c-l').show().alignTo(document, 'c-c', null, true);

Obviously not quite as clean but more powerful (can moveIn from corners). I will plan on adding short handed moveIn/Out functions.
Reply With Quote
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .animation { /* 动画的名字 */ animation-name: example; /* 动画的持续时间 */ animation-duration: 4s; /* 动画的播放次数 */ animation-iteration-count: infinite; /* 无限次播放 */ /* 动画播放速度 */ animation-timing-function: linear; /* 匀速播放 */ /* ease-in 慢进慢出 */ /* ease-out 慢出 */ /* ease-in-out 慢进慢出 */ /* step-start 瞬间开始 */ /* step-end 瞬间结束 */ /* cubic-bezier(0.25, 0.1, 0.25, 1.0) 自定义速度曲线 */ /* 动画播放延迟时间 */ animation-delay: 0s; /* 0s 表示动画立即开始 */ /* 动画播放方向 */ animation-direction: normal; /* normal 正向播放 */ /* reverse 反向播放 */ /* alternate 交替播放 */ /* alternate-reverse 反向交替播放 */ /* 动画播放状态 */ animation-play-state: running; /* running 播放 */ /* paused 暂停 */ /* 动画填充模式 */ animation-fill-mode: none; /* none 不保留 */ /* forwards 保持最后一帧 */ /* backwards 保持第一帧 */ /* both 前后都保留 */ /* 简写形式 */ /* animation: example 4s infinite linear 0s normal running none; */ position: relative; /* 相对定位 */ } @keyframes example { 0% { background-color: red; left: 0px; top: 0px;transform: rotate(0deg);} 25% { background-color: yellow; left: 200px; top: 0px;transform: rotate(90deg); } 50% { background-color: blue; left: 200px; top: 200px; transform: rotate(180deg);} 75% { background-color: green; left: 0px; top: 200px;transform: rotate(270deg); } 100% { background-color: red; left: 0px; top: 0px;transform: rotate(360deg); } } </style> </head> <body> <div class="animation" ></div> </body> </html> 什么问题
最新发布
11-25
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值