ssRender引擎展示EasingType效果

 效果：

---

工程介绍：

        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节点来实现，其中在绑定和自定义属性上花费的时间比较多，因为在自定义属性上有时候类型没有选择正确而导致错误，排查上花费了很多时间，其余花费时间并不多，这次的绑定可能比较多，大家如果还有不熟悉的地方可以跳转到绑定和事件再去看看。

---

         [1] ssRender绑定和事件_工程1

         [2] ssRender绑定和事件_工程2

         [3] ssRender绑定和事件表达式