实验五拖动动画、滤镜动画、关联动画
一、拖动动画
1.在舞台中添加3张图片,并将它们上下相接
2.同时选中所有图片,点击鼠标右键,弹出菜单中选择“组”-“组合”,此时3张图片已经变成了一组图片。观察属性面板的第一行,已经显示为“组”。
3.将属性面板的“拖动/旋转”按钮设置为“垂直拖动”,如下图,
4.预览动画,此时可以在整个屏幕区用手指上下拖动图片。
5.如果欲将图片控制在某个特定区域内显示,而不是满屏显示,可以做如下修改:
(1)将上述步骤3还原回原来的设置,即将“拖动/旋转”按钮设置为“不
允许”;
(2)将属性面板的“组类型”设置为“裁剪内容”,此时组类型的下方
会出现“允许滚动”的选项,将其设置为“垂直滚动”,如下图:
html如何设置图片滚动
(3)点击工具栏的“变形”工具,回到舞台中,将组合后的图片变形缩
小到合适的尺寸(通常比舞台尺寸小),并拖放到目标位置,例如下图
中的红框区域:
(4)预览动画,此时只能在目标区域(红框)内才可以上下拖动图片,
区域外不可拖动。
(5)如果将“垂直滚动”更改为“自由滚动”,则在上下和左右两个方
向均可以实现拖动。
(6)注:在电脑上预览时,目标区域中会出现上下或左右滚动条。而通
过二维码共享在手机端浏览时,不会出现滚动条,只能通过手指来拖动
图片。
二、滤镜动画
1.制作动画(关键帧动画、变形动画等)
2.在时间线上选中某一个关键帧,在属性面板中对“滤镜”按钮进行设置,如下图,例如选择“模糊”滤镜。然后点击后面的加号“+”,在弹出的滚动条上设置具体的“模糊”数值。
3.回到时间线上,选中同一图层的另一个关键帧,对该关键帧设置和步骤2一样的滤镜选项(本例中再次选择“模糊”滤镜,并设置一个和步骤2不同的“模糊”数值)。
4.如果需要添加多个滤镜,则重复上述步骤2和3,可以继续添加其他滤镜效果。
三、动画的关联
关联动画,是将动画与某个对象绑定。动画的播放与停止,受该对象的控制。
1.舞台动画的关联
(1)将第一个图层重新命名为“风景”,在第1帧插入一个宽幅面的风景图,其宽度比舞台宽度大很多,将风景图的左边界和舞台左边界对齐;
(2)在第30帧“插入关键帧动画”,在第30帧,拖动风景图,将该图的右边界和舞台的右边界对齐。
(3)预览动画,看到风景图从左到右的自动播放;
(4)新建第二个图层,图层重命名为“关联按钮层”,在第1帧绘制一个正圆形。选中该图形,在属性面板中将该图形的名称修改为“按钮”,具体如下图:
(5)紧接着在属性面板中,将“拖动/旋转”设置为“水平拖动”,如下图:
(6)单击一下舞台,确保此时“属性”面板显示的是“舞台”属性,如下图:
(7)在属性面板中,将“动画关联”设置为“启用”,然后点击”启用”
后面的“曲别针”按钮,如右图:
(8)将“关联对象”设置为步骤(4)绘制的正圆形对象;
(9)将“关联属性”设置为“左”;
(10)将开始值和结束值分别设为100和200;
(11)将播放模式设置为“切换”。具体如下图:
(12)预览动画。会看到,当正圆形按钮被拖动到水平横坐标100-200之间时,动画处于播放状态,否则,动画停止播放。
(13)在属性面板中点击“动画关联”最右侧的画笔按钮,下方会再次弹
出动画关联的属性设置按钮,
(14)将播放模式设置为“同步”;
(15)预览动画。观察其变化。
2.元件动画的关联
(1)制作元件动画“月亮绕地球转”
(2)在舞台第1图层添加一个太阳,在30帧“插入帧”;
(3)在舞台新建第2个图层,在第1帧拖入一个“月亮绕地球转”的元件;
(4)在舞台新建第3个图层,在第一帧绘制一个长方形的图形,在属性面板将该图形重命名为“遥控器”、将“拖动/旋转”设置为“水平拖动”;
(5)点击舞台第2个图层的第一帧,并点击舞台中的“月亮绕地球转”的元件;此时属性面板显示的是“元件”的属性,如图
(6)
(7)在属性面板的下方,将“动画关联”设置为“启用”,并点击“启
用”后面的“曲别针”按钮,如图
(8)按照舞台关联动画的方法设置各项动画关联的属性值;
(9)回到舞台第2个图层,在第30帧插入关键帧动画,在第一帧将重心拖动到太阳的重心,在第30帧将属性面板中的“旋转”设置为360°。
(10)预览动画。