返回博客主页
← 所有帖子

在 NativeScript 中使用 CSS 动画

2016 年 3 月 7 日 — 由 Tsvetan Raikov

快速链接到 示例应用程序仓库.

有数百万个 iOS 和 Android 应用程序。在这个生态系统中，创建一个脱颖而出并吸引客户注意力的应用程序并非易事。该应用程序应该智能、快速且具有吸引力。

提高应用程序吸引力的方法之一是添加动画。我们知道，在混合应用程序中实现流畅且原生外观的动画非常困难。这通常会导致混合开发人员对设计人员说“不”，拒绝更复杂的动画。这就是 NativeScript 已经包含一个 易于使用且方便的跨平台 API，它公开原生动画 的原因。但是，我很高兴告诉您一些新的东西正在酝酿中

此功能处于**实验状态**，并且不是 NativeScript 的生产就绪发行版的一部分。我们已为您准备了一个特殊的版本，您可以使用它。请向我们发送任何反馈！

动画的当前（1.6）状态

目前，在 NativeScript 的 1.6 版本中，您可以使用原始 NativeScript API 来创建动画

view.animate({
   translate: { x: 100, y: 100},
   scale: { x: 1.5, y: 1.5 },
   backgroundColor: new color.Color("#00A0FF"),
   opacity: 0.5,
   duration: 1200
});

这比使用原生 iOS 和 Android 代码必须编写的代码要干净得多

// iOS: Objective C

[UIView animateWithDuration:1.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
                           CGAffineTransform transform = CGAffineTransformTranslate(view.transform, 100, 100);
                           transform = CGAffineTransformScale(transform, 1.5, 1.5);
                           view.transform = transform;
                           view.backgroundColor = [UIColor colorWithRed:0.0 green:0.6 blue:1.0 alpha:1.];
                           view.alpha = 0.5;
                    }
                    completion:^(BOOL finished) {
                    }];

 

// Java: Android

ObjectAnimator translateX = ObjectAnimator.ofFloat(myView, "translateX", 100f);
ObjectAnimator translateY = ObjectAnimator.ofFloat(myView, "translatrY", 100f);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(myView, "scaleX", 100f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(myView, "scaleY", 100f);
ObjectAnimator alpha = ObjectAnimator.ofFloat(myView, "alpha", 0.5f);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
AnimatorSet animSet = new AnimatorSet();
animSet.playTogether(translateX, translateY, scaleX, scaleY, colorAnimation, alpha);
translateX.setDuration(1200);
translateY.setDuration(1200);
//…
animSet.start();

 
对动画的 CSS 支持

尽管 NativeScript 的 JavaScript 动画 API 确实易于使用，但我们意识到 Web 开发人员希望能够从 CSS 运行动画，并且已经存在用于执行此操作的 CSS 属性和约定。使用 CSS 不仅将动画与应用程序的逻辑分离，并保持一切干净简洁，还使您可以访问数百种预定义且可立即使用的动画。我们很好奇，如果您能够使用相同的语法来为原生 iOS 和 Android 组件设置动画，会怎么样？以下是一些抢先体验

.animated {
        animation-name: animation;
        animation-duration: 1.2s;
}
@keyframes animation {
        to {
                    transform: translate(100, 100) scale(1.5, 1.5);
                    background-color: #00A0FF;
                    opacity: 0.5;
        }
}

使用动画很简单，只需分配将要设置动画的原生对象的 className 属性即可

view.className = "animated";

这就是它的样子

CSS 关键帧！

可以使用 css 关键帧构建更复杂的动画

@keyframes animation {
        from { transform: none; }
        20% { transform: rotate(45); }
        50% { transform: rotate(50) scale(1.2, 1.2) translate(50, 0); }
        100% { transform: rotate(0) scale(1.5, 1.5) translate(100, 0); }
}

在 NativeScript 中重复使用 animate-css

您可以从您最喜欢的 CSS3 动画库中获得几乎所有动画。您甚至可以将动画库直接包含在您的应用程序中。让我们以流行的 animate-css 库为例：

@import: "~/css/animate.css"
.animation {
        animation-name: wobble;
        animation-duration: 3s;
}

 

您可以在 animate-css 网站 https://daneden.github.io/animate.css/ 上查看所有这些基于 CSS 的动画，并玩一会儿。

运行示例应用程序

开源的好处是可以跟踪我们的进度。我准备了一个自定义版本，并相应地更新了我们的动画演示应用程序。只需按照以下步骤操作

  1. 克隆以下 GitHub 仓库：https://github.com/NativeScript/animation-demo
  2. cd animation-demo
  3. git checkout feature/css-animations-release
  4. npm install
  5. 您已准备就绪。
帮助 NativeScript 社区并在 twitter 上分享新闻！