果然是熟能生巧,这个动效的完成时间比上次快了好多,各种基础组件用的也比较熟练了,嘻嘻☺️
先看效果图:
实现要点:
1、每个状态点跟随每张banner图的变化而变化,图片从左到右首尾相接左滑轮播;
2、鼠标悬停时,轮播动画停止,左右箭头显示;
3、点击箭头,当前展示banner可切换到上一张或下一张,鼠标移出区域后,动画继续。
实现步骤:
第一步
当然是上次的步骤重复啦,先拉一个动态面板,咔咔来四个状态🙃,再来四个小方,
小方的初始背景为灰色,然后在PROPERTIES中设置选中背景色为任意闪亮的✨の颜色
给轮播动态面板设置onload事件:循环动画&小方初始状态
为了让小方颜色跟banner一起动起来,即当轮播面板的状态改变时,四个小方也要同时切换不同的值:
到这一步,就实现了基础的banner动效。
第二步
鼠标悬停效果就要加鼠标事件了:移进轮播面板,动画停止,移出,动画继续
然后拖入俩箭头,并分别添加点击事件
箭头的初始状态设为隐藏,当鼠标移入是显示,移出时隐藏
若移入移出监听事件加在轮播面板上,当鼠标移上箭头时,会出现箭头先消失后显示的bug,所以,将当前的所有组件全部选中,转换为动态面板后,将监听事件加在这个新面板上
此时,又出现了个奇怪的事情,这个新面板上的OnMouseEnter事件好像没有生效,要疯(╯‵□′)╯︵┻━┻
找了好久也不知道为啥,然后,我把绑在轮播面板上的OnMouseEnter事件转到了这个新面板上,然后就OK啦
是因为同一面板下的所有层级,单个事件只能绑定一次?这个问题我再多实践看看吧,留个思考题🤔