使用 NativeScript 动画 API | NativeScript 博客

随着我们 1.3 版本的发布（将于 9 月发布），我们将在 NativeScript 中添加高度期待的动画支持。我们将有一篇专门的博客文章详细解释我们的动画支持。如果您迫不及待，请在 GitHub 问题中阅读更多关于动画的信息。如果您好奇动画是如何实现的，并且喜欢阅读 TypeScript 代码，请查看这里的实现。

在这篇博客文章中，我将分享一个简单的示例，该示例由团队中的一位高级开发人员 Alex 创建，它受到推文中一个动画 GIF 的启发。

因此，我们决定亲测自己的动画，看看在 NativeScript 中以跨平台的方式实现它有多容易。事实证明这相当容易 - 只需要几行代码。

您可以在这里查看完整的源代码，但这里是最有趣的部分。

首先，我们需要初始化“圆形”元素。在本例中，我们只是创建空按钮并在其上应用简单的 CSS 定义。

for (var i = 0; i < count; i++) {

views[i] = new buttons.Button();

views[i].cssClass = "circle";

plot.addChild(views[i]);

}

以下是 CSS 定义

.circle {

width: 20;

height: 20;

border-radius: 10;

border-width: 1;

border-color: gray;

background-color: aqua;

}

现在元素已显示在屏幕上，我们应该初始化动画。

for (var i = 0; i < count; i++) {

setTimeout(createStarter(i), delay * (i + 1));

}

function createStarter(idx) {

return function () {

animate(idx, 1);

};

}

实际执行这些漂亮动画的动画代码位于这里。

function animate(index, direction) {

var v = views[index];

var x = direction * Math.cos(piFract * index) * W;

var y = direction * Math.sin(piFract * index) * H;

v.animate({

translate: { x: x, y: y },

duration: duration,

iterations: 1,

curve: v.ios ? UIViewAnimationCurve.UIViewAnimationCurveEaseInOut : new android.view.animation.AccelerateDecelerateInterpolator()

}).then(function () { animate(index, -direction); });

}

动画变量使用以下常量定义。

var W = 150;

var H = 150;

var count = 8;

var duration = 4000;

var delay = (duration / count);

var piFract = Math.PI / count;

请查看以下 iOS 模拟器中的最终结果。

现在，下一步是使用 NativeScript 中闪亮的新动画 API 进行操作，并将任何反馈发送给我们！

如需更多此类示例，请关注我们的 @NativeScript，并为我们的 NativeScript GitHub 存储库加星标！