另外,这个默认的动画参数是可以被修改的,这里就会涉及到关键帧和动画曲线两个概念。
在动画中,一帧就是一幅停止的画面,连续播放帧就形成了动画,在Principle中,我们可以控制帧的播放时间,这就是所谓的关键帧。点击事件的带箭头直线,在工作区下方就会出现一个动画面板,右侧时间轴有一个蓝色的条,就是我们所说的关键帧,蓝色条左侧的菱形代表关键帧的开始时间,右侧的菱形代表关键帧的结束时间,系统默认的动画效果持续时间是0.3S,我们可以拉长关键帧的长度,来增加动画效果的持续时间。
另外,在时间轴上向右拖动关键帧,可以延迟动画发生的时间,左侧对应的Opacity(透明度)就是动画要实现的效果,点击雪花图标,可以冻结当前的动画效果,这个图标还是挺形象的。
当汽车从A点驾驶到B点时,司机可以选择平稳驾驶,也可以选择先加速后减速,也可以选择高速起步临近终点再慢下来,这个驾驶过程就好比动画曲线。在动画中,控制“驾驶”过程的背后,就是动画曲线在起作用。关键帧中间有一个“Default(默认)”的英文单词,点击它,就会出现一个包含所有动画曲线的d层,Default默认被选中,拖动曲线的小蓝点,可以调整曲线的弧度,也可以在下方XY的输入框中输入参数,这些参数是需要给到前端实现的,我们后面会讲述。
每种动画曲线的效果都不同,简单的Default(默认)曲线,是一条平稳过渡的曲线;复杂的Springs(d性)曲线,模拟了d簧的震动和阻尼效果,还提供摩擦力系数的选项;Linear(直线)曲线是直线变化的效果,后面标记的表情也告诫我们不要用。
推荐阅读:
Principle中文手册: Principle中文手册(2019)
“拖动”是卡片式设计中一种常见的交互,属于“即时交互”。即时交互指的是在 *** 作进行的时刻即有反馈,非即时交互则是在人的 *** 作结束后物体才有反应,比如按钮的点击、卡片翻转等。
在实际的设计中,很多地方会用到“拖拽”的手段给用户带来更佳的效果,可以说,在拖动启动的一瞬间,用户就明白了这样 *** 作的结果,同时,他也可以“反悔”——放回原处,这样就可以防止误解和 *** 作失误,增加了产品的容错性
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)