效果:
工程介绍:
1.Next按钮:切换EasingType动画效果(文字进入的动画效果会发生变化)
2. Duration:毫秒显示动画的持续时间
3.Load Easing:加载当前动画效果
4.Easing_OutExpo:当前动画效果(文字随着Next的调节而变化)
5.+ :增加100持续时间,点击后Duration后面数字会发生变化
6. - :减少100持续时间,点击后Duration后面数字会发生变化
操作流程:
首先我们还是创建节点重命名并设置属性(注意Project窗口中节点的上下层级)如下图所示。
节点对照表
节点 | 数量 |
Layer | 1 |
Item | 6 |
SeqImage | 4 |
Text | 7 |
Button | 4 |
节点名称 | Preview窗口是否显示 | Preview窗口显示情况 |
Background | 是 | 灰白色(#EAEAEAEA)背景图 |
SeqImage5 | 否 | 实现Text节点EasingType文字切换效果,不作显示 |
Item1 Item2 Item33 | 否 | 作SeqImage中的占位,不显示不做任何属性更改 |
EaingType Next(Text节点) Easing_Text | 是 | 作为SeqImage子节点,文字显示和节点名称一致 Easing_Text随着Next按钮点击发生改变 |
Next(Button节点) LoadEasing DJ、DZ | 否 | Next按钮覆盖在Next文字节点位置上方,不设置颜色 LoadEasing按钮覆盖在LoadEasing文字节点位置上方,不设置颜色 DJ按钮覆盖在 + 文字节点位置上方,不设置颜色 DZ按钮覆盖在 – 文字节点位置上方,不设置颜色 |
设置自定义属性:
创建三个自定义属性分别用来控制切换效果,重新加载,持续时间,如下图所示:
Sum:控制Easing_Type效果切换。
IndexNext:让文字重新加载一下动画效果。
Time:控制动画效果的持续时间,默认是1500毫秒
拖拽三个自定义属性到background节点的Properties窗口中,用来控制SeqImage节点的相关效果,如下图所示。
下面按Project窗口中的上下顺序依次选中SeqImage节点分别在Interaction窗口中新建Bindings,在Property下拉菜单中分别按下图选择,在白色脚本编辑器中输入不同的表达式。
如下图所示(下图是SeqImage5节点,其余SeqImage节点也是相同设置)。
设置Button的事件:
1.设置LoadEasing节点的Button事件(用于切换EasingType效果)如下图所示。
2.设置LoadEasing节点的按下和释放事件,通过这两种事件实现文字重新加载的效果,如下图所示。
3.设置DJ、DZ节点的Clicked事件用来控制EasingType效果的持续事件,每次增加/减少100,如下图所示。
setProperty:{$../background/Time}={$../background/Time}+100
setProperty:{$../background/Time} = {$../background/Time} - 100
小结:
本次工程构想上花费时间比较长,因为软件实现当前效果的方法有很多种最终确定还是用SeqImage节点来实现,其中在绑定和自定义属性上花费的时间比较多,因为在自定义属性上有时候类型没有选择正确而导致错误,排查上花费了很多时间,其余花费时间并不多,这次的绑定可能比较多,大家如果还有不熟悉的地方可以跳转到绑定和事件再去看看。