脚本 (Scripting)

示例 (Demos)

Rive 脚本示例和演示。

​ 概览

本页收集了一些实用的 Rive 脚本示例，帮助你快速上手。

​ 基础示例

跟随鼠标

function onPointerMove(x, y) {
  const cursor = artboard.node("Cursor");
  cursor.x = x;
  cursor.y = y;
}

持续旋转

let angle = 0;

function onAdvance(elapsed) {
  angle += elapsed * 90; // 每秒 90 度
  artboard.node("Spinner").rotation = angle;
}

弹跳动画

let velocity = 0;
let position = 0;
const gravity = 500;
const bounce = 0.7;

function onAdvance(elapsed) {
  velocity += gravity * elapsed;
  position += velocity * elapsed;
  
  if (position > 300) {
    position = 300;
    velocity = -velocity * bounce;
  }
  
  artboard.node("Ball").y = position;
}

​ 交互示例

拖拽

let isDragging = false;
let offsetX = 0;
let offsetY = 0;

function onPointerDown(x, y) {
  const node = artboard.node("Draggable");
  isDragging = true;
  offsetX = node.x - x;
  offsetY = node.y - y;
}

function onPointerMove(x, y) {
  if (isDragging) {
    const node = artboard.node("Draggable");
    node.x = x + offsetX;
    node.y = y + offsetY;
  }
}

function onPointerUp() {
  isDragging = false;
}

​ 资源

• 官方示例库
• 社区论坛

创建脚本脚本概览