Animation 在Codenameone中放大和缩小转换

灵感来源于原生Android zoomOut的表单转换和iOS应用程序启动的缩放效果，两者都非常酷

如何在Codenameone中实现表单、对话框和容器的放大或缩小转换

我希望过渡具有如下所示的缩放动画：

@charset“UTF-8”；
*,
：之前，
：之后{
保证金：0；
填充：0；
位置：相对位置；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
输入，
选择，
按钮
文本区{
-webkit外观：无；
-moz外观：无；
外观：无；
字体：继承；
颜色：继承；
}
烟蒂
.输入{
填充：.75rem；
保证金：375雷姆；
背景色：透明；
边界半径：4px；
}
.butt：专注，
.输入：焦点{
大纲：无；
}
.屁股{
边框：2px实心#f35626；
线高：1.375；
左侧填充：1.5雷姆；
右侧填充：1.5rem；
字号：700；
颜色：#f35626；
光标：指针；
-webkit动画：色调60s无限线性；
}
.butt--主要{
背景色：#f35626；
颜色：#fff；
}
.输入{
边框：1px实心#c0c8c9；
边界半径：4px；
}
.输入--下拉列表{
背景图片：url（“images/ddown.png”）；
背景图片：url（“images/ddown.svg？3”），无；
背景重复：无重复；
背景尺寸：1.5雷姆1雷姆；
背景位置：右中；
}
h1，
阿尔法先生{
保证金底部：1.5雷姆；
字体大小：3rem；
字号：100；
线高：1；
字母间距：-.05em；
}
h2，
.贝塔{
边缘底部：.75rem；
字体大小：400；
字体大小：1.5rem；
线高：1；
}
@介质（最小宽度：650px）{
梅加先生{
字号：6rem；
线高：1；
}
}
.分目，
梅塔先生{
颜色：#7b8993；
}
.宣传片{
文本对齐：居中；
}
P
人力资源部，
形式{
保证金底部：1.5雷姆；
}
人力资源{
边界：无；
页边顶部：-1px；
高度：1px；
背景色：#c0c8c9；
背景图像：-webkit线性渐变（0度，fff，#c0c8c9，#fff）；
}
a{
颜色：继承；
文字装饰：下划线；
-webkit动画：色调60s无限线性；
}
a:悬停{
颜色：#f35626；
}
.包裹{
最大宽度：38rem；
保证金：0自动；
}
.岛{
填充：1.5雷姆；
}
A.岛{
填充：.75rem；
}
.吐{
填充：.375rem；
}
html{
字体：100%/1.5“Roboto”，Verdana，无衬线；
颜色：#3d464d；
背景色：#fff；
-webkit字体平滑：抗锯齿；
宽度：100%；
溢出：隐藏-x；
文本对齐：居中；
}
@介质（最小宽度：650px）{
html{
身高：100%；
}
html：以前{
内容：''；
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
保证金权利：-0.25em；
}
身体{
显示：内联块；
垂直对齐：中间对齐；
最大宽度：38rem；
}
}
.站点标题{
-webkit动画：弹跳1s；
}
.网站名称{
颜色：#f35626；
背景图像：-webkit线性梯度（92度，#f35626，#feab3a）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
-webkit动画：色调60s无限线性；
}
.网站内容{
-webkit动画：弹跳1s；
-webkit动画延迟：.1s；
}
.网站内容表{
-webkit动画：弹跳1s；
-webkit动画延迟：.1s；
}
.动画{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
.无限{
-webkit动画迭代计数：无限；
动画迭代次数：无限；
}
.铰链{
-webkit动画持续时间：2秒；
动画持续时间：2秒；
}
.活生生的.蹦蹦跳跳的，
.弹跳{
-webkit动画持续时间：.75秒；
动画持续时间：.75秒；
}
.animated.flipOutX，
.动画{
-webkit动画持续时间：.75秒；
动画持续时间：.75秒；
}
@-webkit关键帧缩放{
从{
不透明度：0；
-webkit转换：scale3d（.3、.3、.3）；
变换：scale3d（.3、.3、.3）；
}
50% {
不透明度：1；
}
}
@关键帧缩放{
从{
不透明度：0；
-webkit转换：scale3d（.3、.3、.3）；
变换：scale3d（.3、.3、.3）；
}
50% {
不透明度：1；
}
}
.zoomIn{
-webkit动画名称：zoomIn；
动画名称：zoomIn；
}
@-webkit关键帧zoomOut{
从{
不透明度：1；
}
50% {
不透明度：0；
-webkit转换：scale3d（.3、.3、.3）；
变换：scale3d（.3、.3、.3）；
}
到{
不透明度：0；
}
}
@关键帧缩放移动{
从{
不透明度：1；
}
50% {
不透明度：0；
-webkit转换：scale3d（.3、.3、.3）；
变换：scale3d（.3、.3、.3）；
}
到{
不透明度：0；
}
}
佐莫先生{
-webkit动画名称：zoomOut；
动画名称：zoomOut；
}

放大和缩小我
缩放
zoomOut
让它充满活力

函数testAnim（x）{
$（“#animationSandbox”）.removeClass（）.addClass（x+”animated'）.one（'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'，function（）{
$（this.removeClass（）；
});
};
$（文档）.ready（函数（）{
$（'.js--triggerAnimation'）。单击（函数（e）{
e、 预防默认值（）；
var anim=$（'.js--animations'）.val（）；
testAnim（anim）；
});
$（'.js--animations'）.change（函数（）{
var anim=$（this.val（）；
testAnim（anim）；
});
});

可能最接近某些Android效果的是表单之间的变形转换，它允许组件成长为下一个表单

如果您想要更接近上述代码，只需将组件放置在正确的位置并使其变小，然后使用

animateLayout（）

使其生长到位

在过去，我们有一个

FlyIn

transition，它精确地映射到这一点，但它使用了旧的3D代码。虽然仿射变换和缩放与

FlipTransition