跳转到正文
jolt.
原生质感,无限表达。RC.11.1

感受每一帧。

不止于使用,更触动感官。为 NativeScript 打造的动效引擎,在 Web 同样鲜活。

OBJECT 001 — 流动不息
拖动,感受惯性。
JOLT WEB
为你的创作方式而生。
NativeScript/iOSAndroid/Web EXPERIMENTAL
↓
VENA / NATIVESCRIPT + JOLT属于你的节奏

20 万个光点。

每一点光,
一次心动。

光点织成心脏,身体随你而动。靠近,改变节奏,看每一点光鲜活起来。

感受 Vena 把动效带走
iOS / 原生录屏

Vena iOS 创作者录屏:英文界面、开场、粒子心跳、节奏收藏与心脏聚焦。原始速度,60 fps 导出,无音频;省略最初 3.25 秒的系统主屏幕与启动。录制设备未说明;非性能测试。BPM 数值仅为示意。

BodyParts3D © DBCLS · CC BY 4.0 / MakeHuman · CC0 ↗
AURALIS / NATIVESCRIPT + JOLT登场的艺术

让初见留在心间。

初见,
心动。

玻璃轻浮,光影引路。三个场景,让第一次触碰成为美好的开始。

认识 Auralis两个配方,任你改编。
  1. 01可能
  2. 02连接
  3. 03流动
Auralis

Auralis iOS 创作者录屏:动画开场、悬浮玻璃卡片、三个引导场景和页面控件。原始速度,无音频;省略最初 4.25 秒的系统主屏幕与启动转场。录制设备未说明;非性能测试。账户和服务均为示意。

用 JOLT 构建 / 精选项目

Morrow.

音乐,触动人心。

可触碰的唱片,鲜活的艺人页面。用 NativeScript 和 Jolt 构建的音乐体验。

认识 Morrow
NativeScriptJoltiOS
Morrow 艺人页面,来自提供的 iOS 录屏
观看真实应用 ↗

Morrow · NativeScript + Jolt。创作者提供的 iOS 录屏:动画开场、艺人页面、唱片播放器、进度拖动与视频转场。保持原始时间,仅省略最初 2.4 秒的系统主屏幕。录制设备未说明。

HEXDROP / NATIVESCRIPT + JOLTRC.11 ↗

一个小小手势,一个奇妙世界。

一点
魔法。

拖入文件,唤醒魔药,看小蜘蛛搭上旅程。连等待也可以充满惊喜。

认识 Hexdrop获取两个动效配方
  1. 01投放
  2. 02酿制
  3. 03惊喜
原生视图,一点魔法。

Hexdrop iOS 创作者录屏:动画开场、拖动、酿制、文档选择与重播。原始速度,无音频;省略最初 3.8 秒的系统主屏幕与启动转场。录制设备未说明。本地演示,不上传文件。

01 / 动效精选

把心动带走。
创造你的动效。

真实界面,真实原生录屏。发现下一个让你好奇的动效。

全部 22 个配方

亲手体验,感受不同。

动手才能感受。

探索 Jolt Web 的每一面。 53 个实验,一个游乐场。

实验集 53
动效与物理

弹簧

LIVE

点击、改变目标、打断,保留动量。

spring.ts

// 创造自己的版本。

import { createWebRuntime } from '@rafaelaugusto/jolt/web'

// 在已挂载组件内,使用其 DOM 引用:
const motion = createWebRuntime(document)
const scope = motion.scope()

scope.animate(card, { x: 110, rotate: 12 }, {
  type: 'spring', bounce: 0.4, duration: 800
})

// 组件卸载时:scope.dispose(); motion.dispose()
API 指南与限制

本页运行真实 Jolt Web,设备功能报告实际浏览器支持。 探索实验集 ↗

03 / 实测记录

性能,
公开实测。

探索性研究

一个动画,一台真机。结果与取舍,全部可查。

默认配置组
−53.6%

本次测试中进程 CPU 时间更少

NativeScript + Jolt
vs. React Native + Reanimated
NativeScript + Jolt6.79 s / 30 s
React Native + Reanimated14.63 s / 30 s
应用全部线程的进程 CPU 时间中位数,归一化为 30 秒运行。
ASUS ZenFone 3 · Android 8.0.05 组交替测试 · 每次 30 秒 · release 应用
01

刻意限定的测试。

一个 48 × 48 方块,改变位置与透明度。数据比较此设备上的完整应用,不代表节电效果或 Android 平台整体排名。

02

取舍同样公开。

默认 Jolt 的运行后 PSS 与呈现等待更高。另一个 V8 size 配置测试中,阻塞应用 JS 后最大间隔的中位数为 309.13 ms,Reanimated 为 17.06 ms。启动失败原因仍未确定。

02 / 不止于演示

为触动你而造。

探索作品展示

品牌短片 · 01:00

This is NativeScript.

一分钟展示 Jolt 和 Motion Studio,使用真实 iOS 模拟器录屏,配以宣传片剪辑和音乐。SceneKit 场景仅适用于 iOS。

使用 JOLT 构建 · iOS

Jolt
Drive.

环绕汽车,进入座舱,穿行奥斯汀。原生视图与 3D 世界,一起律动。

Jolt Drive 的 iOS 车库入场:来自项目发布的 GIF,转为 MP4 并保留每帧时间戳。录制设备未说明;此预览不用于衡量渲染性能。

观看早期 Jolt Car 演示 02:04

iOS 模拟器录屏:灵感来自 Tesla 的示例应用,展示 3D 汽车、空调控制和接驾行程。保持原始播放速度;仅为演示界面,不连接真实车辆。

下一个精彩界面,从这里开始。

少一点配置。
多一些可能。

开放源码,尽情探索、改造,创造自己的作品。

开始构建

迈出小小的第一步

$npm install
@rafaelaugusto/jolt@0.1.0-rc.11.1
安装与平台配置 ↗