跳转到内容

自定义动画

在 Kivicube 中,你可以给模型、视频、图片等素材添加自定义动画,轻松实现各种动态效果。

关键帧动画

关键帧动画是什么

通过对素材设置关键帧来指示时间和位置,使该素材按照关键帧来运动。

可以针对场景编辑器中的素材 : 模型、AR视频、透明视频、色度视频、图片、动图创建关键帧动画。

candy.gif

视频教程

高清视频链接

快速创建关键帧动画

现在以该动画为示例,教大家创建一个简单的关键帧动画。

添加关键帧动画

在场景结构中,点击素材对象,在下图动画中新增动画,即可打开关键帧动画设置界面。

keyframe_entrance.png

动画类型选择关键帧动画,系统会自动生成两个初始关键帧,这两个帧的默认参数与素材在场景中的布局完全一致。

keyframe_animation_type.png

设置关键帧

选中你想设定的关键帧,可以拖拽素材或输入每一帧的位置/旋转/缩放/透明度信息。

如下视频是一个简单的动画实现 :

系统会默认选中第二个关键帧。你可以手动选中任意的关键帧,直接在画布上拖拽目标对象坐标轴,即可实时修改该帧对应的物体位置、大小、角度、透明度等全部参数;也可以直接输入、复制布局参数,调整更便捷。

keyframe_settings.png

点击“+”,可以在动画开头、结尾,或是任意两个帧之间新增关键帧,关键帧越多、越密集,动画就越流畅自然。

每两个帧之间的过渡时长和运动曲线都可以单独修改,帧间时长越短,两个帧之间的过渡越快,动画也越快。

播放设置

可以设置动画在什么时候播放,可以设置循环,可以设置动画是否停留在最后一帧,可以设置动画的触发条件。 可查看播放设置和触发条件

keyframe_animation_play_settings.png

预览和保存

  • 在左侧编辑器中点击播放按钮,即可预览动画效果。

  • 打开循环播放,点击播放按钮,可循环播放当前动画。

注意

设定好帧动画后,一定记着点击保存按钮。

keyframe_save_preview.png

关键帧动画详细设置

动画名称、动画类型

keyframe_animation_name_type.png

  • 动画名称:给你的动画取个合适的名字。

在使用其他功能如AR Agent时可能会调用到,如下图,也可查看AR Agent文档。

keyframe_ar_agent.png

在使用事件交互(如动画控制/模型控制)时可能会调用到,如下图

keyframe_animation_control.png

  • 动画类型:选择你的动画类型,默认选中关键帧动画,也可以选择其他动画类型(进入/强调/退出),详情请查看自定义动画文档

keyframe_animation_type.png

关键帧设置

keyframe_settings.png

帧间动画速度曲线设置

我们可以设置每一个帧之间的运动曲线。

注意

横坐标是时间,纵坐标是速度。

keyframe_animation_curve.png

帧间时间设置
  • 设定关键帧之间的时间,从一帧到下一帧花费的秒数。

  • 时间越长,速度越慢。

示例视频,距离相同,小企鹅第一段向右运动时间为3秒,小企鹅第二段向右运动时间为1秒,速度先慢后快。


动画预览功能
  • 点击播放按钮,可以播放当前动画。

  • 点击停止,回到第一帧,重新播放当前动画。

  • 打开循环播放,点击播放按钮,循环播放当前动画。

  • 点击上一帧/下一帧按钮,可以逐帧查看动画。

keyframe_preview.png

关键帧的撤回/还原功能

设置好位置/旋转/缩放信息后,再进行修改,可以撤回/还原相应信息。

keyframe_undo.png

关键帧的复制/粘贴/删除功能

keyframe_copy_paste_delete.png

  • 可以复制某一帧的位置/旋转/缩放信息,粘贴到另一关键帧上。可以把首帧粘贴到尾帧上,做首尾帧循环动画很有用。

  • 可以删除某一关键帧,注意某一帧删除后,会删除其与上一帧之间的时间和动画速度曲线。删除后,多预览,注意删除后的动画效果。

  • 可以粘贴编辑器中其他素材的布局。

播放设置

可以对关键帧动画进行循环设置,不循环/永久循环/次数循环,可以设置是否停留在最后一帧。

查看自定义动画文档

keyframe_play_settings.png

触发条件

可以设置触发类型,如场景开始/扫描识别到/扫描识别丢失/素材对象如小企鹅。

可以设置触发行为,如被点击/动画播放/视频播放等。

查看交互区-触发条件

查看自定义动画文档

keyframe_trigger.png

更多玩法

你不止可以单独给场景中的对象添加关键帧动画,还可以通过多个动画,或是将关键帧动画与视频、模型动画相结合,打造更加生动的 AR 动态效果。

跟其他自定义动画结合

下方案例中,花瓶附近的蝴蝶动画是关键帧动画和摇摆动画结合而成的。

跟素材自带的动画结合

关键帧动画可以与视频、模型动画、动图相结合。

让素材抽象的运动

在添加关键帧时关闭素材的缩放锁定,即可单独调整素材的长、宽、高,实现关键帧之间的形变动画效果。

枝干生长动画:

  • 选择植物的枝干,点击帧1,把缩放这里的锁定按钮解除,这样就可以把素材压得很短很短。

  • 再移动一下枝干的位置,播放设置选择停在最后一帧,一个简单的枝干生长动画就完成了。

花瓣开花动画:

  • 点击一个花瓣做帧动画,把锁定按钮解除,将花朵缩小压扁,把每帧间断的时间缩短一些,多加几帧,把花瓣形状拉长一些,将动画曲线设一下,就完成了一个花瓣的帧动画。

  • 可以把一个花的帧动画复制给其他的花瓣素材,再到各花瓣动画里进行位置的微调,这样花瓣开花的动画就完成了。

关键帧越多,动画越自然

下方关键帧动画中只添加了三个帧,让模型从A先到B再到C,次数动画较为生硬。

pony_abc_1.gif

如果我们在一段动画中添加更多的帧,缩小帧与帧之间的布局变化,动画会更加平滑流畅。

pony_abc_2.gif

视频中水獭从空间盒中弹出来的效果是通过在一段动画中添加更多关键帧以及解除缩放锁定单独调整对象某一边大小实现的。

常见问题

如何使动画更连贯?

循环播放动画时,注意首尾帧那两段的动画衔接,可以调节动画曲线,预览查看效果。

以下分别是6种动画曲线设法的效果,更多效果待你探索 :

  • 缓入/缓出 - 缓入缓出 :好的效果,比较平滑

  • 线性 - 线性 :好的效果,到上顶部/下底部稍微有点弹性

  • 缓出 - 缓入 :坏的效果,到上顶部像拍皮球

  • 缓入 - 缓出 :坏的效果,到下底部像拍皮球
  • 缓入 - 缓入 :坏的效果,到上顶部/下底部稍微有点迟缓
  • 缓出 - 缓出 :坏的效果,到上顶部/下底部稍微有点加速