logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 画布
    • 简介
    • 初始化参数
    • 场景图能力与生命周期
    • 内置对象
    • 坐标系
    • 画布事件
    • OffscreenCanvas 和服务端渲染
    • CustomElementRegistry
    • 常见问题
  • 渲染器
    • 简介
    • Canvas 渲染器
    • Canvaskit 渲染器
    • SVG 渲染器
    • WebGL 渲染器
    • WebGPU 渲染器
    • 自定义渲染器
  • 相机
    • 简介
    • 相机参数
    • 相机动作
    • 相机动画
  • 事件
    • 简介
    • 事件对象
    • 手势和拖放
    • 常见问题
  • 动画
    • Web Animations API
    • Lottie 动画
  • 基础图形
    • 基础概念
    • DisplayObject
    • Group 图形分组
    • Text 文本
    • Circle 圆形
    • Ellipse 椭圆
    • Rect 矩形
    • Image 图片
    • Line 直线
    • Polygon 多边形
    • Polyline 折线
    • Path 路径
    • HTML 内容
  • 样式系统
    • 简介
    • 继承机制
    • CSS Typed OM
    • CSS Properties & Values API
    • CSS Layout API
    • Pattern
    • Gradient
  • 三维世界
    • 材质
    • 几何
    • 光源
    • Mesh
    • 雾
    • 交互
  • 内置对象
    • EventTarget
    • Node
    • Element
    • Document
    • MutationObserver
    • 工具方法
  • GPGPU
    • 简介
    • 编程模型
    • Kernel API
    • 经典 GPGPU 的实现原理
    • webgpu-graph
  • 声明式用法
    • 使用 Web Components
  • 开发调试工具
    • G 开发者工具
    • 内置的渲染统计信息
    • 第三方开发调试工具

相机动画

上一篇
相机动作
下一篇
简介

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

我们可以把相机当前的位置、视点记录下来,保存成一个"地标" Landmark。随后当相机参数发生改变时,可以随时切换到之前保存的任意一个 Landmark,同时带有平滑的切换动画,类似真实片场中的摄像机摇臂,在一些应用中也称作 flyTo(例如 Mapbox 中的应用),示例。

createLandmark

创建一个 Landmark,参数包括:

  • markName 名称
  • options 相机参数,包括:
    • position 世界坐标系下的相机位置,取值类型参考 setPosition
    • focalPoint 世界坐标系下的视点,取值类型参考 setFocalPoint
    • roll 旋转角度,取值类型参考 setRoll
    • zoom 缩放比例,取值类型参考 setZoom
camera.createLandmark('mark1', {
position: [300, 250, 400],
focalPoint: [300, 250, 0],
});
camera.createLandmark('mark2', {
position: [300, 600, 500],
focalPoint: [300, 250, 0],
});
camera.createLandmark('mark3', {
position: [0, 250, 800],
focalPoint: [300, 250, 0],
roll: 30,
});

gotoLandmark

切换到之前保存的 Landmark,在 2D 和 3D 场景下都适用,示例:

camera.gotoLandmark('mark1', { duration: 300, easing: 'ease-in' });
// or
camera.gotoLandmark(landmark, { duration: 300, easing: 'ease-in' });

参数列表如下:

  • markName 名称或者已创建的 Landmark
  • options 动画参数,包括:
    • duration 动画持续时间,单位为 ms,默认值为 100
    • easing 缓动函数,默认值为 linear。和动画系统一致的内置效果
    • easingFunction 自定义缓动函数,当内置的缓动函数无法满足要求时,可以自定义
    • onfinish 动画结束后的回调函数

和动画系统中的 options 参数一样,传入 number 时等同于设置 duration:

camera.gotoLandmark('mark1', { duration: 300 });
camera.gotoLandmark('mark1', 300);

值得注意的是,如果在一个相机动画结束前调用另一个,进行中的动画将会立刻取消。