[Slider Revolution 6]用各种动画连续为图层设置动画

[Slider Revolution 6] Continuously animate Layers with a variety of animationsSlider Revolution
这篇文章约4分阅读完。
[Slider Revolution 6]用各种动画连续为图层设置动画

内容

1.时间轴

[Slider Revolution 6]用各种动画连续为图层设置动画

当您想循环播放图层动画循环的特定部分时,时间线循环很有用在以下示例中,两个其他关键帧动画已添加到“图层”时间轴。为了便于编辑,它们已重命名为“循环开始”和“循环结束”。然后,通过“图层时间轴循环”,我们可以为循环选择这些动画点。

[Slider Revolution 6]用各种动画连续为图层设置动画

在右侧的屏幕截图中,“循环量”选项可用于确定应发生的循环次数(为“无限”输入“ -1”),并且可以将“循环”选项中的“动画为’开始’用于创建yoyo型循环(向前,向后,然后再次向前),而不是在每次循环后自动跳到循环起始帧。

[Slider Revolution 6]用各种动画连续为图层设置动画

2.效果

图层循环效果与图层的常规时间轴动画是分开的,可用于以连续的动作吸引用户的注意力,例如,一个按钮来回跳动或来回倾斜的消息。

[Slider Revolution 6]用各种动画连续为图层设置动画

2.1动画模板

将鼠标悬停在选项上以进行实时预览。

[Slider Revolution 6]用各种动画连续为图层设置动画

并保存自己的自定义模板,以便以后在工作流中使用。

[Slider Revolution 6]用各种动画连续为图层设置动画
[Slider Revolution 6]用各种动画连续为图层设置动画

2.2常规设置

1.开始时间
循环动画开始之前的时间(以毫秒为单位)。

2.动画持续
时间动画将在循环继续之前发生的总时间(以毫秒为单位)。

3.动画缓动  用于动画
的 缓动方程通常,“ Linear.easeNone”是最佳选择。

4/5/6。转换原点X / Y / Z
可选的 CSS转换原点  。“ 50%”通常是最佳选择。

[Slider Revolution 6]用各种动画连续为图层设置动画

2.3高级设置

移动
规模
旋转
过滤

1.悠悠
动画结束后立即反转位置,反之亦然。

2/3。开始结束水平移动 
在循环动画的开始和结束处应用的“ x”(左)位置。接受正数和负数。

4/5。开始/结束垂直运动
在循环动画的开始和结束处应用的“ y”(顶部)位置。接受正数和负数。

6/7。开始/结束深度运动
CSS translateZ为循环动画的起点和终点。这会为图层添加/删除3D深度。

8.弯曲
Bezier曲线添加到起点和终点之间的运动。

9.自动旋转
根据图层在Bezier路径上的位置自动旋转图层

10. 贝塞尔曲线角度
表示曲线在动画中的位置。 较低的度数将使曲线朝向起点,而较高的度数将朝向终点。

11. 贝塞尔曲线张力
用该值放大曲线。 1 =无放大率。 2 =曲线的两倍,依此类推。

12/13. 贝塞尔曲线开始/结束X
表示贝塞尔曲线的开始和结束“ x”(左)位置。

14/15. 贝塞尔曲线开始/结束Y
贝塞尔曲线开始/结束Y

16/17. 贝塞尔曲线开始/结束Y

表示贝塞尔曲线的开始和结束“ z”(3D深度)位置。

[Slider Revolution 6]用各种动画连续为图层设置动画

 

[Slider Revolution 6]用各种动画连续为图层设置动画

1.悠悠
动画结束后立即反转位置,反之亦然。

2/3. 开始/结束旋转X
循环动画的开始和结束rotateX值(水平平面)。 接受正值和负值。

4/5. 开始/结束旋转Y
循环动画的开始和结束rotateY值(水平平面)。 接受正值和负值。

6/7. 开始/结束旋转2D
循环动画的开始和结束旋转值(2D)。 接受正值和负值。

[Slider Revolution 6]用各种动画连续为图层设置动画

动画结束后立即反转动画滤镜,反之亦然。

2/3. 开始/结束不透明度
循环动画的开始和结束透明度级别。

4/5. 开始/结束模糊
循环动画的开始和结束模糊滤镜值。

6/7. 开始/结束灰度
循环动画的起始灰度滤镜值。

8/9。开始/结束亮度循环动画
的开始和结束亮度滤镜值。

[Slider Revolution 6]用各种动画连续为图层设置动画

评论

复制标题和 URL