iH5高级教程:H5交互进阶,擦一擦效果

 时间:2024-10-27 11:21:43

1、选中舞台,点击“画图”工具,在舞台上画一个区域,先设置好画图的属性,包括大小、背景颜色、透明度和线条宽度等,并将画笔类型选择橡皮擦。2.注意一定要将画图所有的参数设置好了之后再点画图左下方的“保存”按钮

iH5高级教程:H5交互进阶,擦一擦效果
iH5高级教程:H5交互进阶,擦一擦效果

2、接下来给画图添加蒙版擦除到一部分的时候就会自动消失的事件,选中画图,点击事件工具,擦除的大小可以根据自己要求设定。

iH5高级教程:H5交互进阶,擦一擦效果

3、选中舞台,点击时间轴工具,添加一个时间轴,制作蒙层消失时花朵的动态效果。这里给花朵设置的是旋转变大的动画效果。时间轴属性面板自动播放为NO。2、选中画图,点击事件工具,添加事件,形成蒙层消失花朵的时间轴播放的效果。

iH5高级教程:H5交互进阶,擦一擦效果
iH5高级教程:H5交互进阶,擦一擦效果

4、先行知识:事件、时间轴重点控件:画图、事件、时间轴、擦除/绘画面积知识点:1、画图:画图工具可以在一定区域内随意涂鸦或用来制作擦一擦效果。点击画图工具图标,图线条颜色与线条宽度,也可以把画笔类型改成橡皮,擦掉之前的内容,保存之后,可以对此对象进行拖拽调整位置。2、擦除/绘画开始:用户在案例里开始进行擦除动作/画图动作。3、擦除/绘画结束:用户在案例里擦除动作/画图动作结束。4、擦除/绘画长度:用户在案例里擦除/画图的线条总长度达到某个值。这个触发目标动作的长度值是可以自定义的,以像素为单位;注意:是用户已进行擦除/画图的长度是叠加计算的,例如设置长度为100px,那么当用户进行擦除动作时,无论是分别擦除了5条20px的线条,还是2条50px的线条或者1条100px的线条,这3个方式中任意一个都能使目标动作被触发。5、擦除/绘画面积:用户在案例里已进行擦除/画图的面积达到整个擦除范围/画图范围的面积的某个百分比。面积的百分比通过调整“大小”选项的控制条来设置。例如设置“大小”为20%,那已擦除/画图的范围达到总范围的20%。6、擦除/绘画次数:用户在案例里进行擦除/画图的次数达到设定的限定次数。例如:将“次数”选项的值设为2,那么当用户在规定的擦除/画图范围内进行擦除/画图的次数达到2次时,目标动作就会被触发。7、手势擦除:用户在案例里进行擦除动作,达到设定擦除的大小和长度。此触发条件只对在编辑作品时“要模仿绘制手势解锁图案”等之类的画板对象起作用,擦除过程中只要不松手一直移动,则轨迹会一直进行计算(类似于一笔画);例如:编辑作品时用画板在作品上画了一条直线,触发条件为手势擦除,设置了大小(擦除范围大小)和规定了长度(擦除轨迹的长度),擦除的长度不超于设置的长度且同时擦除的范围达到了设定的大小或以上,目标动作就会被触发;否则,在不满足任意一个条件的情况下,目标动作都不会被触发;但是,如果只设置大小,不规定长度,则擦除轨迹的长度不会受限制,只要擦除范围达到设置的大小或以上,目标动作就会被触发。8、手势擦除少于:用户在案例里进行擦除动作,不满足设定擦除的大小和长度。建议与手势擦除对应使用。此触发条件只对在编辑作品时“要模仿绘制手势解锁图案”等之类的画板对象起作用,擦除过程中只要不松手一直移动,则轨迹会一直进行计算;例如:编辑作品时用画板在作品上画了一条直线,触发条件为手势擦除少于,设置了大小(擦除范围大小)和规定了长度(擦除轨迹的长度),擦除的长度不超于设置的长度且同时擦除的范围在设定的大小之内,目标动作就会被触发;否则,在不满足任意一个条件的情况下,目标动作都不会被触发;但是,如果只设置大小,不规定长度,则擦除轨迹的长度不会受限制,只要擦除范围在设定的大小之内,目标动作就会被触发。重点事件:触发对象:画图触发条件:擦除绘画面积50%目标对象:画图目标动作:删除触发对象:画图触发条件:触发条件擦除绘画面积50%目标对象:时间轴目标动作:继续播放

  • iH5高级教程:H5交互进阶,手势解锁效果
  • iH5尺寸设置怎么满屏
  • iH5高级教程:H5交互菜单,流动的按钮特效
  • iH5基础教程:添加H5页面、翻页特效
  • ih5如何设置物体运动
  • 热门搜索
    童心向党手抄报图 中秋节手抄报内容 劳动手抄报内容 爱国手抄报图片 安全教育的手抄报 六一手抄报 保护动物手抄报 健康饮食手抄报 关于疫情的手抄报 关于儿童节的手抄报