Question

受原生Android zoomOut的启发，用于表单转换和iOS应用程序启动缩放效果，这两者都非常酷......

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

我希望转换具有如下的缩放动画：

@charset "UTF-8";
 *,
:before,
:after {
  margin: 0;
  padding: 0;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input,
select,
button,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
}
.butt,
.input {
  padding: .75rem;
  margin: .375rem;
  background-color: transparent;
  border-radius: 4px;
}
.butt:focus,
.input:focus {
  outline: none;
}
.butt {
  border: 2px solid #f35626;
  line-height: 1.375;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 700;
  color: #f35626;
  cursor: pointer;
  -webkit-animation: hue 60s infinite linear;
}
.butt--primary {
  background-color: #f35626;
  color: #fff;
}
.input {
  border: 1px solid #c0c8c9;
  border-radius: 4px;
}
.input--dropdown {
  background-image: url("images/ddown.png");
  background-image: url("images/ddown.svg?3"), none;
  background-repeat: no-repeat;
  background-size: 1.5rem 1rem;
  background-position: right center;
}
h1,
.alpha {
  margin-bottom: 1.5rem;
  font-size: 3rem;
  font-weight: 100;
  line-height: 1;
  letter-spacing: -.05em;
}
h2,
.beta {
  margin-bottom: .75rem;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
}
@media (min-width: 650px) {
  .mega {
    font-size: 6rem;
    line-height: 1;
  }
}
.subhead,
.meta {
  color: #7b8993;
}
.promo {
  text-align: center;
}
p,
hr,
form {
  margin-bottom: 1.5rem;
}
hr {
  border: none;
  margin-top: -1px;
  height: 1px;
  background-color: #c0c8c9;
  background-image: -webkit-linear-gradient(0deg, #fff, #c0c8c9, #fff);
}
a {
  color: inherit;
  text-decoration: underline;
  -webkit-animation: hue 60s infinite linear;
}
a:hover {
  color: #f35626;
}
.wrap {
  max-width: 38rem;
  margin: 0 auto;
}
.island {
  padding: 1.5rem;
}
.isle {
  padding: .75rem;
}
.spit {
  padding: .375rem;
}
html {
  font: 100%/1.5"Roboto", Verdana, sans-serif;
  color: #3d464d;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow: hidden-x;
  text-align: center;
}
@media (min-width: 650px) {
  html {
    height: 100%;
  }
  html:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }
  body {
    display: inline-block;
    vertical-align: middle;
    max-width: 38rem;
  }
}
.site__header {
  -webkit-animation: bounceInUp 1s;
}
.site__title {
  color: #f35626;
  background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 60s infinite linear;
}
.site__content {
  -webkit-animation: bounceInUp 1s;
  -webkit-animation-delay: .1s;
}
.site__content form {
  -webkit-animation: bounceInUp 1s;
  -webkit-animation-delay: .1s;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, minimal-ui" />

  <link rel="dns-prefetch" href="//fonts.googleapis.com" />
  <link rel="dns-prefetch" href="//code.jquery.com" />

  <link href='//fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700' rel='stylesheet' type='text/css'>
</head>

<body>
  <header class="site__header island">
    <div class="wrap">
      <span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Zoom me in and out</h1></span>
    </div>
  </header>
  <!-- /.site__header -->

  <main class="site__content island" role="content">
    <div class="wrap">
      <form>
        <select class="input input--dropdown js--animations">
          <optgroup label="Zoom Entrances">
            <option value="zoomIn">zoomIn</option>
          </optgroup>

          <optgroup label="Zoom Exits">
            <option value="zoomOut">zoomOut</option>
          </optgroup>
        </select>

        <button class="butt js--triggerAnimation">Animate it</button>
      </form>
      <hr />
    </div>
  </main>
  <!-- /.site__content -->

  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
    function testAnim(x) {
      $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(this).removeClass();
      });
    };

    $(document).ready(function() {
      $('.js--triggerAnimation').click(function(e) {
        e.preventDefault();
        var anim = $('.js--animations').val();
        testAnim(anim);
      });

      $('.js--animations').change(function() {
        var anim = $(this).val();
        testAnim(anim);
      });
    });
  </script>

</body>

</html>

Answer 1

可能与某些Android效果最接近的是表单之间的变形转换，允许组件成长为下一个表单http://www.codenameone.com/blog/mighty-morphing-components.html

如果您想要更接近上述代码，可以将组件放在正确的位置并缩小，然后使用animateLayout()使其成长。

在过去，我们有一个FlyIn转换，它完全映射到这个，但它使用旧的3D代码。我认为通过仿射变换和缩放与FlipTransition类似地实现它应该是微不足道的。

Codenameone中的放大和缩小过渡

1 个答案: